Dcouvrez comment les nouvelles balises CSS3 peuvent vous aider dans la prsentation ducontenu de votre site, effectuer des rotations du contenu, des transformations... Tout est dansla formation ci-dessous.

jQLeadBrite("#leadplayer_video_element_5352B09862C6A").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTM1MkIwOTg2MkM2QSIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkFwcHJlbmV6IFx1MDBlMCB1dGlsaXNlciBsZXMgbm91dmVsbGVzIHBvc3NpYmlsaXRcdTAwZTlzIENTUzMgLSBwYXJ0aWUgMyIsImRlc2NyaXB0aW9uIjoiQXBwcmVuZXogXHUwMGUwIHV0aWxpc2VyIGxlcyBub3V2ZWxsZXMgcG9zc2liaWxpdFx1MDBlOXMgQ1NTMyAtIHBhcnRpZSAzIiwiYXV0b3BsYXkiOmZhbHNlLCJzaG93X3RpbWVsaW5lIjp0cnVlLCJlbmFibGVfaGQiOnRydWUsIm9wdCI6ZmFsc2UsImN0YSI6eyJ0aW1lIjoiZW5kIiwiYnRleHQiOiJEZXZlbmV6IFByb2Zlc3Npb25uZWwgSFRNTDUgXC8gQ1NTMyBldCBDclx1MDBlOWV6IGRlcyBBcHBsaWNhdGlvbnMgSW5jcm95YWJsZXMgISIsInVybCI6Imh0dHA6XC9cL3d3dy5wcm9ncmFtbWF0aW9uLWZhY2lsZS5jb21cL2h0bWw1Y3NzMyIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6IkRKZDJaWm1SRVdFIn0=");

Afficher le texte de la vidoApprenez utiliser les nouvelles possibilits CSS3 - partie 3 Bonjour tous et bienvenu surDveloppement Facile. Ensemble on continue dcouvrir les nouvelles balises disponiblesavec CSS 3. Si vous regardez ces dernires semaines, vous avez dj eu plusieurs coursddis CSS 3 et ce n'est pas finit, car il y a normment de possibilits avec CSS 3, c'est ceque je vous invite dcouvrir dans ce cours.Rappel sur les prfixes CSS 3 Je vous ai mis unrappel sur les prfixes CSS 3, j'en ai parl dans les prcdents cours, comme a vous l'aurezd'une manire claire et prcise, FireFox il utilise le prfixe moz, Chrome il utilise le prfixewebkit, Safari galement le mme prfixe, Opra il n'a pas de prfixe, iOS Safari, tous les deuxils utilisent le prfixe aussi webkit, Android Browser utilise le prfixe webkit. C'est pour a quevous verrez avec des proprits CSS 3 exprimentales que je vous ai prsentes, les prfixesmoz, et webkit, et ms pour Microsoft Internet Explorer, j'ai oubli de le mettre ms c'est le prfixede Microsoft, tout simplement.Prsenter un contenu en colonnes Vous pouvez prsenter uncontenu en colonne, a arrive, rappelez-vous sur des blocs WordPress vous avez des contenustexte sous forme de colonnes, il suffit d'utiliser la proprit column et vous avez plusieursparamtres : Column-count c'est le nombre de colonnes afficher pour le contenu, Column-

1 / 4

