Parallaxe (sans JavaScript)
Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
Fullscreen Background Image Slideshow with CSS3
Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. View demo Download source Happy new year, everybody! The images are by Mark Sebastian and they are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License. Note that this will only work in browsers supporting CSS animations. This tutorial is a part of our latest CSS3 experiments; you can find more of those here: The Markup We’ll use an unordered list for the slideshow and we’ll add a span for each image and a division with a heading: <ul class="cb-slideshow"><li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li><li></li><li></li></ul> The spans are going to be the elements that will have the background images of the slideshow. The CSS Let’s style the unordered list first. The animation for each span will last 36 seconds and run an inifinite number of times. Demos
Sliding Image Panels with CSS3
Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup Let’s style this baby. The CSS Let’s prettify the label by adding a little circle. And that’s it!
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 Create
Custom Scrollbars in WebKit
Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that. These days, customizing scrollbars is back, but it's WebKit this time. The Goods The Different Pieces These are the pseudo elements themselves. The Different States These are the pseudo class selectors. :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive I'm going to steal this whole section from David's blog post on the WebKit blog because it explains each part well: :horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. All together now These pseudo elements and pseudo class selectors work together. Very Simple Example To make a really simple custom scrollbar we could do this: In The Wild View Demo Related Share this:
Understanding the CSS Clip Property
Learn about the underused and often misunderstood CSS clip property and understand how to apply it for some nifty effects. Hi guys! First of all let me wish a belated happy new year to all of you. I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. The clip property aims at defining what portion of an element you want to show. Syntax Let’s get started straight away with the syntax of the clip property which is not only a little bit weird but also probably difficult to understand at first glance. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. To be honest, I don’t really know why it is like that. As I said on Twitter a few days ago — and as you might think — this is a huge downside to the clip property. However, it still might be interesting to experiment with the clip property and to find some cool use cases. The rect() function Demos Note.
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!
