-
Je suis censée être en train d'étudier mais je n'y arrive pas alors autant écrire un article !
1 commentaire -
Code à mettre dans la partie CSS.
Ce code permet de changer l'opacité d'un ou plusieurs bords.
Div sera à remplacer par votre sélecteur.
Le X indique la taille de vos bordures.
Les couleurs se font ici grâce au code RGBA que vous pouvez trouver facilement sur Internet. Les 3 premiers chiffres (en rouge) servent pour la couleur. Ils vont de 0 à 255. Le quatrième chiffre (en violet) permet d'indiquer l'opacité allant de 0.0 à 1.
"border-top" concerne la bordure du haut, "border-right" pour la bordure droite, "border-bottom" pour la bordure du bas et enfin, "border-left" pour la bordure à gauche.
div {
border-top: Xpx solid rgba(255, 0, 0, .5);
border-right: Xpx solid rgba(255, 0, 0, .5);
border-bottom: Xpx solid rgba(255, 0, 0, .5);
border-left: Xpx solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* SAFARI */
background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
}Ce qui nous donne un code de ce style :
#menu1 {
border-top: 10px solid rgba(255, 255, 255, .5);
border-right: 10px solid rgba(255, 255, 255, .5);
border-bottom: 10px solid rgba(255, 255, 255, .5);
border-left: 10px solid rgba(255, 255, 255, .5);
-webkit-background-clip: padding-box; /* SAFARI */
background-clip: padding-box; /* OPERA, CHROME, FIREFOX, INTERNET EXPLORER */
}
votre commentaire -
Code à mettre dans la partie CSS.
/!\ Ce code ne fonctionne pas sur internet explorer.
Ce code permet de créer un dégradé sur vos objets sans passer par un logiciel.
Div sera à remplacer par votre sélecteur.
COLOR1 doit être remplacé par votre premier code couleur et COLOR2 doit être remplacé par votre deuxième code couleur.
"Left" signifie que le dégradé va commencer par la gauche pour finir par la droite. Vous pouvez remplacer par "right" pour un dégradé allant de la droite vers la gauche, par "top" pour un dégradé allant de bas en haut et "bottom" pour un dégradé allant du haut vers le bas.
div {
background-image: -webkit-linear-gradient(left, COLOR1, COLOR2); /* FIREFOX */
background-image: -moz-linear-gradient(left, COLOR1, COLOR2); /* CHROME */
background-image: -o-linear-gradient(left, COLOR1, COLOR2); /* OPERA */
}Exemple avec top :
Si vous préférez commencer le dégradé par un certain angle, alors il faudra appliquer ce code à la place :
Le X indique le degré du début du dégradé que vous voulez. Il va de 0 à 50.
div {
background-image: -webkit-linear-gradient(Xdeg, COLOR1, COLOR2); /* FIREFOX */
background-image: -moz-linear-gradient(Xdeg, COLOR1, COLOR2); /* CHROME */
background-image: -o-linear-gradient(Xdeg, COLOR1, COLOR2); /* OPERA */
}Exemple à 30deg :
Aussi, si vous souhaitez avoir un dégradé centré plutôt que linéaire, il faudra remplacer "lineart" par "radial" et effacez la partie qui donne la direction ou le degré. Comme ceci :
Si jamais vous souhaitez l'inverse de vos couleurs, il suffit d'inverser votre couleur 1 et votre couleur 2.
div {
background-image: -webkit-radial-gradient(COLOR1, COLOR2); /* FIREFOX */
background-image: -moz-radial-gradient(COLOR1, COLOR2); /* CHROME */
background-image: -o-radial-gradient(COLOR1, COLOR2); /* OPERA */
}Exemple :
votre commentaire -
Je me suis dit que les extensions que j'utilise pouvait peut être vous servir. (Evidemment ces extensions ne posent pas de problème avec Eklablog).
7 commentaires -