ForumEntraideAstucesSF-BBFAQRechercherInscriptionConnexionNewsPlus ! 
UNE GALERIE D'AVATARS A ETE MISE EN PLACE POUR LES MEMBRES
MERCI DE PENSER A COMPLETER VOTRE PROFIL ET DE CHOISIR UN AVATAR
Poster un nouveau sujetCe sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
CSS : Diverses propriétés CSS 3.0

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
ze_chaofan
De retour de loin
De retour de loin

Masculin Age: 16
Nombre de messages: 3232
Localisation: Un peu la même que mon ombre
Emploi/loisirs: Dormir
Humeur: Mnmnhmnhhmnh ?
Date d'inscription: 30/07/2007

Remerciements reçus: 169

MessageSujet: CSS : Diverses propriétés CSS 3.0 7/2/2010, 09:01
Par : ze_chaofan

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, 19:26, édité 3 fois

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
ze_chaofan
De retour de loin
De retour de loin

Masculin Age: 16
Nombre de messages: 3232
Localisation: Un peu la même que mon ombre
Emploi/loisirs: Dormir
Humeur: Mnmnhmnhhmnh ?
Date d'inscription: 30/07/2007

Remerciements reçus: 169

MessageSujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32
Par : ze_chaofan

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.

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
ze_chaofan
De retour de loin
De retour de loin

Masculin Age: 16
Nombre de messages: 3232
Localisation: Un peu la même que mon ombre
Emploi/loisirs: Dormir
Humeur: Mnmnhmnhhmnh ?
Date d'inscription: 30/07/2007

Remerciements reçus: 169

MessageSujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32
Par : ze_chaofan

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.

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
ze_chaofan
De retour de loin
De retour de loin

Masculin Age: 16
Nombre de messages: 3232
Localisation: Un peu la même que mon ombre
Emploi/loisirs: Dormir
Humeur: Mnmnhmnhhmnh ?
Date d'inscription: 30/07/2007

Remerciements reçus: 169

MessageSujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 10:32
Par : ze_chaofan

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 !

Voir le profil de l'utilisateurhttp://www.sos-forum.com/
ze_chaofan
De retour de loin
De retour de loin

Masculin Age: 16
Nombre de messages: 3232
Localisation: Un peu la même que mon ombre
Emploi/loisirs: Dormir
Humeur: Mnmnhmnhhmnh ?
Date d'inscription: 30/07/2007

Remerciements reçus: 169

MessageSujet: Re: CSS : Diverses propriétés CSS 3.0 7/2/2010, 11:28
Par : ze_chaofan

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); }

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
SOS-FORUM :: A consulter ! ::  Astuces pour forums-
Poster un nouveau sujetCe sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.
Derniers sujets
» fichier video
par ze_chaofan Hier à 21:08

» Installation Catégories comprimées
par Ilianna 9/3/2010, 01:31

» pop-up Lorsque vous recevez le MP
par Final-Blond 8/3/2010, 20:21

» Menu bizzare
par Final-Blond 8/3/2010, 20:18

» installer un sélecteur de thèmes
par Final-Blond 8/3/2010, 20:16

» Problème avec catégories comprimées
par Final-Blond 8/3/2010, 20:15

» Nouvelle apparence du forum !
par ze_chaofan 8/3/2010, 20:13

» Catégories comprimées [questions]
par Final-Blond 8/3/2010, 20:13

» [AIDE] Changer le nom "Membres"
par Final-Blond 8/3/2010, 20:11

» Kikou
par Ilianna 8/3/2010, 20:03

» Euh... salut ! ^^
par Solitude 8/3/2010, 10:52

» je me presente
par Solitude 8/3/2010, 10:52

Accueil­FAQ­Rechercher­Groupes­Membres­S'enregistrer­Connexion
Créer un forum  | © phpBBForum gratuit d'entraide| Statistiques | Signaler un abus  | Créer son propre blog gratuit | Contrat CC