Faire un rond (image, bouton lien...) |
Répondre | Page 12> |
Auteur |
Sujet Recherche Options des sujets
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(1)
Envoyé : 04 Juil 2015 à 11:08 |
Tuto pour faire des boutons ronds (mêmes principes pour des images ou du texte)
Avantage : - pas besoin de réaliser sur un logiciel photo une image d'un rond : allège le poids de la page - se modifie vite (pas besoin de repasser par un logiciel pour changer la couleur) 0. Glisser déposer un : Bouton lien (ou texte simple/lien texte) 1. cliquer sur l'élément (mettre du texte si besoin) 2. mettre une couleur d'arrière plan 3. mettre une largeur et hauteur identique pour obtenir un carré (exemple : 100px) 3.1 centrer le texte horizontalement. 3.2 Pour centrer verticalement : style --> texte --> hauteur ligne --> entrer une hauteur pour faire descendre le texte (ici 100px) 3.2 bis : S'il y a plusieurs lignes dans le bouton: style ---> zone de texte (pas cadre principal) --> marge intérieure haut --> entrer une valeur (exemple : 50px) Ne pas oublier de rester sur Cadre Pincipal ensuite 4. aller dans style --> verifier qu'on est dans cadre principal --> dans arrondi de bordure (tout en bas) mettre 50% à tous les côtés (bord droit, gauche, haut, bas) : vous avez votre rond. vous aurez remarqué qu'on peut faire d'autres formes ----- Personnalisation ------ Bordure : vous pouvez enlever la bordure par défaut : clic sur l'élélement : tout en haut --> bordure --> style --> Invisible Vous pouvez ajouter des bordures Ombre interne : 1. élément --> glisser/déposer : Bloc de code source -> dans le bloc de code Source copier coller : .rond{ -webkit-box-shadow: inset 10px 10px 20px 0px rgba(0,0,0,0.5); -moz-box-shadow: inset 10px 10px 20px 0px rgba(0,0,0,0.5); -o-box-shadow: inset 10px 10px 20px 0px rgba(0,0,0,0.5); -ms-box-shadow: inset 10px 10px 20px 0px rgba(0,0,0,0.5); box-shadow: inset 10px 10px 20px 0px rgba(0,0,0,0.5); } 2. clic sur le bouton rond --> Propriété --> Expert : Class perso : écrire "rond" Ensuite on peut facilement faire pivoter cette ombre, changer sa couleur, son opacité PS : au lieu d'utiliser un bloc de code on peut le faire directement sur OE mais l'ombre sera plus opaque : OE ne gère pas encore le rgba alors que dans le bloc de code l'opacité est réduite, et avec le code on peut mettre plusieurs ombres internes[1]) : clic sur l'élément --> style --> ombre --> mettre par exemple : couleur : choisir décalage x : 10px décalage y : 10px diffusion max : 10px diffusion min : 0px type : intérieure [1] c'est moche mais c'est pour etre plus clair : voilà des exemples (très laids mais c'est pour se rendre compte) Element Image de OE : 1. les bordure (50%) sont à mettre dans Contenu et non Cadre principal 2. mettre dans Contenu : dépassement = masquer 3. Mettre class perso "rond" dans Contenu et pas dans cadre principal Edité par nico38 - 04 Juil 2015 à 15:09 |
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
jolie Nico
Applicable aussi si l'on veut faire un bouton pour un menu, en se servant aussi de la fonction hover pour générer des effets différents au passage de la souris. Au top !
|
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
oui j'ai pris exemple d'un bouton lien parce que ça peut être utiliser pour un menu
Après oui avec un survol de souris on peut faire un paquet d'effet
|
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
Super! Il fallait y penser!
|
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Moi j'aime beaucoup le dernier bouton moche!
|
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
j'ai mis des petits exemples pour donner des idées de formes et d'effets
|
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
tu t'ais lâché dans les transitions Nico
|
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(0)
|
oui, après, trop de transition, tue la transition.
|
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
un simple effet de transition remplit déjà 90% des demandes je pense.
|
|
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
Options des messages
Thanks(0)
|
Il n'y à plus qu'A, avec tous ces modèles sur ce forum comment résister
|
|
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
|
|
Répondre | Page 12> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |