Faire des coins arrondis en CSS - Rappels sur les CSS
Ceux qui ont de bonnes notions de HTML et CSS peuvent passer directement à la Partie 2. La partie 1 comporte des explications sur les nouveaux standards HTML5 et CSS3 ainsi qu’un rappel sur l’utilisation des feuilles de style que je me suis permise de faire car je n’ai pas trouvé de tutoriel détaillant le langage CSS.
Partie 1 : Standards. Comment utiliser une feuille CSS.Avec l’arrivée du nouveau standard CSS3, de nouvelles fonctionnalités «méga bien» sont apparues. Les coins arrondis par exemple. Au temps des CSS2, il fallait créer 4 images pour les 4 coins et les disposer dans les blocs. Tout ça c’est fini. En quelques lignes de code, vous aurez des blocs à jolis coins. Bientôt une seule ligne suffira.
Internet Explorer (que j’appellerai IE dans la suite) ne prend pas encore bien en charge cette option, mais le problème est résolu en le mettant à jour (il me semble que la dernière version - 10 - commence à mieux gérer les CSS3). Pour inciter les utilisateurs à passer à Chrome ou Mozilla, vous pouvez préciser dans les petites lignes en bas de votre site :
«Site optimisé pour Mozilla Firefox et Google Chrome» par exemple.
Si votre site est bien codé, vous avez un certain nombre de pages html (ou php suivant ce dont vous avez besoin) et vos feuilles de styles CSS à part qui sont correctement liées dans les pages HTML. Pour ceux qui ne connaissent pas, je fais un petit rappel.
Votre page HTML :
- Code:
-
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="fr" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="fr" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="fr" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="fr" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr" class="no-js"> <!--<![endif]-->
<head>
<title>Nom de votre site</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Le corps de votre page.
</body>
</html>
La première partie, c’est le Doctype. Si vous ne le reconnaissez pas, c’est normal, c’est la dernière version qui tient compte du nouveau standard HTML5. Je vous recommande vivement de l’utiliser, car si vous développez en testant sous Chrome (par exemple), vous avez en général des différences quand vous testez votre site sous IE. Ce Doctype gère la plupart de ces problèmes et fait gagner un temps considérable en déboggage IE (les développeurs savent de quoi je parle).
Bien. Dans le head, vous avez une balise link. C’est là que vous liez votre feuille CSS, href étant le chemin de votre fichier (si votre feuille de style est dans un dossier. Maintenant que vous savez où écrire votre code CSS, allons voir comment faire nos fameux coins.
Partie 2: Les coins arrondis (enfin !)Juste avant (et c’est pas pour vous embêter), on va faire un tout petit bout de HTML. Je vais vous expliquer (pour ceux qui ne connaissent pas encore bien les CSS) comment choisir à quel bloc de code, mes CSS vont s’appliquer.
Si je veux que mon code ne s’applique qu’à un seul bloc, je vais utiliser l’attribut ‘id’. Pour l’appliquer à plusieurs blocs, j’utilise ‘class’. Un petit exemple :
- Code:
-
<div id="monbloc">
</div>
<div class="mesblocs">
</div>
<div class="mesblocs">
</div>
J’ai fais mon exemple avec la balise div, mais ça marche pareil avec n’importe quel balise (p, span ...).
Maintenant qu’on a défini à quel(s) bloc(s), mon code CSS allait s’appliquer, on peut aller l’écrire.
Si j’ai utilisé un id, je désigne mon bloc ainsi : #monbloc.
Si j’ai utilisé une class, je désigne ma zone ainsi: .mesblocs.
Allez maintenant, le code tant attendu (je considère que j’ai utilisé class, vous remarquerez en temps que lecteur attentif) ^^
- Code:
-
.mesblocs{
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
-o-border-radius : 5px;
}
La première ligne correspond à IE et bientôt (on l’espère), ce sera la seule ligne nécessaire. La deuxième applique le code dans Mozilla Firefox, la troisième dans Google Chrome et Safari (qui sont tous deux codés sur la même base : webkit) et la dernière dans Opéra. C’est logique, il faut juste s’en souvenir (ou revenir lire ce tuto).
Le degré d’arrondi est déterminé en pixels, comme vous l’aurez noté. Pour obtenir l’angle qui vous convient, je vous conseille de faire des tests. Si vous précisez une unique valeur (comme dans mon exemple) ce sera pour les quatre coins.
Avec quatre valeurs, vous déterminez les degrés d’arrondis un par un, en partant du coin en haut à gauche. Cela permet par exemple d’avoir des angles arrondis dans deux coins opposés seulement. Il existe également des variantes du genre -webkit-border-bottom-left-radius mais elles n’existent pas pour tous les navigateurs et sont un peu longues à écrire (pour ceux qui n’utilisent pas de logiciels à auto-complétion). Je pourrais faire un tuto sur les logiciels aussi s’il y a des intéressé(e)s...
Pour finir, je vais vous montrer un peu ce que ça peut donner. Je vous déconseille de regarder à mon code de l’exemple qui suit, car étant dans un forum, je dois coder le style DANS les blocs (dans le html), ce qui est à proscrire quand on développe un site.
MODE D'EMPLOI
N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur
-----------------------------------------
Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques
Bonne journée
Accueil Le site Chaine You Tube 
Sujet: [Apprenti] Les CSS. Coins arrondis en CSS3 
