Ombre portée

2 participants

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

Résolu Ombre portée

Message par Javarakita Mar 13 Mai 2014 - 17:44

Rerebonjour x)

J'ai encore une question (oui je suis curieuse)
J'aimerais faire cet effet là (http://upz.fr/334D0.png) (une ombre portée si vous préférez) sur le "fond numéro deux" (comme je l'appelle), et aussi cet effet (http://upz.fr/BD1Ft.png) (une ombre portée sur tout le texte du fo')

Merci de votre aide future Very Happy


Dernière édition par Javarakita le Mar 13 Mai 2014 - 18:28, édité 1 fois
avatar

Javarakita
*

Féminin
Messages : 44
Inscrit(e) le : 13/05/2014

http://besomeone.forumactif.org/
Javarakita a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ombre portée

Message par MlleAlys Mar 13 Mai 2014 - 18:05

Bonjour,
tu peux ajouter dans ton css à l'élément #wrap les propriétés suivantes :
Code:
-webkit-box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
-o-box-shadow: 0 0 10px black;
-ms-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
pour l'ombre du cadre du forum sur les différents navigateurs, et
Code:
text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
pour l'ombre du texte (les version d'IE antérieures à la 9ième il me semble n'affichent cependant pas cette ombre).

pour toutes les propriétés shadow : la première valeur correspond au décalage horizontal de l'ombre, la deuxième au décalage vertical, la troisième à l'intensité du "floutage" de l'ombre, et enfin la dernière à la couleur. Pour le cas de l'ombre sur le texte, rgba(0,0,0,0.3) correspond à noir avec une opacité de 0,3 (transparent=0, opaque=1).
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: Ombre portée

Message par Javarakita Mar 13 Mai 2014 - 18:12

Merci, mais j'ai beau essayer, ces codes ne marchent pas, c'est à dire que le texte reste tout simple pourtant j'ai juste coller les codes sur ma feuille CSS ..
avatar

Javarakita
*

Féminin
Messages : 44
Inscrit(e) le : 13/05/2014

http://besomeone.forumactif.org/
Javarakita a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ombre portée

Message par MlleAlys Mar 13 Mai 2014 - 18:17

Il faut compléter le code que vous avez déjà :
#wrap correspond au bloc avec le fond blanc qui contient le forum. Vous avez déjà personnalisé sa mise en forme et devez avoir dans votre feuille de style css un code de ce genre :
Code:
#wrap {
  border-radius: 30px; /*les coins arrondis*/
  min-width: 0px; /*largeur minimale à 0*/
  overflow: hidden; /*cacher ce qui dépasse*/
  padding: 10px; /*marge intérieure*/
}
Vous pouvez le compléter avec les propriétés pour les ombres, comme ceci :
Code:
#wrap {
  border-radius: 30px; /*les coins arrondis*/
  min-width: 0px; /*largeur minimale à 0*/
  overflow: hidden; /*cacher ce qui dépasse*/
  padding: 10px; /*marge intérieure*/
  -webkit-box-shadow: 0 0 10px black;
  -moz-box-shadow: 0 0 10px black;
  -o-box-shadow: 0 0 10px black;
  -ms-box-shadow: 0 0 10px black;
  box-shadow: 0 0 10px black; /*ombre du cadre du forum*/
  text-shadow: 2px 2px 1px rgba(0,0,0,0.3); /*ombre du texte*/
}
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: Ombre portée

Message par Javarakita Mar 13 Mai 2014 - 18:28

Merci beaucoup pour toute votre aide ! Very Happy
avatar

Javarakita
*

Féminin
Messages : 44
Inscrit(e) le : 13/05/2014

http://besomeone.forumactif.org/
Javarakita 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