communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Apprenti] Les CSS. Coins arrondis en CSS3

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Poseur d'avant-garde
avatar
Illendel
Poseur d'avant-garde
Féminin Date d'inscription : 16/10/2009
Age : 28
Localisation : Lyon

MessageSujet: [Apprenti] Les CSS. Coins arrondis en CSS3   Mar 26 Juil 2011, 11:26


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



Dernière édition par Fuyaya le Sam 11 Jan 2014, 22:44, édité 5 fois (Raison : édition titre)
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Camelya
Grand artiste du pinceau
Féminin Date d'inscription : 06/05/2011
Age : 27
Localisation : Dans mon lit.

MessageSujet: Re: [Apprenti] Les CSS. Coins arrondis en CSS3   Jeu 18 Aoû 2011, 18:46

Merci pour le tuto Ill' Wink
Revenir en haut Aller en bas
http://legrenierdetatacamy.jimdo.com/
Grand artiste du pinceau
avatar
tchoutchou7
Grand artiste du pinceau
Masculin Date d'inscription : 27/09/2009
Age : 27
Localisation : Canada

MessageSujet: Re: [Apprenti] Les CSS. Coins arrondis en CSS3   Dim 25 Sep 2011, 21:46

Oh je ne t'ai même pas remercié ! Shocked
Eh bien merci beaucoup Illou pour ton tuto ! cheers

Je voulais juste te signaler que Firefox 6.0.2 (la version que j'ai actuellement) comprend le simple border-radius ! J'ai découvert ça juste à l'instante grâce à Cynimich !
Revenir en haut Aller en bas
http://changementdetrain.wordpress.com
Ange gardien
avatar
idjya
Ange gardien
Féminin Date d'inscription : 05/10/2009
Age : 39
Localisation : Cholet

MessageSujet: Re: [Apprenti] Les CSS. Coins arrondis en CSS3   Lun 26 Sep 2011, 09:00

J'ai loupé ce tuto?...

Merci pour ce tuto miss! Wink
Revenir en haut Aller en bas
http://idjya.eklablog.com
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 21
Localisation : Nord (59)

MessageSujet: Re: [Apprenti] Les CSS. Coins arrondis en CSS3   Jeu 28 Juin 2012, 18:58

Merci pour le tuto. Smile
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Contenu sponsorisé


MessageSujet: Re: [Apprenti] Les CSS. Coins arrondis en CSS3   

Revenir en haut Aller en bas
 
[Apprenti] Les CSS. Coins arrondis en CSS3
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» HOSPITTLER - Apprenti Chapelain (F - N)
» Un apprenti panda...
» [ABANDON] Un jeune apprenti .
» l'apprenti sorcier
» MTG : Le film ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: