Découvrez comment les nouvelles balises CSS3 peuvent vous aider dans la présentation du contenu de votre site, effectuer des rotations du contenu, des transformations…
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Apprenez à utiliser les nouvelles possibilités CSS3 – partie 3
Bonjour à tous et bienvenu sur Développement Facile.
Ensemble on continue à découvrir les nouvelles balises disponibles avec CSS 3. Si vous regardez ces dernières semaines, vous avez déjà eu plusieurs cours dédiés à CSS 3 et ce n’est pas finit, car il y a énormément de possibilités avec CSS 3, c’est ce que je vous invite à découvrir dans ce cours.
Rappel sur les préfixes CSS 3
Je vous ai mis un rappel sur les préfixes CSS 3, j’en ai parlé dans les précédents cours, comme ça vous l’aurez d’une manière claire et précise,
FireFox il utilise le préfixe moz,
Chrome il utilise le préfixe webkit,
Safari également le même préfixe,
Opéra il n’a pas de préfixe,
iOS Safari, tous les deux ils utilisent le préfixe aussi webkit,
Android Browser utilise le préfixe webkit. C’est pour ça que vous verrez avec des propriétés CSS 3 expérimentales que je vous ai présentées, les préfixes moz, et webkit, et ms pour Microsoft Internet Explorer, j’ai oublié de le mettre ms c’est le préfixe de Microsoft, tout simplement.
Présenter un contenu en colonnes
Vous pouvez présenter un contenu en colonne, ça arrive, rappelez-vous sur des blocs WordPress vous avez des contenus texte sous forme de colonnes, il suffit d’utiliser la propriété column et vous avez plusieurs paramètres :
Column-count c’est le nombre de colonnes à afficher pour le contenu,
Column-width c’est facultatif c’est la largeur de chaque colonne,
Column-gap c’est l’espace, le padding entre chaque colonne,
Column-rule ça vous permet de créer une bordure entre les colonnes, ça vous permet de mieux organiser votre contenu.
Je vous ai mis un exemple de code source avec moz-column webkit-column pour qu’il puisse afficher sur Google chrome, Safari, Mozilla etc.
Le texte lorem ipsum, dans la div avec la classe de style txt, sera affiché sous forme de deux colonnes, tout simplement, avec une bordure de 10 pixels, avec une marge de 10 pixels pardon, et une bordure de pixels solides de couleur 33DEFF. Je vous invite à recopier ce code source dans votre document HTML et à organiser votre texte sous forme de colonnes, ça fait un peu l’effet de journal, un journal, ou un magasine et votre texte est affiché sur plusieurs colonnes.
Transformations CSS3
Je vous présente différentes transformations possibles avec CSS3 grâce à la propriété transform, vous pouvez effectuer des rotations sur un bloc, donc rotate sur un angle, rotate3D, rotate sur l’angle X, rotate Y sur l’angle Y, rotate Z sur l’angle Z, vous pouvez également faire des modifications d’échelle, donc la rotation d’un bloc, les modifications d’échelle sur un bloc avec scale et le nombre, scale 3d, scale X, sur l’axe de X, scale Y sur l’axe vertical, scale Z sur l’axe Z.
Vous pouvez faire des transformations obliques comme ça, faire des effets avec la propriété skew, skew X, skew y, skew Z, et des déplacements, des translations sur la longueur, translation 3d, translation sur les X, translation sur les Y ou translation sur les Z.
L’angle vous pouvez le définir en degré, en radiant ou en gradient, à vous de choisir suivant ce que vous souhaitez faire dans votre document HTML.
Je vous ai mis un exemple de code source avec une rotation à -45° donc un déplacement comme ça à – 45° du texte, donc vous pouvez faire des rotations, des transformations, rotations, redimensionnements, sur des images, sur du texte, sur tout un contenu div, voilà. A vous de jouer, reprenez le code source, utilisez-le, testez-le dans les documents html, très important de faire les exercices c’est comme ça vous allez progresser le plus rapidement.
Le texte défilant
Vous pouvez faire, également grâce à CSS, avant vous le faisiez surement en JavaScript, ou en ActionScript, les textes défilants grâce à la propriété marquee, vous pouvez ajouter des effets de défilement sur un texte. Vous donnez la direction du défilement avec marquee-direction, marquee-increment c’est le pas du défilement, rapide ou plutôt faible, marquee-repetition c’est le nombre de répétitions du défilement, vous pouvez utiliser le paramètres infinity pour des défilements infinis, une fois que le texte a fini de défiler, soit vous le remettez un nombre infini de fois ou un nombre défini de fois, soit il arrête de défiler.
Vous pouvez définir avec marquee-style le style du défilement, et marquee-speed la vitesse de défilement.
Je vous ai mis un exemple de code source, sur un texte pour faire défiler un texte, ça vous rappellera les bannières, avant le texte défilait avec flash ou JavaScript, maintenant le défilement est réalisé directement grâce à la propriété CSS marquee.
Comme d’habitude reprenez le code source, réutilisez-le dans vos sites internet et amusez-vous avec pour tester les différentes défilements possibles.
Les filtres graphiques
Vous pouvez également appliquer des filtres graphiques grâce à la propriété :
filter, vous donnez une valeur
grayscale c’est un filtre sur le niveau de gris,
sepia, c’est un effet sepia,
invert c’est un effet négatif,
opacity c’est un effet de transparence.
Vous donnez toujours une valeur comprise entre zéro et un et un pourcentage, tout simplement.
Je vous ai mis un exemple, ah non, il y a d’autres filtres, pardon excusez-moi,
Hue sur la teinte avec un angle exprimé en degré,
brightness c’est un effet de luminosité,
contrast c’est un effet de contraste c’est ce que veut dire le mot,
blur c’est un effet de flou,
ah, excusez-moi il y a eu un copier-coller malheureux avec le blur
et drop-shadow c’est un effet d’ombre portée sur une image, sur du texte.
Je vous ai mis un exemple de code source sur un logo, avec différents effets, un effet sur les gris, grayscale, un effet blur sur le flou, et un effet sepia sur une image, comme ça vous avez votre image avec différents effet.
Les masques
Vous avez également la propriété masque, donc les masques sont très utilisés si vous êtes développeur ActionScript flash, vous avez utilisé les masques ne serait-ce que pour faire du texte défilant avec une scroll barre ou une image pour des effets de ticket à gratter, grâce à la propriété masque, vous pouvez faire un peu la même chose, un masque avec une image png et des pixels transparents tout simplement.
Je vous ai mis un exemple de code source sur une image on lui a appliquée un masque, donc réutilisez ce code source un peu pour voir ce que ça peut donner dans votre site internet, tout simplement.
Votre plan d’actions !
Comme d’habitude, je vous encourage à utiliser ces nouvelles possibilités CSS3, dans le vidéo mettez sur pause, reprenez le code source, testez-le de votre côté, comme d’habitude retrouvez un exemple de code source en téléchargement sous ce cours vidéo, si vous avez des questions posez-les sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple CSS3
Et voici un exemple de code avec les nouvelles possibilités CSS3.
Téléchargement du code source Code avec les nouvelles possibilités CSS3
