background preloader

Fluid CSS3 Slideshow with Parallax Effect

Fluid CSS3 Slideshow with Parallax Effect
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%. Related:  CWR HTML5 CSS

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit. Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ? Les propriétés CSS3 utilisées ici sont les suivantes : border-radius pour les bords arrondisbox-shadow pour les ombres des blocscontent pour rajouter du contenu au HTMLgradient pour les dégradés des blocsrgba pour avoir des fonds transparentstext-shadow pour les ombres du texte J’utilise aussi les pseudo-classes CSS3 suivantes : :after pour rajouter du texte HTML à la suite d’un élément:last-child pour sélectionner le dernier enfant d’un élément:target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML. Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).

Experimental CSS3 Animations for Image Transitions « Previous Demo: Item Blur Effect Images by Joanna Kustra Back to the Codrops Article next A Pure CSS3 Cycling Slideshow Advertisement Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. Sections of This Article To get a solid sense of the process from beginning to end, below is an outline of the article. Screenshot of the pure CSS3 cycling slideshow. 1. To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. Basic Concepts of CSS3 Transitions Normally when you change a CSS value, the change is instant. We can use four transition properties: At the moment, CSS3 transitions are supported in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ and IE 10. The W3C has a list of all “Animatable Properties.”

CSS3 Solutions for Internet Explorer Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). The Demonstration This is the same element without the opacity settings. The Drawbacks Rounded Corners (border-radius)

CSS3 – Effet 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. <!

CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? 15 Excelentes Generadores de HTML5 y CSS3 | Pep Farin Blog HTML5 y CSS3 son los mejores lenguajes para comenzar con el aprendizaje en diseño web, yo siempre he pensado que una de las mejores maneras de empezar a aprender es trastear y manipular el código. Aquí es donde entran generadores de codigo para empezar con este paso. Con los generadores obtenemos fácilmente la manera de generar algo de código, jugar con él y aprender Y no sólo eso, son increíblemente útiles para un desarrollador o diseñador porque a veces nos damos cuenta de que repetimos las cosas una y otra vez. Bueno, los generadores te dan la ventaja de hacer esas pequeñas rutinas cada vez que las necesites. La mayor parte de esta lista se va a centrar en generadores CSS3, simplemente porque están mucho mas solicitados que los generadores de HTML5, vamos a saber por qué.Nota: click en las imágenes para acceder a la página web del generador. Generadores CSS3 Generadores Generales En esta sección me centraré en los generadores que se ocupan de las necesidades de amplio espectro y usos.

CSS3 Structural Pseudo-class Expressions Explained You probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression. The keywords and the integer are pretty straightforward. The expressions, on the other hand, are a little more complicated, but not too bad once you mess around with them a little. Expression Syntax The basic syntax for a pseudo-class expression looks like this: li:nth-child(an+b) { /* styles here */ } Except for the “n”, the above is not valid, but serves to illustrate the expression in algebraic-like notation. What is the “b” part? What is the “a” part? What is the “n” part? Some Real Examples Below are some legitimate examples using different pseudo-classes. Expression: 4n+2 ↑ Selects the 2nd list item, and every 4th list item after that.

CSS3 Responsive Slider / Carousel Using Radio Buttons Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.

Tutos 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. 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 The structure of all these buttons needs just one anchor tag for it to work, since we will be creating the other elements with the ::before pseudo-class. Example 1 I think this is the easiest one, with a very regular CSS. First of all, we will give the general style of the button, including its active state. Then, we create the gray container using the ::before pseudo-element. Example 2

Creando un efecto Parallax con jQuery, HTML5 y CSS3 Hace poco publicamos un tutorial de un efecto "Parallax" con CSS3 (realizado por el buen Edgar Parada). Como ya sabemos, en desarrollo y diseño web, un mismo resultado (independientemente de lo que estemos haciendo) lo podemos obtener de muchas formas diferentes, por lo que en esta ocasión haremos un pequeño tutorial de Parallax pero ahora hecho con jQuery, HTML y CSS. Haz scroll con la barra para ver el efecto Básicamente y para los que no lo tienen tan claro, Parallax (hablando de videojuegos, sitios web y gráficos en computadora) es el efecto visual que se crea al desplazar varios planos de una composición a velocidades o intervalos distintos creando la sensación de profundidad. Es un recurso muy utilizado sobre todo en juegos de video, ya sea de plataformas tipo Playstation o Xbox hasta en juegos sencillos hechos en Flash para computadora o dispositivos móviles. En nuestro documento HTML importaremos la librería de jQuery: $(function() { $.fn.parallax = function(options){ "start": 0,

21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). 2. CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. 4. 5. 6. 7. CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. 8. 9.

Overthrow A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. Disable Overthrow What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. But wait - many browsers actually support overflow very well! What is Overthrow? Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! A few example pages The examples directory has some sample responsive layouts that use overthrow. That's about it. Here's some extra demo content to scroll through... Example Embedded Overthrow Block Form elements

Related:  web design