background preloader

Effets CSS3

Facebook Twitter

Les dégradés CSS. Chris Coyier a mis à jour ses articles d'introduction aux dégradés CSS, linéaires, radiaux, répétés, une bonne occasion de réviser ses classiques en compagnie d'un guide toujours clair et concis.

Les dégradés CSS

Par Chris Coyier En CSS, vous pouvez choisir de déclarer le background d'un élément comme une couleur solide, ou comme un dégradé. L'utilisation de dégradés CSS à la place d'images est préférable en termes de contrôle et de performance. CSS3 – Des effets avancés de survol d’image. Aujourd’hui, je vais mettre à votre disposition une série de code vous permettant de créer des effets pour vos images lorsque celle-ci sont soumises au survol de la souris.

CSS3 – Des effets avancés de survol d’image

Nous utiliserons des lignes fines, beaucoup d’espace blanc, une typographie propre et des effets subtils. Je ne vous cache rien, ces éléments ne sont pas de moi mais simplement rencontré au détour de mes déambulations sur la toile. Dans l’esprit de ce site, je les met donc en « mémoire » en vous en faisant profiter et simplifie l’ensemble pour que vous puissiez les utiliser à votre tour, vous retrouverez les liens sources ci-dessous. Ces réalisations sont Full HTML5 et CSS3, aucun JavaScript n’est utilisé: vous pourrez les intégrer très facilement dans la majorité des éditeurs en ligne de sites dès lors que ceux-ci vous offre la possibilité d’insérer ce type de code. La propriété border-image en CSS3. Par Estelle Weyl Bien que ce ne soit pas vraiment une nouveauté pour les navigateurs, la propriété border-image est désormais disponible dans la spécification CSS3. border-image (littéralement : image de contour, NdT) offre une méthode pour ajouter des contours décoratifs à n’importe quel élément.

La propriété border-image en CSS3

Avec les propriétés de border-image, vous pouvez créer des contours décoratifs pour des éléments qui vont bien au-delà des simples coins arrondis, avec des images très légères ou même avec des dégradés. La propriété border-image vous permet de prendre une petite image, de la découper virtuellement en neuf tronçons, et de disposer ou d’étirer les morceaux de votre petite image au sein d’un autre élément beaucoup plus grand. Vous pouvez prendre une image et l’étirer sur toute la largeur d’un bouton ou d’une page entière. Dans ce second exemple, au lieu d’étirer le milieu de l’image de contour, nous l’avons répété.

Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS. Transit : gérer ses animations CSS3 avec jQuery. Creating a Collection of CSS3 Animated Pre-loaders. Pre-loaders are a common sight in modern web design.

Creating a Collection of CSS3 Animated Pre-loaders

As users we expect the web to be fast and fluid - we don’t like waiting for things. 8 simple CSS3 transitions that will wow your users. CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement.

8 simple CSS3 transitions that will wow your users

Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. What’s more, these effects are hardware accelerated, and a progressive enhancement that you can use right now. Here are 8 really simple effects that will add life to your UI and smiles to your users’ faces. All of these effects (bar one) are controlled with the transition property. So we can see these effects working, we’ll set up a div in an HTML page: Hover avec transitions - Réaliser un effet de hover progressif avec les transitions en CSS3. Création d’un hover progressif Un hover progressif ?

Hover avec transitions - Réaliser un effet de hover progressif avec les transitions en CSS3

Je n’ai pas trouvé mieux pour expliquer cet effet pourtant si simple. Plutôt que de gérer un hover ON/OFF, ici le :hover s’applique progressivement, plus précisément, il disparait progressivement. On peut aussi parler de hover temporisé. De plus, l’effet de transition progressive est appliqué sur un dégradé. Puis, sur chaque lien est appliqué un fond de couleur (gris) et lors du :hover, on fait disparaitre ce fond avec les transitions. Obtenez plus d’infos sur l’utilisation des dégradés. Les coins arrondis. Animez votre site avec CSS3 ! L'intérêt des transitions CSS est de s'affranchir de JavaScript pour dynamiser nos pages Web.

Animez votre site avec CSS3 !

Cependant, il peut s'avérer nécessaire d'utiliser ce langage pour effectuer certaines manipulations. Par exemple, comment indiquer au navigateur qu'il doit lancer la transition de tel élément lorsque l'on clique sur tel bouton ? Transitions CSS3. Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript.

Transitions CSS3

Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript. Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS.

Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript

Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. 18 Transitions And Animations Effects Tutorials With CSS3. 12 Free And Amazing CSS3 Image Hover Effects For Downloads. 20 Must See HTML5 And CSS3 Tutorials. 16 Ridiculously Impressive CSS3 & HTML5 Experiments.