I was feeling inspired after seeing the cool pure CSS pulsing rings on the Transmit 4 website that launched this morning so I put together this demo. (Did you notice the rings? You had to browse there with Safari to see them.)
Check out my pure CSS map markers live demo in Safari or Chrome.
Update: The CSS2 text-shadow property sure is versatile. If you combine it with some CSS3 animations you can create a pretty decent vanishing smokey text effect.
A few months ago I made a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow. I posted it on Twitter but never got around to posting it here. Today I pulled together another text effect, shining text, by using CSS3 properties and animation. I thought I'd cover both in one post.
Now we're cooking with gas.
Most readers should see the previous line of text on fire since it just uses the CSS2 property text-shadow. If you don't see that you're probably using Internet Explorer or something. Do note, there's no use of images, and the text is still selectable.
The key to this effect is using multiple text shadows applied to the same text, each with a different color, position, and blur.
text-shadow: color1 x1 y1 blur1, color2 x2 y2 blur2, …;
Then you just jostle them around with some JavaScript. Open my flaming text example and view source. There's not a lot to it.
Check out the shine on this.
To see this effect, you're going to have to check it out in Safari, Chrome, or WebKit. Again, this effect uses no images and the text is selectable, and this time there isn't even any JavaScript involved. If you have an iPhone, the above effect is remarkably similar to the "slide to unlock" text animation on your lock screen.
This effect is created through a combination of a CSS3 gradient in the background, a CSS3 background clipping property which clips the background to the text, and a CSS3 animation to move the background gradient. I was inspired by a demo done by Trent Walton, and took it to the next level by removing the use of any image files. Open my shining text example and view source.
The background gradient is created with the -webkit-gradient CSS3 property. Firefox 3.6 added support for CSS gradients to the Firefox browser family.
The animation is created with a CSS3 animation. You can read more about these in Safari's Visual Effects Guide. CSS3 animations and transitions are on their way to Firefox 3.7.
The "trick" CSS property here to complete this effect is the CSS3 property -webkit-background-clip. This defines the region to which the CSS background property will be clipped. By using transparent or semi-transparent text and -webkit-background-clip: text I can make the background gradient only visible where the text is.
Welp, that's about it. I hope you found it enjoyable. Happy hacking!
I lead the team of people for Student Unions & Activities at the University of Minnesota who built this touch screen building directory installed in Coffman Memorial Union. The directory is a web app running in WebKit on a Mac Mini attached to a touch screen monitor. No Flash was used. Many of the graphic elements like the panels and buttons are generated entirely with CSS3. The 3D floor diagrams were created with Google SketchUp. Here's a first look at the project which launched early on Friday, January 15th:
We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My leadership role included project management, creative direction, information architecture (IA), and user experience (UX). My development role included core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.
Update: This project won 4th place overall in the University of Minnesota 2011 Quality Fair! That's a huge honor, and I want to congratulate my former team at Student Unions & Activities for their continued work on this application.
Well, yesterday was the last day of 2009, and today starts a new decade. Hello 2010. You are so shiny and futuristic looking. Anyway, I figured I'd succumb to the incredibly predictable year-in-review post. So what did I do in 2009? I did quite a bit actually, and writing this post helps to remind me of that... otherwise I just have a tendency to think of all the things I didn't accomplish. Also, I find years tend to blur together without any reflection. Here's a handy little timeline [made with pure CSS and no images, don't-chya-know] of oh-nine:
Wrote this blog app using my own custom PHP/MySQL MVC framework
Launched zachstronaut.com
Had a little fun with the 40-below weather
Connected with Karl Swedberg of Learning jQuery and helped to patch his smooth scrolling script
My Canvas+JavaScript Black Hole 404 page became 404 Research Lab's 404 of the Week
Celebrated 1234567890 day
Created the Harvey Birdmanizer as a way to play around with WebKit's CSS transforms and transitions
Found a use for the beta Events feature that popped up in my Google Analytics
Patched jQuery to standardize access to CSS transforms across Chrome, Safari, and Firefox.
Released my rotate3Di jQuery plugin that makes isometric 3d rotation of html content possible
Spoke at MinneWebCon 2009 about Web Human Interface Guidelines
Had an emergency appendectomy
Won a award for the web-based JavaScript video game Handy Andy 2
Presented ShortJournal at minnedemo
My "3D" CSS isocube was an official Mozilla Hacks demo for the Firefox 3.5 release
Created a CSS realtime spotlight effect, another official Mozilla Hacks demo also featured on Ajaxian
Showed some pixel art in the Together show at the umber° studios art gallery
Celebrated my nation's independence by blowing up a small part of it
Patched jQuery to support animation of the rotation and scale CSS transforms
Created the JavaScript RPG Equip > Pants in seven days for the Experiment Gameplay Project
Remixed Chris Coyier and Devon Govett's bookmarklet Printliminator into the Printliminasploder
Invited to demo Scribbls with Paul Armstrong at the 2009 MIMA Summit
Had a wonderful Halloween holiday in London, England
SitePoint published my article about browser cache control for images, CSS, and JavaScript files
Attended the awesomest minnebar yet and met some really great folks
Attended An Event Apart in San Francisco and made new friends and saw old friends
Met Zeldman, Meyer again, Snook in person, and saw Spool do magic tricks
Previewed my 3D-flipping image gallery LightBox-clone
Used CSS text-shadow to create a burning text on fire effect
Made the Winternizer, which creates realistic snow on any website with some CSS text-shadow trickery
Phwew... I got tired typing that, and even more tired re-reading it. Where do I get off thinking I didn't get anything done in 2009? It is a year I should definitely be proud of. Other things from the year not in the timeline: a bunch of browser bugs I found and submitted over the course of the year, countless projects at my full-time job at the University of Minnesota (probably most memorable is launching a complete redesign of the Events & Conferences site), and a ton of new friends gained and connections made.
My stated resolution for 2009 was to, "Help the collective improvement of the web." I'd say I kept that promise to myself (probably a personal first for a New Year's resolution). Every bug I submitted, every patch I wrote, and every crazy thing I tried to get web browsers to do were all my contributions to the vast collection of brilliant people out there who all helped to make 2009 the year that web browsers really got awesome.
In 2010 I will continue to work to make the web more awesomer [sic], and I'm also making some personal resolutions to dig deeply in the mobile web, spend a lot of time on interactive design and games, and also make way more time for doodling and drawing.
Another important statement I made back at the beginning of 2009 was that I believe making connections is perhaps the most important thing to be doing. I am genuinely grateful for every single connection I made with so many people over the last year, both new connections and re-connections. 2009 was a banner year in that regard, but staying connected is just as much a 2010 New Year's resolution for me. I look forward to attending more conferences, working with more people, helping people succeed at their passions, and being inspired by the work done by all of you brilliant folks.
Have a great 2010! Oh, and if you are interested, check out the CSS for no-images-used timeline.
My latest project is a little "Web Two-Point-Snow" fun I put together as my personal holiday gift to the internet, or should I say winternet… winternet? Ok, I'll stop. Anyway, the Winternetizer adds festive, fancy, 100% Flash-free flakes of falling snow to any website.
You'll have a much better experience using a browser that Santa has on his Nice List such as Safari, Firefox 3.5+, or Chrome. In fact, in those browsers, I'd go so far as to say the snow looks so real you will find yourself flopping on the ground to make snow angels. Give it a try now before you read about the super cool technical details behind it:
(Incidentally, you can also add the JavaScript directly to your own site to delight your visitors. The Winternetizer project page has details.)
Yes, it is true that falling snow scripts go back probably over a decade. We've all seen it done using falling snowflake GIFs, or falling periods, or the trusty asterisk (which to be fair, is a great six-sided stand-in for an actual flake).
However, if you have a modern browser, you will have noticed that my falling snow script has depth-of-field blurring and parallax, flakes that rotate as they fall, and you lucky Mac users no doubt noticed the pretty actual snowflake graphics. The total effect is accomplished with text, CSS, and JavaScript — no Flash, no PNGs, no GIFs, no Canvas.
Continue Reading Post and 5 Comments…