C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Arrondir les angles : comment ça marche

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 2912



Arrondir les angles : comment ça marche

Niveau: Facile | Par: Basil Hawkins | Validé par: Basil Hawkins | En date du: 03/01/2010

Bonjour bonjour ! Smile

Nous allons apprendre aujourd'hui (ça fait très professeur ça dites donc x)) comment arrondir les angles en toute circonstance.
Si vous ne voyez pas de quoi je parle, regardez les exemples ci-dessous:
Spoiler:
 

Vous voyez donc que les angles sont arrondis ; je vais donc vous expliquer comment faire. Tout d'abord, je vais vous décevoir, cela ne marche pas sur IE et il n'y aucun moyen pour que cela marche. (actuellement, je vous rassure)

Voici le code :
Citation :
-moz-border-radius: (un nombre de px)px;
-webkit-border-radius: (un nombre de px)px;

En orange : C'est la petite particule pour que cela marche sur Mozilla Firefox. (d'où le moz)
En bleu : C'est la petite particule pour que cela marche sur d'autres navigateurs. (je ne les connais pas tous, donc je ne pourrais pas les citer)
En vert : La "vraie" partie CSS on va dire ; celle qui indique l'arrondi.

Donc si vous voulez que cela marche avec le plus de personnes possible, à chaque fois vous devrez mettre "-moz" et "-webkit".
Mais pour que ça marche, il faut un code correct ^^'
Donc je vais vous montrer un code et son résultat:

Partie CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Partie HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

    ? Mais on ne voit rien du tout !


Bah oui, puisque vu que nous n'avons pas défini de couleur au fond, c'est le même que celui du forum. Donc cela ne se voit pas Razz

Donc on recommence avec une couleur de fond:

CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
}

HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

    ? Mais c'est pas joli, le texte est collé au bord et on n'a pas de bordure ...


Patience, patience. Bah voui, c'est ce qu'on va faire maintenant Smile
Donc hop, une petite bordure rouge en tirets avec un écart des lettres par rapport au bord:

CSS:
Code:
.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

HTML:
Code:
<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

Bref on s'éloigne on s'éloigne, le but de ce tutoriel n'est pas de vous faire encadrer votre texte mais de maîtriser l'arrondissement des bordures. M'enfin on devait quand même passer par là puisque ça a son effet dessus ^^'

Donc voilà, vous savez tout sur l'arrondissement des bordures (enfin ce que je sais dessus en tout cas).

Je vous rappelle que -moz et -webkit vont par paires, et que cela ne marche malheureusement pas sur IE.

En espérant que ce tutoriel vous ait été utile, Smile
Basil Hawkins.


Hommes du grand monde,
Votre honneur viril ne sera prouvé que par une aide dûment méritée !
Aidez-nous à montrer notre supériorité naturelle sur la vile gente féminine !
♣ Hommes vs. Femmes ♣
MessageSujet: Arrondir les angles : comment ça marche   Ven 01 Jan 2010, 16:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
Hello, j'ai fais exactement ce que vous avez fait au tuto mais rien ne marche sur mon forum

R
C'est parce que vous utilisez Internet Explorer et les arrondis ne s'affichent pas sous IE.


Q
J'aimerais savoir pourquoi la couleur de fond s'étend sur toute la page et non simplement autour de mon texte, comme dans le tuto ? Voici mon code :
Code:
<div style="color: #a86400; font-variant: small-caps; font-weight: bold; background-color: #ffc8d0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px #FF0000; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px;text-align: center">Nyan</div>

R
R : Car tu utilises une div. Si tu veux simplement que ça s'étende à ton texte, remplace les div par des span. Tu peux lire le tuto ici : http://www.css-actif.com/bases-css-html-f48/html-cours-4-les-differentes-balises-utilisees-frequemment-t5615.htm#45223 . Tu peux aussi intégrer la valeur width pour gérer la largeur.


Q
Est-ce que cela fonctionne sous Google Chrome ?

R
Le code marche effectivement bien sur Google Chrome, puisque Basil utilise également le code -webkit-border-radius, qui fait afficher les arrondis sur Safari et Google Chrome, notamment


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Arrondir les angles : comment ça marche   Jeu 04 Aoû 2011, 05:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.mavectragts.fr
avatar
{ Membre }
{ Membre }

Masculin Messages : 6



On peut meme definir plusieur valeur d'angle :

Par exemple :

border-radius : 10px 4px 3px 15px;

Donc 10 en haut a gauche, 4 en haut a droite, 3 en bas a droite et 15 en bas a gauche
MessageSujet: Re: Arrondir les angles : comment ça marche   Lun 22 Oct 2012, 07:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.infographizm.com
avatar
{ Membre }
{ Membre }

Masculin Messages : 49



Je me permets quelques précisions :

-webkit-, -moz- (et les autres possibles) sont des préfixes qui concernent l'intégration d'une propriété encore non-terminée. Dans le cas de border-radius, la propriété finale est intégrée depuis longtemps et les versions récentes ne prennent plus en compte les propriétés préfixées (Firefox par exemple, ne prend plus en compte -moz-border-radius depuis sa version 14).

Donc, il vaut mieux mettre simplement border-radius. Et dans tous les cas, pour une propriété préfixée encore d'actualité, il faut toujours mettre la propriété finale par la suite.

À noter à propos de border radius qu'on peut également définir l'arrondi d'un angle depuis ses deux côtés de cette manière :
Code:
element { border-radius: 20px/5px }

Citation :
C'est parce que vous utilisez Internet Explorer et les arrondis ne s'affichent pas sous IE.
C'est faux, Internet Explorer accepte la propriété finale border-radius depuis IE9 (deux ans). Il faut bien sûr penser à mettre la propriété finale pour cela, et retirer la balise meta "X-UA compatible" de votre Template overall_header qui force l'affichage d'IE en rendu rétrocompatible IE8 (si besoin, j'expliquerais ça en détails).


Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
MessageSujet: Re: Arrondir les angles : comment ça marche   Lun 28 Jan 2013, 13:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



Aaaaah ça fait plaisir à entendre Smile

Rien à redire sur les remarques que tu viens de faire qui sont plus que pertinentes.
Le tutoriel date de 2010 et n'a pas encore été repris. Pour information nous remettons l'ensemble des codes et tutoriels du forum au goût du jour depuis cet été, tâche longue et laborieuse qui avance à son rythme. Il va de soi que tes remarques seront prises en compte (et créditées pour le coup) lors de la refonte de ce tutoriel.

En attendant on fait avec mais, encore une fois, merci de ces précisions (notamment le border-radius et ses préfixe contre lesquels je suis parti en croisade depuis le début de l'année de manière résolue Smile).


MessageSujet: Re: Arrondir les angles : comment ça marche   Lun 28 Jan 2013, 14:34
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Arrondir les angles : comment ça marche   
Revenir en haut Aller en bas
 

Arrondir les angles : comment ça marche

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Arrondir les angles : comment ça marche
» Arrondir les angles d'un tableau
» Arrondir les angles de la messagerie privée [Pas de solution trouvée]
» Est til possible d'arrondir les angles de ces fenêtres
» Arrondir les angles de son forum ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit