Faire un dégradé avec la bodyline

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire un dégradé avec la bodyline

Message par TYL Jeu 7 Mai 2015 - 14:33

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;
}
Voici le code que j'ai utilisé, trouvé grâce à google. Je ne comprends pas pourquoi la couleur ne contient que 3 caractères, mais j'ai essayé avec 6 et ça ne marche pas plus.
Quelqu'un aurait-il une solution?
Merci d'avance! I love you


Dernière édition par TYL le Jeu 7 Mai 2015 - 16:26, édité 1 fois
TYL

TYL
**

Féminin
Messages : 69
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par MlleAlys Jeu 7 Mai 2015 - 14:48

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 :
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

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par TYL Jeu 7 Mai 2015 - 15:00

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é...
.bodyline {
border-radius:15px;
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: 5px 10px 0px #000000;
}
Vous pouvez le constater sur le forum dont le lien est sur le premier message
TYL

TYL
**

Féminin
Messages : 69
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par MlleAlys Jeu 7 Mai 2015 - 15:52

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 !
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

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par TYL Jeu 7 Mai 2015 - 16:00

D'accord, merci! Au niveau des codes couleurs, je peux mettre des codes hexagonaux classiques sans soucis?
TYL

TYL
**

Féminin
Messages : 69
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par MlleAlys Jeu 7 Mai 2015 - 16:03

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 ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par TYL Jeu 7 Mai 2015 - 16:05

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? I love you
TYL

TYL
**

Féminin
Messages : 69
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire un dégradé avec la bodyline

Message par MlleAlys Jeu 7 Mai 2015 - 16:21

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
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un dégradé avec la bodyline

Message par TYL Jeu 7 Mai 2015 - 16:26

D'accord, merci énormément pour toutes ces informations!
Sujet Résolu.
TYL

TYL
**

Féminin
Messages : 69
Inscrit(e) le : 30/06/2011

http://love-runs-out.forumactif.org/
TYL a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum