BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Faire un rond (image, bouton lien...)
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Faire un rond (image, bouton lien...)

 Répondre Répondre Page  12>
Auteur
Message
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Faire un rond (image, bouton lien...)
    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"
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 11:28
jolie Nico Clap

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 !
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 11:34
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"
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 11:40
Super! Il fallait y penser!
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 12:24
Moi j'aime beaucoup le dernier bouton moche!
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 14:17
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"
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 14:24
tu t'ais lâché dans les transitions Nico Tongue
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 15:14
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"
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 16:13
un simple effet de transition remplit déjà 90% des demandes je pense.
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Juil 2015 à 17:58
Clap Il n'y à plus qu'A, Wink avec tous ces modèles sur ce forum comment résister  Beer
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 !!!
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.