Way Cool CSS3 Typography Experiments

AD

CSS3 opens up new avenues for design and creativity on the web, with the ability to better control the display of content through the browser.  One of the major areas of improvement in CSS3 are new methods that can be applied to text and typography to create unique results.

We’ve gathered up some way cool CSS3 typography experiments for you to check out, and hopefully inspire you when using CSS3 in your own projects.

If you need to know more about CSS3, check out some of our other posts:

Enjoy!

CSS3 Typography Poster

Another experiment in CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa, and maybe some more stuff. It’s not particularly clean HTML either; don’t look too closely at the markup rendering the robot. No images were used or harmed in the making of this thing.

css 1 500x643CSS3 Typography Experiments” width=”500″ height=”643″ />


CSS3 Tilt Shift Text

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3.

Once again text-shadow was my best friend. By adding a bigger offset-y and blur-radius to the top and bottom edge, the text appears to have a lens blur that is typical for tilt-shift effects. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image.


css 2CSS3 Typography Experiments” width=”500″ height=”420″ />


Subtle CSS3 Typography You’d Swear Was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.

css 3 500x113


Curtis CSS Typeface

Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning.

css 4 500x313


The Man from Hollywood

The Man From Hollywood is a Kinetic Type experiment that makes use of Advanced CSS selectors and Webkit CSS properties*. The idea is based off of kinetic type videos that are usually created using After Effects, Flash, or other animation tools. Javascript is used, but minimally, really just to turn class names on and off. All of the animations are accomplished using CSS.

css 5 500x272


CSS3 Glass Text Effect

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra <p> tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.

css 6


Stereoscopic 3D Effect with CSS3

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

css 7


I Love Typography Experiment

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new modern browser bugs and inconsistencies were exposed.

css 8


CSS3 Transforms and Font-Face

No, it’s not a poster. It’s a web page completely designed using basic CSS and new CSS3 tech­niques. Pretty impressive right?

css 8


CSS3 Background Clip and Font Face

That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this.

css 10


CSS3 Transform Experiment

Transform is a pretty exciting feature that’s been implemented in CSS 3. So why haven’t we used more of it in our designs? When I made the switch to web design the thing I missed most was the ability to angle text.

css 11


Create a Vibrant Digital Poster with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

css 12


Flashlight

FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.

css 13

Advertisement
12 Responses to “Way Cool CSS3 Typography Experiments”
  1. Hunter October 24, 2010
  2. Reece October 24, 2010
  3. Héctor October 25, 2010
  4. Brian Pinkney October 25, 2010
  5. Marc October 25, 2010
  6. Christopher Johnson October 25, 2010
  7. JS October 25, 2010
    • Siteoptimo October 31, 2010
  8. Elliot Forde October 26, 2010
  9. elinix October 28, 2010
  10. Dzinepress October 28, 2010
  11. Niall February 12, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *