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 MixinPosted 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 SystemPosted 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!
Dark menu from Web Developer ChecklistPosted on
I love the little menu from Web Developer Checklist, so I recreated it in CodePen. Not much to say about this one!
See the Pen Dark menu from Web Developer Checklist by Smokie Lee (@xtoq) on CodePen.
Pure CSS BB-8Posted 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.
Codevember day 30: Juggling loader animationPosted on
Thanks to Lea Verou I was able to animate along a circular path! Based on this Dribbble by hassan alkhateeb. It’s been a great Codevember, even if it’s been a struggle for me. =D
See the Pen #codevember day 30 : juggling loader by Smokie Lee (@xtoq) on CodePen.
EDIT: Awesome me forgot to add a title, so the URL for this is stupid. ARGH!
Codevember day 29: futuristic login boxPosted on
Little login box I saw on Dribbble. Happy Codevember!
See the Pen #codevember day 29 : futuristic login box by Smokie Lee (@xtoq) on CodePen.
Codevember day 28: bubble drink css animationPosted on
A little bubbly drink animation for Codevember. Very tired today.
See the Pen #codevember day 28 : bubbly drink by Smokie Lee (@xtoq) on CodePen.
Codevember day 25: responsive icon navigationPosted on
Happy Codevember day 25! Today I have for you a little responsive icon navigation that I saw on Pattern Tap. Sadly, the original site is no longer working, but hey, the Web is nothing but fluid, right? That’s why we have responsive design!
I still want to add text next to the submenu icons like the screenshot, but I didn’t have time for it tonight.
See the Pen #codevember day 25 : responsive icon navigation by Smokie Lee (@xtoq) on CodePen.
Codevember day 24 : Pexcil homepage PSD to HTMLPosted on
Decided to do a little PSD to HTML -esque page from a screenshot I saw on Pattern Tap. Still have some of the responsiveness to work out, but overall I’m pleased.
Based on the home page from Pexcil seen on Pattern Tap here.
See the Pen #codevember day 24 : Pexcil homepage by Smokie Lee (@xtoq) on CodePen.