Blog | CSS3 Looped Animations Recently I was working on the Filmic.eu teaser site. My idea was to create simple transitions purely based on the CSS3 features so the site worked and looked nice without any single line of JS code. One of the challenges I faced was how to create a CSS animation that loops through multiple text elements using fade in and out transitions. Looking at the CSS3 Animations Module specs there are properties useful for creating a CSS animation loop: The animation-iteration-count property can be set to infinite so the animation repeats forever. The animation-direction property when set to alternate allows to play animation cycle iterations that are even counts in a reverse direction. In my case I wanted to animate 3 list elements, showing and hiding one after another. The CSS animation-delay property comes to help. My solution for this problem was to play around with the animation @keyframes rule to emulate the "delay" behaviour by keeping the property value unchanged over some period of time.
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. Expand the number of shapes you can make with a single element All of the shapes above any many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: Show URL's of links in printed web pages Clear floats Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo element to do that for us. Simulate float: center; Label blocks of code with the language it is in
Pure CSS GUI icons (experimental) An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraint Several months ago I was experimenting with the creation of common GUI icons with CSS. Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. Example code The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. The HTML is a basic unordered list of links. <ul><li class="power"><a href="#non">Power</a></li><li class="play"><a href="#non">Play</a></li><li class="stop"><a href="#non">Stop</a></li><li class="pause"><a href="#non">Pause</a></li></ul> Each icon uses its own set of styles.
Ombres avancées avec CSS3 et box-shadow - CSS / CSS3 CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Des pseudo-éléments permettent de construire un élément dans la structure de votre document (DOM) sans vraiment en construire un… ok, ça commence bien pour l’explication. Pseudo-éléments :after et :before Ainsi tous les liens porteurs de l’attribut hreflang se verront agrémentés d’un « (en) », dans le cas d’un lien anglais par exemple :Mon lien (en) Bogues
8 Magical Dynamic and Fluid Layout and How to Make It Introduction Recently, I have been quite interested with a new kind of web layout - dynamic and fluid layout. It cleverly fills in all the spaces and rearranges each items and display it nicely on browsers, and they usually come with slick animation too. Some of them even have advance filtering for different categories. I found 8 websites that share the same characteristics and in the last section of this post, I listed 3 jQuery plugins that help you to achieve the same effect as well. Enjoy! Showcase How to do it!!! Alright, I guess you want to know how to do it. jQuery Masonry A dynamic layout plugin for jQuery. Reorder and filter items with a nice shuffling animation.
CSS1K 5 Cool CSS Hover Effects You Can Copy and Paste Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! Bring Your Boring Site to Life Hover effects can make your site feel much more dynamic and alive. The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. Bump Up Live Demo: Click Here to Launch This works best when you have a series of horizontal items. This one is super easy to implement and there are in fact several ways to go about it. The transition here is completely optional as the effect still works quite well without it. Bump Up CSS Stack & Grow Live Demo: Click Here to Launch For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size. To accomplish this, I inserted a stack of images that were 400px wide by 133px tall.