Layer Motion Slideshow
In Playground, by Manoela Ilic
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
typography
SVG Filter Effects: Outline Text with <feMorphology>
In Articles, by Sara Soueidan
In this second part of our SVG Filter series you’ll learn all about the feMorphology filter, how it works and how you can use it to create interesting effects.
Scrolling Letters Animation
In Playground, by Manoela Ilic
A switching title effect where a fixed text element changes with an animation depending on the scroll position.
Decorative Letter Animations
In Playground, by Manoela Ilic
Some decorative shape and letter animations based on the Dribbble shot “Us By Night” by Animography.
Letter Effects and Interaction Ideas (Part 2)
In Playground, by Manoela Ilic
A new set of letter effects and animations for playful typography interactions.
Letter Effects and Interaction Ideas
In Playground, by Manoela Ilic
A couple of ideas for typography animations and letter (hover) effects for playful interactions.
Inspiration for Letter Effects
In Playground, by Manoela Ilic
A set of inspirational letter animations for display typography effects powered by anime.js.
Fancy SVG Letter Animation
In Playground, by Manoela Ilic
An experimental SVG letter animation based on the Dribbble shot “Shading Letters in Illustrator” by Jake Bartlett. Powered by Julian Garnier’s anime.js.
Creative SVG Letter Animations
In Playground, by Luis Goncalves
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.
Inspiration for Text Styles and Hover Effects
In Playground, by Manoela Ilic
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
How to Create (Animated) Text Fills
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
Techniques for Creating Textured Text
In Tutorials, by Sara Soueidan
In this article we’ll explore all the current techniques for creating image or texture filled text and show you how to apply them.
Techniques for Responsive Typography
In Articles, by Sara Soueidan
When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive.
Animated Opening Type
In Tutorials, by Diego Pardo
A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.
Text Opening Sequence with CSS Animations
In Playground, by Manoela Ilic
A simple and fun text opening sequence effect with blurry letters using CSS animations.
A Creative Year: Distinctive Web Designs of 2012
In Articles, by Manoela Ilic
An inspirational collection of the most impressive and distinctive web designs from the year 2012.
Mobile Design Typography is Vitally Important … and Challenging
In Articles, by Carrie Cousins
One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.
Heading Set Styling with CSS
In Tutorials, by Kitty Giraudel
In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right combinations of colors, fonts and decoration.
