Share
Il est temps de passer de CSS3 à Photoshop, et cette fois-ci, nous allons creuser dans les transformations. Changer la forme d'un objet est une partie importante de la panoplie d'outils d'un éditeur graphique. De nos jours, avec CSS3, nous pouvons faire pivoter, redimensionner et incliner la forme d'un élément sans avoir besoin de Photoshop. Essayons!
Remarque: Tous les exemples suivants ont été testés sur Mozilla Firefox, Safari et Chrome. Si vous souhaitez obtenir quelque chose de similaire dans IE ou tout autre navigateur, laissez un commentaire et je serai heureux de vous aider..
Dans ce didacticiel, nous utiliserons des arrière-plans dégradés, des ombres par blocs et des images multiples ainsi que des effets de transition et des styles d'opacité et de transparence, sujets abordés dans les trois premiers tutoriels de cette série:
La rotation d'un élément est l'une des fonctionnalités les plus élémentaires de tout éditeur graphique. L'effet Rotation utilise une valeur de coordonnées radiales avec des angles compris entre 0 et 180 (positifs et négatifs). Un angle positif devient une rotation dans le sens des aiguilles d'une montre et un angle négatif signifie une rotation dans le sens inverse des aiguilles d'une montre..
Dans le passé, la rotation d'un élément en HTML était généralement très compliquée. Désormais, avec CSS3, tout est très simple:
Voici les syntaxes d'une transformation de rotation:
transformer: faire pivoter (
Définissez maintenant un ensemble de rotations d'angle différentes pour les sections HTML:
/ * Transforms * / / * Rotate 15 degrés * / .rotate15 -moz-transform: rotation (15deg); -webkit-transform: rotation (15deg); / * Rotate 45 degrés * / .rotate45 -moz-transform: rotation (45deg); -webkit-transform: rotation (45deg); / * Rotation -30 degrés * / .rotate-30 -moz-transform: rotation (-30deg); -webkit-transform: rotation (-30deg); / * Rotate 180 degrés (texte inversé) * / .rotate180 -moz-transform: rotation (180deg); -webkit-transform: rotation (180deg); / * Rotation 270 degrés (texte vertical) * / .rotate270 -moz-transform: rotation (270deg); -webkit-transform: rotation (270deg);
Comme vous pouvez le constater, la manière dont nous déterminons les transformations est identique à celle de Photoshop..
Une autre option de transformation de base que vous pouvez obtenir avec n’importe quel éditeur graphique est Scale. La mise à l'échelle est assez simple, elle augmente ou réduit la largeur et la hauteur de tout élément ou groupe d'éléments..
Avec CSS3, vous pouvez redimensionner les éléments à peu près de la même façon que dans Photoshop, les syntaxes à redimensionner le long des deux axes étant:
transformer: échelle (
transformer: scalex (
transformer: scaly (
Voyons quelques exemples:
/ * Échelle 50% * / .chale50 transformation -moz: échelle (0,50); -webkit-transform: scale (0,50); / * Échelle 120% * / .scale120 -moz-transform: scale (1.2); -webkit-transform: scale (1.2); / * Échelle de 25% à 75% sur: survol * /. Échelle 25-75 -moz-transform: scale (.25); -webkit-transform: échelle (0,25); -webkit-transition: tous les 1 sont faciles à installer; -moz-transition: tous les 1 s'installent facilement; .scale25-75: survol -moz-transform: scale (0,75); -webkit-transform: échelle (0,75); / * Échelle 50% largeur * / .scale50x -moz-transform: scalex (.50); -webkit-transform: scalex (.50); / * Échelle 50% de la hauteur * / .scale50y -moz-transform: scaley (.50); -webkit-transform: scaley (0,50);
Maintenant, voyez-le en marche:
Passons à une autre transformation très basique mais puissante: Skew. En modifiant un angle, vous pouvez déplacer les lignes parallèles d’une forme pour créer une illusion de perspective qui peut être utilisée comme effet 3D..
Avec CSS3, il est possible d'incliner une forme comme dans Photoshop, voyons quelques exemples:
/ * Skew * / / * Skew 30 degrés X en survol * / .skew30x -webkit-transition: tous les 1 s'installent lentement; -moz-transition: tous les 1 s'installent facilement; .skew30x: survol -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Incline 15 degrés X * / .skew15x -moz-transform: skewx (15deg); -webkit-transform: skewx (15deg); / * Inclinaison -15 degrés X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Inclinaison de 25 degrés Y * / .skew25y -moz-transform: asymétrique (25deg); -webkit-transform: skewy (25deg); / * Oblique -25 degrés Y * / .skew-25y -moz-transform: oblique (-25deg); -webkit-transform: skewy (-25deg);
Essayons de combiner les styles de transformation pour créer des effets radicaux:
/ * Combinaison de transformations * / .transformed -moz-transform: rotation (10deg) échelle (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: rotation (10deg) échelle (1.3) de biais (15deg) skewx (-30deg;
Vous trouverez ci-dessous quelques exemples amusants de ce que l’on peut obtenir avec des transformations. Nous commencerons par mes rendus Photoshop des conceptions, puis nous verrons si nous pouvons obtenir le même résultat avec CSS3 (vous pouvez télécharger la source PSD dans les fichiers de didacticiel)..
Tout d’abord, configurez quelques CSS généraux:
/ * Reset * / html, corps, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pré, formulaire, champs, table, th, td , img margin: 0; rembourrage: 0; bordure: 0px; en-tête, section, pied de page, côté, nav, article, figure display: block; / * Fin de réinitialisation * / / * Configuration de certains styles de base * / body font-family: Arial, Helvetica, sans-serif; couleur: # 333; html height: 100%; / * Pour ajouter un dégradé CSS3 au corps de page complet, vous devez définir cette hauteur sur 100% * / .wrapper margin: 0px auto; largeur: 960px; padding: 60px 0px 60px 0px; .left text-align: left; .right text-align: right; .center text-align: center; / * Arrière-plan du corps * / body hauteur: 100% ; / * Pour ajouter un dégradé CSS3 de corps de page complet, vous devez définir cette hauteur sur 100% * / background-repeat: no-repeat; image d'arrière-plan: -moz-linear-gradient (haut, # 0096f5, # 00416a); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0096f5) à (# 00416a), couleur-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Pour éviter d'avoir une bande vierge en bas, il y a quelques corrections * / / * pièce jointe à l'arrière-plan: fixed; * / / * Fonctionne sauf sur IE * / background-color: # 00416a; / * L'arrière-plan aura fière allure lors du défilement, en ajoutant la couleur du bas sur toute la page * / / * un style de base pour une colonne * / .row width: 50%; float: gauche; marge inférieure: 10px; hauteur: 340px; border-bottom: 1px en pointillé #FFF;
Dans le premier effet, nous avons un fan de trois divs et une étiquette de titre. L'astuce consiste ici à utiliser la propriété z-index pour organiser correctement le contenu.
La structure HTML:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Dénommez maintenant les divs et le titre:
/ * Boîte principale * / .box width: 190px; hauteur: 190px; couleur de fond: rgba (255,255,255, 0,85); / * Coins arrondis * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Se débarrasser de Bleed * / -moz-background-clip: padding; -webkit-background-clip: zone de remplissage; clip d'arrière-plan: padding-box; / * Définit la position * / position: relative; gauche: 0px; en haut: 0px; / * Affichez-le en haut * / z-index: 3; / * Un style de paragraphe de base * / .box p color: # 02263D; rembourrage: 10px; taille de police: 11px; hauteur de trait: 140%; / * Affichez-le également * / z-index: 3; / * Première couche translucide * / .box2 / * Définir la couleur d'arrière-plan avec RGBA * / background-color: rgba (255,255,255, .5); / * Définit la position * / left: 20px; en haut: -165px; / * Affiche un niveau derrière la boîte principale * / z-index: 2; / * Rotate Trabsform * / -moz-transform: rotation (15deg); -webkit-transform: rotation (15deg); / * Deuxième couche translucide * / .box3 / * Définit la couleur d'arrière-plan avec RGBA * / background-color: rgba (255,255,255, .25); / * Définit la position * / left: 30px; en haut: -325px; / * Affiche deux niveaux derrière la boîte principale * / z-index: 1; / * Rotate Trabsform * / -moz-transform: rotation (30deg); -webkit-transform: rotation (30deg); / * Titre vertical * / .title / * Styles de texte * / color: #FFF; text-transform: majuscule; taille de police: 14px; / * Définit la position * / position: relative; à gauche: -255px; en haut: -45px; / * Rotate Transform * / -moz-transform: rotation (-90 °) -webkit-transform: rotation (-90deg);
Vous pouvez indépendamment faire pivoter tous les éléments d'un élément HTML. Ceci, combiné aux effets de transition, peut être un excellent moyen d’ajouter de l’attention à certaines zones de vos conceptions. Prenons par exemple la maquette HTML suivante:
Faites maintenant pivoter l’image et le conteneur à différents angles (sens horaire et antihoraire) dans le :flotter pseudo classe.
/ * Style de boîte * / .box4 / * Largeur et remplissage * / width: 220px; hauteur: 220px; rembourrage: 10px; / * Couleur de fond translucide avec RGBA * / background-color: rgba (255,255,255, .85); / * Coins arrondis * / -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; / * Se débarrasser de Bleed * / -moz-background-clip: padding; -webkit-background-clip: zone de remplissage; clip d'arrière-plan: padding-box; / * Activer les effets de transition * / -webkit-transition: tous les 1 s'installent facilement; -moz-transition: tous les 1 s'installent facilement; transition: tous les 1 s'installent facilement; / * Définit les styles de l'image dans la section * / .box4 img / * Une belle bordure * / border: 1px solid #FFF; / * Une ombre de boîte pour ajouter un peu de sensation profonde * / boîte-ombre: 5px 5px 5px rgba (0,0,0,0,25); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0,25); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0,25); / * Activer les effets de transition * / -webkit-transition: tous les 1 s'installent facilement; -moz-transition: tous les 1 s'installent facilement; -o-transition: tous les 1 s'installent facilement; -ms-transition: tous les 1 s'installent facilement; transition: tous les 1 s'installent facilement; / * Rotation en survol * / .box4: survol / * Rotate -15deg CCW * / -moz-transform: rotation (-15deg); -webkit-transform: rotation (-15deg);
Passons les choses un peu plus loin. Avec Skew Transforms, vous pouvez donner une sorte de profondeur 3D à vos sections. Essayons de créer un moyen alternatif d'afficher un élément d'une médiathèque en utilisant un titre, une description et une balise vidéo HTML5.!
Commençons par la maquette HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Exemple de vidéo
Depuis un
Tout d'abord, configurez l'arrière-plan de la section conteneur. Le code suivant génère un dégradé brillant créant une sorte d’horizon pour simuler les éléments suivants..
/ * Définit le conteneur * / .row2 / * Ajuste la taille et la position * / width: 100%; hauteur: 650px; float: gauche; rembourrage en haut: 10px; / * Vous savez que vous pouvez redimensionner toute la section * / -moz-transform: scale (.90); -webkit-transform: scale (0,90); / * Appliquer un fond dégradé * / fond: -moz-linear-gradient (top, rgba (0,105,175,0) 0%, rgba (0,105,175,0,85) 35%, rgba (0,80,130,0,95) 35%, rgba ( 0,80,130,0) 100%); arrière-plan: -webkit-gradient (linéaire, en haut à gauche, en bas à gauche, à partir de (rgba (0,105,175,0)), couleur-stop (0,35, rgba (0,105,175,0,85)), couleur-stop (0,35, rgba (0,80, 130) , 0,95)), à (rgba (0,80,130,0)));
Définir les styles communs pour le texte.
/ * Styles communs (rien de très difficile ici) * / .top h2 font-size: 20px; couleur: #FFF; text-transform: majuscule; rembourrage: 25px; .side p font-size: 20px; couleur: #FFF; poids de police: normal; rembourrage: 10px;
Style maintenant le conteneur avant, les balises peuvent gérer presque tous les styles CSS connus et se comporter comme n'importe quel autre élément HTML de niveau bloc.
/ * Définissons le conteneur frontal * / .front / * Définit la position * / position: relative; à gauche: 220px; en haut: 132px; / * Dimensions * / largeur: 355px; hauteur: 200px; couleur de fond: #FFF; / * Transformée en Y en biais * / transformée -moz: en biais (20deg); -webkit-transform: skewy (20deg);
Maintenant la section latérale (peut être le résumé vidéo, ou un texte d'introduction.
/ * Définit le conteneur latéral * / .side / * Position (à côté du conteneur avant) * / position: relative; à gauche: 575px; en haut: -45px; largeur: 130px; hauteur: 200px; / * Définir un arrière-plan dégradé * / background-image: -moz-linear-gradient (left, # 000000, # 313131); background-image: -webkit-gradient (linéaire, 0% 0%, 100% 0%, de (# 000000) à (# 313131), couleur-stop (1, # 313131)); / * Inclinez-le * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Juste au cas où le texte est plus gros que le conteneur * / overflow: hidden;
Appelons le titre.
/ * Le titre * / .top / * Définit la Position * / position: relative; à gauche: 220px; en haut: -360px; largeur: 355px; hauteur: 75px; / * Un fond dégradé * / background-image: -moz-linear-gradient (left, # 000000, # 313131); background-image: -webkit-gradient (linéaire, 0% 0%, 100% 0%, de (# 000000) à (# 313131), couleur-stop (1, # 313131)); / * Incline pour faire correspondre la section avant * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Maintenant que nous avons les principaux divs à leur place, nous allons ajouter quelques "réflexions du sol" (divs avec un fond dégradé RGBA) juste pour donner à cette section un effet plus brillant..
.frontreflection / * Définit la position juste en dessous de la section avant * / position: relative; en haut: -147px; à gauche: 220px; largeur: 355px; hauteur: 200px; / * Inclinez-le pour qu'il corresponde à l'angle de perspective * / / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Définit le fond du dégradé (avec la couleur de fin inférieure transparente) * / background: -moz-linear-gradient (haut, rgba (182,182,182,1) 0%, rgba (182,182,182,0) 100%); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (rgba (182,182,182,1)) à (rgba (182,182,182,0))); / * Définissez l'opacité de votre choix * / opacity: 0.25; .sidereflection / * Définit la position juste en dessous de la section latérale * / position: relative; à gauche: 575px; en haut: -320px; largeur: 130px; hauteur: 200px; / * Correspond à l'angle de biais * / / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Définir le dégradé de fond * / background: -moz-linear-gradient (haut, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (rgba (10,10,10,1)) à (rgba (10,10,10,0)); / * Définir l'opacité * / opacity: 0.35;
Découvrez cette série d'exemples exécutés dans un navigateur:
Essayez vous-même et voyez ce que vous pouvez créer avec les options de transformation CSS3. Merci d'avoir lu!
Accentsconagua
