Dans ce dossier je vais vous présenter tout un tas de fonctions CSS3 super pratiques que vous pourrez utiliser dans vos créations. Vous pouvez aussi regarder mes précédents tutos pour adapter votre site aux mobiles , et pour faire pivoter des objets .
Lançons nous dans le grand bain du web design avec ces 5 fonctions :
- Cadres avec coins arrondis : pour transformer des images carrées en rond ou créer des boutons sympathiques :
.example {border-radius: 20px;}
- Une ombre portée sur un texte : donnez du caché à vos titres avec cet effet super sympa :
.h2{text-shadow: #999 3px 3px 6px;}
- Donnez de la transparence a un objet : si vous souhaitez que votre image soit plus transparente, utilisez cette fonction :
.example_img{opacity: 0.7; }
- Un fond en dégradé : deux couleurs de fond en vue, ne cherchez plus utilisez un dégradé :
.example{background-image: linear-gradient(#c3c3c3, #cccccc, #cfcfcf);}
- Une image en fond ? Pas de soucis il vous suffit d’utiliser ce code en choisissant bien si il se répète et sa position :
.example{background: URL(img-bg.jpg) no-repeat top right;}
Voilà c’est tout pour cette première partie, si vous avez des questions c’est dans les commentaires que ça se passe et je vous donne rendez vous à la deuxième partie de ce dossier.