CSS : Diverses propriétés CSS 3.0

**ze_chaofan** · Sujet: CSS : Diverses propriétés CSS 3.0 7/2/2010, 09:01

Ce tutoriel a été rédigé par nirupan et ze_chaofan
Tous les codes s'y trouvant ne fonctionnent donc pas sous l'ensemble des navigateurs.
Les utiliser ne nuira cependant pas à la navigation sur votre forum pour les navigateurs non adaptés.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

**ze_chaofan** · Sujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32

Ombre sur un bloc/une image :
Les propriétés CSS :

Citation:

.class {
-moz-box-shadow: Xpx Ypx Zpx #couleur;
-webkit-box-shadow: Xpx Ypx Zpx #couleur;
box-shadow: Xpx Ypx Zpx #couleur;
}

X correspond au décalage vers la droite de l'ombre.
Y correspond au décalage vers le bas de l'ombre.
Z correspond à la taille du dégradé (fondu) de l'ombre.
La couleur à mettre est celle de l'ombre.

Cette propriété fonctionne pour les navigateurs Chrome, Safari, Mozilla et prochainement sous Opera.

Notez qu'il existe une propriété de CSS2 permettant des ombres sur un texte, fonctionnant de la même manière :

Citation:

.class { text-shadow: Xpx Ypx Zpx #couleur; }

Cette propriété fonctionne pour la plupart des navigateurs, excepté IE.

**ze_chaofan** · Sujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32

Faire pivoter un élément :
Les propriétés CSS :

Citation:

.class {
-moz-transform: rotate(Xdeg);
-webkit-transform: rotate(Xdeg);
transform: rotate(Xdeg);
}

X correspond à la rotation effectué en degrés.

Cette propriété fonctionne pour les navigateurs Chrome, Safari, Mozilla.

**ze_chaofan** · Sujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32

Effets de transition :
Les propriétés CSS pour faire une transition fondue :

Citation:

.class, .class:hover {
-moz-transition: TYPE Zs ease;
-webkit-transition:TYPE Zs ease;
transition: TYPE Zs ease;
}

TYPE (à remplacer par la valeur) correspond au type de transition. Si c'est pour changer la largeur de l'élément à son survol, mettez width, pour sa hauteur height, pour sa couleur color etc...
Pour que la transition s'applique à toutes les propriétés, retirez la valeur TYPE.
Z correspond à la durée de la transition.

Cette propriété fonctionne pour les navigateurs Chrome et Safari..

Survolez moi !

**ze_chaofan** · Sujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 11:28

Petite démonstration d'ensemble (à survoler) :

Code:

.class, .class:hover { -webkit-transition: 2s ease; -moz-transition: 2s ease; transition: 2s ease; }
.class { -webkit-box-shadow: 1px 1px 12px #222222; -moz-box-shadow: 1px 1px 12px #222222; box-shadow: 1px 1px 12px #222222; }
.class:hover { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }


	Créer un forum \| © phpBB \| Forum gratuit d'entraide\| Statistiques \| Signaler un abus \| Créer son propre blog gratuit \| Contrat CC