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:
- 10 Awesome CSS3 Techniques You’ll Want To Start Using
- CSS3 Tutorial: Sleek Card Pockets using CSS Only
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.
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.
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.
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.
The Man from Hollywood
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.
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.
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.
CSS3 Transforms and Font-Face
No, it’s not a poster. It’s a web page completely designed using basic CSS and new CSS3 techniques. Pretty impressive right?
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.
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.
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.
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.