SOS-FORUM
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

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

» Bonne Année 2015
par Yoda 5/3/2017, 20:12

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

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

Le deal à ne pas rater :
Coffret dresseur d’élite ETB Pokémon EV06 Mascarade Crépusculaire
56.90 €
Voir le deal

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]

Zeco
Zeco
Administrateur absent
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

Zeco
Zeco
Administrateur absent
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

Zeco
Zeco
Administrateur absent
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

Zeco
Zeco
Administrateur absent
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

Zeco
Zeco
Administrateur absent
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); }

demeter
demeter
(Membre)
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 | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit

Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser