C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Box et text shadow

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 2912



Box et text shadow

Niveau : Intermédiaire | Par : Basil Hawkins | Validé par : Basil Hawkins | En date du : 29/03/2010


Bonjour bonjour ! Smile

Aujourd'hui je vais vous montrer deux nouvelles propriétés : "box-shadow" et "text-shadow".

I. Box-Shadow ;

Box-Shadow est une propriété CSS qui permet d'ajouter une ombre à une image, une bordure, un tableau, ... (Le titre ci-dessus est un exemple)

Il marche comme ceci :
Code:
-moz-box-shadow: Xpx Ypx Apx #EEEEEE;
-webkit-box-shadow: Xpx Ypx Apx #EEEEEE;
box-shadow: Xpx Ypx Apx #EEEEEE;

X correspond au nombre de pixels dont l'ombre sera décalée vers la droite (si vous voulez déplacer l'ombre à gauche, il faut insérer un nombre négatif).
Y correspond au nombre de pixels dont l'ombre sera décalée vers le bas (si vous voulez déplacer l'ombre en haut, il faut également insérer un nombre négatif Wink).
A correspond au dispersement de l'ombre : plus le chiffre sera petit, plus l'ombre sera petite et concentrée, plus le chiffre sera grand, plus l'ombre sera grande et diluée. Je vous conseille donc de ne pas dépasser 25 pour qu'on puisse la voir un minimum.
EEEEEE correspond à la couleur de l'ombre ; si vous voulez qu'elle ait la même couleur que la bordure, effacez cette partie Wink

Actuellement mon ombre sur le titre est comme ceci :
Code:
box-shadow: 2px 2px 3px #000000;
Ce code sert surtout à donner du relief aux éléments Wink


II. Text-Shadow ;

Text-shadow fonctionne exactement de la même façon que box-shadow, seulement c'est pour le texte. Le code se présente sous cette forme :
Code:
text-shadow: Xpx Ypx Apx #EEEEEE;

Petite précision avant de clore ce tutoriel, ces codes ne marchent pas sous IE ! Il y a bien d'autres codes spéciaux qui peuvent s'y rapprocher mais je ne vous les ai pas montrés car je les considère comme trop différents (niveau graphique, il y a une sacrée différence). Cependant si vous tenez à les connaître, vous pouvez faire une recherche google Wink


Dernière édition par Basil Hawkins le Jeu 25 Nov 2010, 18:09, édité 1 fois
MessageSujet: Box et text shadow   Lun 29 Mar 2010, 09:37
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Box et text shadow   Jeu 04 Aoû 2011, 05:17
Revenir en haut Aller en bas
 

Box et text shadow

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Pouvoir faire des onglets dans un message
» [Résolu]Conflit CSS / image pour la barre de menu
» Inserer un text shadow dans un code
» text-to-speech
» Jeu aventure text

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit