Experimental CSS3 Animations for Image Transitions
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only. View demo Download source Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. The images used in the demo are by Joanna Kustra. Please note that the 3D effects will only work in Webkit browsers. How it works Given a set of images, we’ll add the first image to the wrapper with the class te-cover. The main idea is to always show the regarding image using te-cover. Demos Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image. We hope you like our little experiment and find it inspiring and useful!
CSS Buttons with Pseudo-elements
In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. View demo Download source Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. The font used is ‘Open Sans’ by Steve Matteson. Disclaimer:I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files. I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Markup Example 1 I think this is the easiest one, with a very regular CSS. Then, we create the gray container using the ::before pseudo-element. Example 2
CSS3 Lightbox
Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos
Rotating Words with CSS Animations
Using CSS Animations we will change or rotate some parts of a sentence. View demo Download source In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start! In the following, we’ll be going through demo 2. The Markup We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. The CSS3 First, we will style the main wrapper and center it on the page: We’ll add some text shadow to all the elements in the heading: And add some specific text styling to the spans: The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow: Now, we’ll run two animations. And that’s it folks! Demos
Related:
Related: