css contours ombre portée + bord arrondis

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

Résolu css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 4:59

Bonjour,

je cherche comment mettre une ombre portée atour des contours, et comment arrondir les bords. J'ai essayé tout un paquet de codes fournis issus de mes recherches. AUCUN ne prenait effet !
Je suis sur INVISION

Merci Smile


Dernière édition par LuciDreams le Mar 21 Fév 2012 - 3:13, édité 1 fois

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 5:19

Bonjours,


Que voulez vous arrondir sur votre forum ?

En parlant de bord... Parler vous d'arrondir le cadre ?

Et l'effet ombre où voulez vous qu'il est lieu ?

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 6:00

Le cadre oui, TOUT le bloc du forum, arrondir le cadre, c'est arrondir les coins (les 4 du corps [body]) et l'ombre, c'est celle du cadre sur le fond de la page Smile

C'est comme si la autour, le cadre blanc du forum actuel aurait une ombre sur la partie verte. Et les coins en bas, seraient arrondis

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 6:05

Alors pour l'ombre je regarde.. mais voici pour vos coins rond si j'ai bien compris...

Dans votre CSS placer ce code !

Code:
#wrap{
-moz-border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
}

Par contre pour l'ombre je regarde car je ne suis pas sur de mon code Wink!.. Mais disez moi les coin rond fonctionne t'ils avec ce code CSS ?


Je viens de virer mon fofo teste en version invision et j'ai fait des teste en plus du corps j'ai réussi avec d'autre class CSS a arrondire la t'chat box le footer les catégorie et autre sur ce lien: http://thecbl.webservices.tv/forum dite le moi si cela vous intéresse Wink !

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 6:10

Les bords parfait !

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 6:11

J'ai éditer mon dernier message avec mon fofo teste j'ai peut être d'autre arrondissement qui pourrais vous plaire au cas ou Wink !

Bon je vous reviens avec l'ombre Wink!

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 6:20

Bon voilà j'ai réussi... par contre je ne suis pas sur d'avoir mis l'ombre ou vous le voulez car je ne suis pas sur de l'endroit ou vous parler.. Si me me suis tromper dite le moi je vais vous le déplacer Wink

Dans votre CSS:

Mettez ce code:
Code:
#wrap{
  -moz-box-shadow: 2px 2px 3px #000;
  -webkit-box-shadow: 2px 2px 3px #000;
  box-shadow: 2px 2px 3px #000;
}

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 6:51

C'est bien la Smile Mais comment le rendre uniforme partout ? Comment fonctionnent les réglages ?

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 6:56

Uniforme.. Vous voulez que l'ombre face tout le tour du cadre ? (du corps)

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 7:13

C'est exact, et éventuellement régler la distance de l'ombre (son étendue) et son opacité ^^ Sinon, juste lire rendre uniforme pour voir dans un premier temps Smile

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 7:15

Pour le coter uniforme laisser moi regarder car il n'est pas prévu dans le code... Pour augmenter l'effet visuel de l'ombre ou la diminuer jouer avec le nombre devant les px !

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 7:20

Oui c'est ce que je pensais pour les réglages :p

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 7:34

Code:
#wrap{
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
  -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
}



Bon alors essaie cela en remplacent l’ancien CSS que je t'est donner Wink !

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Lun 20 Fév 2012 - 7:57

Non désolé, je ne vois rien avec ce code

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 7:58

Désoler il fonctionne seulement sous une version de firefox précise ! désoler je retourne travailler sur ce code !

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: css contours ombre portée + bord arrondis

Message par Cinderella. le Lun 20 Fév 2012 - 9:39

Personnellement, j'ai utilisé ces valeurs sur mon forum :
-moz-box-shadow: 0px 0px 7px #votrecouleur;

Et le rendu est assez uniforme ( voir : http://once-upon-a-time.1talk.net/), pour l'opacité, le plus simple serait de changer le code couleur (#votrecouleur") et d'en choisir une plus claire.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

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

Résolu Re: css contours ombre portée + bord arrondis

Message par Invité le Lun 20 Fév 2012 - 9:43

Ha c'est bien cela Wink !

Invité
Invité


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

Résolu Re: css contours ombre portée + bord arrondis

Message par LuciDreams le Mar 21 Fév 2012 - 3:12

C'est parfait merci

LuciDreams
***

Messages : 132
Inscrit(e) le : 07/02/2012

http://www.lucidreams.fra.co
LuciDreams a été remercié(e) par l'auteur de ce sujet.

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


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