width c'est facultatif c'est la largeur de chaque colonne, Column-gap c'est l'espace, le paddingentre chaque colonne, Column-rule a vous permet de crer une bordure entre les colonnes, avous permet de mieux organiser votre contenu. Je vous ai mis un exemple de code source avecmoz-column webkit-column pour qu'il puisse afficher sur Google chrome, Safari, Mozilla etc. Letexte lorem ipsum, dans la div avec la classe de style txt, sera affich sous forme de deuxcolonnes, tout simplement, avec une bordure de 10 pixels, avec une marge de 10 pixelspardon, et une bordure de pixels solides de couleur 33DEFF. Je vous invite recopier ce codesource dans votre document HTML et organiser votre texte sous forme de colonnes, a fait unpeu l'effet de journal, un journal, ou un magasine et votre texte est affich sur plusieurscolonnes.Transformations CSS3 Je vous prsente diffrentes transformations possibles avecCSS3 grce la proprit transform, vous pouvez effectuer des rotations sur un bloc, doncrotate 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, lesmodifications 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 obliquescomme a, faire des effets avec la proprit skew, skew X, skew y, skew Z, et desdplacements, des translations sur la longueur, translation 3d, translation sur les X, translationsur les Y ou translation sur les Z. L'angle vous pouvez le dfinir en degr, en radiant ou engradient, vous de choisir suivant ce que vous souhaitez faire dans votre document HTML. Jevous ai mis un exemple de code source avec une rotation -45 donc un dplacement commea - 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 dejouer, reprenez le code source, utilisez-le, testez-le dans les documents html, trs important defaire les exercices c'est comme a vous allez progresser le plus rapidement.Le texte dfilantVous pouvez faire, galement grce CSS, avant vous le faisiez surement en JavaScript, ouen ActionScript, les textes dfilants grce la proprit marquee, vous pouvez ajouter deseffets de dfilement sur un texte. Vous donnez la direction du dfilement avec marquee-direction, marquee-increment c'est le pas du dfilement, rapide ou plutt faible, marquee-repetition c'est le nombre de rptitions du dfilement, vous pouvez utiliser le paramtresinfinity pour des dfilements infinis, une fois que le texte a fini de dfiler, soit vous le remettezun nombre infini de fois ou un nombre dfini de fois, soit il arrte de dfiler. Vous pouvez dfiniravec marquee-style le style du dfilement, et marquee-speed la vitesse de dfilement. Je vousai mis un exemple de code source, sur un texte pour faire dfiler un texte, a vous rappellerales bannires, avant le texte dfilait avec flash ou JavaScript, maintenant le dfilement estralis directement grce la proprit CSS marquee. Comme d'habitude reprenez le codesource, rutilisez-le dans vos sites internet et amusez-vous avec pour tester les diffrentesdfilements possibles.Les filtres graphiques Vous pouvez galement appliquer des filtresgraphiques grce la proprit : filter, vous donnez une valeur grayscale c'est un filtre sur leniveau de gris, sepia, c'est un effet sepia, invert c'est un effet ngatif, opacity c'est un effet detransparence. Vous donnez toujours une valeur comprise entre zro 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 effetd'ombre porte sur une image, sur du texte. Je vous ai mis un exemple de code source sur unlogo, avec diffrents effets, un effet sur les gris, grayscale, un effet blur sur le flou, et un effet

2 / 4

sepia sur une image, comme a vous avez votre image avec diffrents effet.Les masquesVous avez galement la proprit masque, donc les masques sont trs utiliss si vous tesdveloppeur ActionScript flash, vous avez utilis les masques ne serait-ce que pour faire dutexte dfilant avec une scroll barre ou une image pour des effets de ticket gratter, grce laproprit masque, vous pouvez faire un peu la mme chose, un masque avec une image png etdes pixels transparents tout simplement. Je vous ai mis un exemple de code source sur uneimage on lui a applique un masque, donc rutilisez ce code source un peu pour voir ce que apeut donner dans votre site internet, tout simplement.

Votre plan d'actions ! Comme d'habitude, je vous encourage utiliser ces nouvellespossibilits CSS3, dans le vido mettez sur pause, reprenez le code source, testez-le de votrect, comme d'habitude retrouvez un exemple de code source en tlchargement sous cecours vido, si vous avez des questions posez-les sous ce cours vido et moi je vous dis trsbientt sur Dveloppement Facile.

Tlchargez l'exemple CSS3Et voici un exemple de code avec les nouvelles possibilits CSS3.

Downloads

Code avec les nouvelles possibilits CSS3

Exemple CSS3 avec des transformations sur le texte.

Comment implmentez-vous les nouveauts CSS3?Partagez le code de vos plus belles ralisations CSS3 dans les commentaires ci-dessous.

3 / 4

Apprenez utiliser les nouvelles possibilits CSS3 - partie 3

Powered by TCPDF (www.tcpdf.org)

4 / 4