Faire un dégradé avec la bodyline
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Faire un dégradé avec la bodyline
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://wybpourtester.forumactif.org/
Description du problème
Bonjour,J'aimerais réaliser un dégradé sur le contour de mon forum (comme indiqué sur le modèle de la capture d'écran, the hundred) mais malgré de nombreuse recherche, je n'arrive pas à mettre en place mon projet, je viens donc vous demander de l'aide.
- Code:
border-radius:XXpx;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-top: none !important; (là c'est pour les marges du dessus)
border-bottom: none !important; (là pour les marges du dessous)
border-shadow: 1px 1px 12px #555;
}
Quelqu'un aurait-il une solution?
Merci d'avance!
Dernière édition par TYL le Jeu 7 Mai 2015 - 16:26, édité 1 fois
Re: Faire un dégradé avec la bodyline
Bonjour,
Le dégradé que vous cherchez est effectivement un effet d'ombre réalisé en css avec la propriété box-shadow, qui fonctionne ainsi :
box-shadow : décalage horizontal de l'ombre, décalage vertical, étendue de l'ombre, couleur de l'ombre ;
(les différentes valeurs séparées par des espaces)
exemple : http://fiddle.jshell.net/bxp0fwLm/show/light/ ; http://jsfiddle.net/bxp0fwLm/
Votre code à ce niveau est donc bon ^^
Ici votre problème vient plutôt de vos commentaires entre parenthèses : en css les commentaires sont mis en /* ... */
D plus, mieux vaut éviter les apostrophes dans ces commentaires, parce que l'éditeur les prend pour des guillemets, et s'il y en a un nombre impair sur la feuille de style, il en déduit qu'une paire n'a pas été correctement refermée, et affiche un message d'erreur ^^
Corrigez donc ce passage ainsi :
Le dégradé que vous cherchez est effectivement un effet d'ombre réalisé en css avec la propriété box-shadow, qui fonctionne ainsi :
box-shadow : décalage horizontal de l'ombre, décalage vertical, étendue de l'ombre, couleur de l'ombre ;
(les différentes valeurs séparées par des espaces)
exemple : http://fiddle.jshell.net/bxp0fwLm/show/light/ ; http://jsfiddle.net/bxp0fwLm/
Votre code à ce niveau est donc bon ^^
Ici votre problème vient plutôt de vos commentaires entre parenthèses : en css les commentaires sont mis en /* ... */
D plus, mieux vaut éviter les apostrophes dans ces commentaires, parce que l'éditeur les prend pour des guillemets, et s'il y en a un nombre impair sur la feuille de style, il en déduit qu'une paire n'a pas été correctement refermée, et affiche un message d'erreur ^^
Corrigez donc ce passage ainsi :
- Code:
border-radius:XXpx;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-top: none !important; /*là c est pour les marges du dessus*/
border-bottom: none !important; /*là pour les marges du dessous*/
border-shadow: 1px 1px 12px #555;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire un dégradé avec la bodyline
Bonjour,
Merci beaucoup de la réponse! Cependant, je ne vois toujours aucun dégradé sous google chrome malgré modification du code comme vous me l'avez expliqué...
Merci beaucoup de la réponse! Cependant, je ne vois toujours aucun dégradé sous google chrome malgré modification du code comme vous me l'avez expliqué...
Vous pouvez le constater sur le forum dont le lien est sur le premier message
Re: Faire un dégradé avec la bodyline
Oups !
je suis désolée, je n'ai effectivement pas fait assez attention, dans votre code vous avez border-shadow au lieu de box-shadow !
Vous pouvez également résumer les 4 lignes pour les bordures en une seule puisque ce sont toutes les mêmes :
je suis désolée, je n'ai effectivement pas fait assez attention, dans votre code vous avez border-shadow au lieu de box-shadow !
- Code:
.bodyline {
border-bottom: 2px solid;
border-left: 2px solid;
border-radius: 15px;
border-right: 2px solid;
box-shadow: 5px 10px 0 #000;
border-top: 2px solid;
}
Vous pouvez également résumer les 4 lignes pour les bordures en une seule puisque ce sont toutes les mêmes :
- Code:
.bodyline {
border: 2px solid #000;
border-radius: 15px;
box-shadow: 5px 10px 0 #000;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire un dégradé avec la bodyline
D'accord, merci! Au niveau des codes couleurs, je peux mettre des codes hexagonaux classiques sans soucis?
Re: Faire un dégradé avec la bodyline
oui sans soucis, le code couleur dans le css peut être un hexadécimal (l'hexadécimal à trois chiffres est juste une abbréviation quand par exemple c'est trois fois le même numéro), ou le nom de la couleur s'il existe, ou le code rgb, ou rgba ^^
#000 = #000000 = black = rgb(0, 0, 0) = rgba(0, 0, 0, 1) => noir ^^
#000 = #000000 = black = rgb(0, 0, 0) = rgba(0, 0, 0, 1) => noir ^^
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire un dégradé avec la bodyline
D'accord! Et y a t'il un moyen de baisser l'opacité de l'ombre?Ou bien de faire en sorte qu'elle se répande de manière égale des quatre côtés?
Re: Faire un dégradé avec la bodyline
Pour modifier la position de l'ombre il vous faut modifier les premières valeurs. En mettant 0 en décalage horizontal et 0 en décalage vertical, l'ombre sera centrée par rapport au bloc bodyline, comme on peut le voir dans l'exemple donné : http://fiddle.jshell.net/bxp0fwLm/show/light/
L'étendue floutée de l'ombre est donnée par le troisième chiffre.
Pour appliquer des couleurs avec une opacité variable, il vous faudra passer par un code couleur en rgba :
rgba($$, $$, $$, @)
- les trois premières valeurs $$ sont la quantité de rouge, celle de vert, celle de bleue (entre 0 et 255)
- la dernière valeur @ est l'opacité, entre 0 et 1 (0=complètement transparent, 1=totalement opaque ; attention ce n'est pas une virgule mais un point comme à les chiffres à l'anglaise ! ^^)
- (d'où "rgba" comme "Red Green Blue Alpha")
- exemples :
rgba(0, 0, 0, 1) = noir avec une opacité de 1
rgba(0, 0, 0, 0.5) = noir à moitié transparent
rgba(255, 255, 255, 0.2) = blanc très transparent
rgba(210, 136, 210, 0.8) = un violet légèrement transparent
L'étendue floutée de l'ombre est donnée par le troisième chiffre.
Pour appliquer des couleurs avec une opacité variable, il vous faudra passer par un code couleur en rgba :
rgba($$, $$, $$, @)
- les trois premières valeurs $$ sont la quantité de rouge, celle de vert, celle de bleue (entre 0 et 255)
- la dernière valeur @ est l'opacité, entre 0 et 1 (0=complètement transparent, 1=totalement opaque ; attention ce n'est pas une virgule mais un point comme à les chiffres à l'anglaise ! ^^)
- (d'où "rgba" comme "Red Green Blue Alpha")
- exemples :
rgba(0, 0, 0, 1) = noir avec une opacité de 1
rgba(0, 0, 0, 0.5) = noir à moitié transparent
rgba(255, 255, 255, 0.2) = blanc très transparent
rgba(210, 136, 210, 0.8) = un violet légèrement transparent
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Faire un dégradé avec la bodyline
D'accord, merci énormément pour toutes ces informations!
Sujet Résolu.
Sujet Résolu.
Sujets similaires
» Faire passer une image au dessus du bodyline
» Faire passer le header au dessus du forumline/bodyline ?
» Comment faire un Dégradé
» Soucis avec mon bodyline
» Faire un dégradé sur un pseudo en laissant la base du pseudo tel quel
» Faire passer le header au dessus du forumline/bodyline ?
» Comment faire un Dégradé
» Soucis avec mon bodyline
» Faire un dégradé sur un pseudo en laissant la base du pseudo tel quel
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum