CSS : Diverses propriétés CSS 3.0
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
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.



Dernière édition par ze_chaofan le 8/2/2010, 21:26, édité 3 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Ombre sur un bloc/une image :
Les propriétés CSS :
.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 désormais sous Opera.

Notez qu'il existe une propriété de CSS2 permettant des ombres sur un texte, fonctionnant de la même manière :
.class { text-shadow: Xpx Ypx Zpx #couleur; }
Cette propriété fonctionne pour la plupart des navigateurs, excepté IE.



Dernière édition par ze_chaofan le 20/3/2010, 20:54, édité 4 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Faire pivoter un élément :
Les propriétés CSS :
.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.



Dernière édition par ze_chaofan le 20/3/2010, 20:50, édité 2 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Effets de transition :
Les propriétés CSS pour faire une transition fondue :
.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 !



Dernière édition par ze_chaofan le 20/3/2010, 20:53, édité 2 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
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); }

avatar
demeter
(Membre)
Voir le profil de l'utilisateur http://altitudetropicale.forums-actifs.com/forum.htm
J'adore ces astuces et en particulier la toute dernière que je viens d'adopter. L'effet est particulièrement intéressant. Merci pour ces astuces.


Contenu sponsorisé

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

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

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit