Text Effects Sass functions & mixins

Posted on

CSS has come a long damned way from the days of having to use tables because positioning wasn’t available. (Sure, dating myself a bit, but as they say: you’re only young once but you can be immature forever.) Time was that if one wanted any sort of effect on text – and we’re talking system installed fonts here, nothing fancy – you had to create an image. Once the semantic web was encouraged, you then had to replace a heading tag with said image to get the best SEO as well as have the creative look. Of course, every browser had different support for the technique so there were dozens of image replacement hacks. (If you’re interested in a history lesson, CSS-Tricks has an entire page dedicated to the different techniques.) Nowadays CSS can do a helluva lot of basic text effects directly in the browser, with fantastic cross-browser support.

Windowfy Sass Mixin

Posted on

In my travels around the internet, I see many interesting portfolios for both designers and developers. Often these portfolios include images of the web site or application as it would look in a desktop window, usually an OSX (Mac) window. I really liked the effect, and I wanted to recreate it in CSS. Once I had done that I thought it was pretty cool, and I wanted to share it so I made a Sass mixin, which proved to be more enlightening that I had originally anticipated.

Flat Solar System

Posted on

My daughter is learning about the solar system and other bits of astronomy in school, so I thought it would be fun to create a little CSS animation that shows how the orbits work. I found this image on Dribbble that I really liked the look of, and decided to recreate it in CSS. This served well enough to explain to her how much smaller than the sun we are, and the Earth’s place in the solar system. Right now of course, these orbits and sizes are not at all to scale, but maybe someday!

Product page redesign (unused) – Bass Pro Shops

Posted on

NOTE: This is an incomplete piece and was never officially presented to Bass Pro Shops for consideration.

In 2014, while working on optimizing the CSS (a project that got postponed indefinitely) I started envisioning a product page redesign for Bass Pro Shops. The current product page was created in 2012 when the big site redesign happened, and while it was acceptable for that time and place, it wasn’t holding up well under evolving user needs. Since this wasn’t a requested project I had an open canvas for design, which was quite rare.

CSS Eclipse, AKA ECSS-lipse

Posted on

I saw this animation on Dribbble and I fell in love with it, so of course I had to remake it in CSS. I still need to do the spark animation when the eclipse is total (well, it’s not total, it’s an annular solar eclipse actually). When I was doing it, I couldn’t figure out an elegant way to have the spark come around and paint the border the way it does in the animation, at least not with CSS. I’m still working on my animation chops here, okay? If I had realized how vital animation would be to my future career, I would have taken more animation classes when I did sound. Yeah, that degree’s totally working out for me these days…

Enjoy!

See the Pen Annular solar eclipse in CSS by Smokie Lee (@xtoq) on CodePen.

Pure CSS BB-8

Posted on

There are a lot of magic numbers in this, but that’s okay. It’s not a production-level thing. I’m utilizing radial gradients to achieve the panels on his body and linear ones for the lines on his head & body. The second camera/eye is a box-shadow of the main eye.

Next up: animation! I want him to peek around the left side of the screen, roll to the center, look behind him and then dash forward. Such a complicated animation requires some thinking though, and I need to see if I can do it all in CSS/SCSS. I’m sure I can, but at what price!?

See the Pen Pure CSS BB-8 by Smokie Lee (@xtoq) on CodePen.