Code

Un petit effet CSS sympa pour donner facilement du cachet à un titre. Un simple double shadow, dont la couleur du premier - #3ea7bd dans l'exemple ci-dessous - doit être assorti à celle du fond.

Le CSS

font-family : 'Montserrat', sans-serif;
font-size : 60px;
letter-spacing : 12px;
text-transform : uppercase;
color : #f9f9f9;

text-shadow : 3px 3px 0px #3ea7bd, 5px 5px 0px #f9f9f9;

Code

Faire pivoter une image à 360° lors du survol du curseur :

CSS

.image {

width : 100px;
height : 100px;

-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
}

.image:hover {

-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
-ms-transform : rotate(360deg);
transform : rotate(360deg);
-webkit-transform-style : preserve-3d;
-webkit-backface-visibility : hidden;
}

HTML

<div class="logo"><img src="image.png" width="100" height="100" alt=""></div>

Code

Un petit menu vertical qui utilise les propriétés de CSS3 pour se déployer progressivement au survol du curseur.

Lire la suite de Un menu vertical avec CSS3

Code

Faire de jolis boutons réactifs au survol de la souris, sans aucune image et multi-navigateurs, simplement avec CSS.

Lire la suite de De jolis boutons en CSS

CSS

Forcer le retour à la ligne automatique dans une zone préformatée, c'est possible avec cette petite syntaxe CSS :

pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
}

Source longren.org via bbxdesign.