À mesure que les mises en page deviennent plus complexes, les développeurs doivent accéder à davantage d’unités de mesure pour donner vie aux conceptions. En plus des pourcentages habituels, em et rem, et pixels, il existe de nouvelles unités de mesure vw et vh, ainsi que leurs parents vmin et vmax, qui offrent des moyens plus puissants de créer une conception réactive qui peuvent souvent aider à éliminer l'utilisation de @media. points de transition.
Aller au-delà de l’utilisation de pourcentages
Les unités CSS traditionnelles créent les problèmes suivants dans la conception Web :
- L'unité de mesure en pourcentage ne fonctionne pas toujours comme prévu. Les développeurs doivent garder à l’esprit le remplissage lors du dimensionnement des éléments. Vous ne devez pas utiliser l'unité de pourcentage pour définir la hauteur de l'élément de corps. La notation font-size: 50% fixe la taille du texte à la moitié de sa taille standard, plutôt que d'établir une relation entre la taille du texte et la taille de l'élément le contenant.
- Il est presque impossible de créer des formes parfaitement adaptées à différentes tailles de fenêtres de navigateur. Il est très difficile de garantir qu'un élément soit parfaitement carré et en même temps adaptatif.
Les unités de mesure vw et vh résolvent en grande partie tous ces problèmes.
Maintenir des proportions idéales
En utilisant les unités vw et vh, il est très facile de créer des formes parfaites sur des pages Web. Ces unités peuvent être utilisées pour définir des valeurs de dimensionnement pour presque toutes les propriétés CSS. Par conséquent, si vous devez créer un élément qui, quelle que soit la taille de la fenêtre du navigateur, occupe 20 % de sa largeur et reste carré, vous devez définir les mêmes valeurs pour les propriétés width et height, en utilisant l'unité vw :
Div.twentysquare ( arrière-plan : # 999 ; largeur : 20vw ; hauteur : 20vw ; )
Voir une démo de cet exemple ci-dessous, suivez le lien et essayez de redimensionner la fenêtre pour voir les formes changer de taille.
En utilisant la même méthode, vous pouvez facilement créer un rectangle dont la hauteur est deux fois sa largeur quelle que soit la taille de la fenêtre du navigateur :
Div.onetworect ( largeur : 20vw; hauteur : 40vw; )
Donner à votre bannière le rapport hauteur/largeur idéal est très simple avec le code CSS suivant :
Div.goldenrect (largeur : 100vw ; hauteur : 61,8vw ; fond : rouge ;)
Pour redimensionner de manière optimale le texte dans un bloc adaptatif, occupant tout l'espace qui lui est fourni, décomposé en lignes, il vous suffit de définir la taille de la police en unités vw.
Traduction – Salle de garde
Vlad Merjevitch
Sur les sites Web, les triangles sont souvent utilisés dans la conception d’éléments ; par exemple, ils servent de pointeur vers un objet, dirigeant l’attention du lecteur vers le bon endroit. Les triangles remplissent également des fonctions décoratives, rendant les blocs où ils sont utilisés plus élégants et modernes. En figue. La figure 1 montre un exemple d'utilisation d'un triangle dans un dessin.
Riz. 1. Triangles dans la conception Web
Vous ne pouvez pas créer directement un triangle à l'aide de CSS, il existe donc deux méthodes disponibles pour l'ajouter : via border et transform .
Utiliser la bordure
Bien que les bordures créées via la propriété border ne soient pas directement liées aux triangles, border est la bordure la plus couramment utilisée à cette fin. Si nous définissons la largeur et la hauteur de l'élément à zéro, ainsi qu'une bordure suffisamment épaisse, nous verrons un ensemble de quatre triangles (Fig. 2). Pour plus de clarté, les bordures de tous les côtés sont de couleurs différentes.
Riz. 2. Ajouter une bordure à un élément
En ne laissant que la bordure souhaitée et en rendant le reste transparent, nous obtiendrons un triangle de la couleur souhaitée (Fig. 3).
Riz. 3. Élément avec bordures transparentes
L'exemple 1 montre comment ajouter un triangle à un bloc en utilisant le pseudo-élément ::after.
Exemple 1. Bloc avec un triangle
Pour les éléments positionnés de manière absolue, une largeur et une hauteur nulles ne sont pas requises.
En combinant les limites, vous pouvez obtenir quatre autres types de triangles qui, en combinaison avec ceux déjà mentionnés, nous donnent huit options. Leur type et leur code requis sont indiqués dans le tableau. 1.
| Voir | Style |
|---|---|
| bordure : 20 px solide transparente ; bordure supérieure : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure droite : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure inférieure : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure gauche : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure supérieure : 20 px, vert uni ; bordure droite : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure droite : 20 px, vert uni ; bordure inférieure : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure inférieure : 20 px, vert uni ; bordure gauche : 20 px, vert uni ; | |
| bordure : 20 px solide transparente ; bordure gauche : 20 px, vert uni ; bordure supérieure : 20 px, vert uni ; |
Le tableau montre que les bordures invisibles prennent de la place, tenez-en compte lors du positionnement des éléments. Le style doit également être complété par une largeur et une hauteur nulles ou utiliser la propriété position, comme cela a été fait dans l'exemple 1.
Le triangle peut prendre d'autres formes si vous définissez différentes épaisseurs de bordure. Ainsi, le code pour créer le bloc illustré à la Fig. 4, montré dans l'exemple 2.
Riz. 4. Triangle pointu
Exemple 2. Triangle aigu
En utilisant la bordure, nous obtenons des triangles de couleur unie pour créer le cadre illustré à la Fig. 5, il faut utiliser une astuce et mettre un élément sur l'autre avec un léger décalage. Encore une fois, les pseudo-éléments :before et :after nous aideront ici (exemple 3).
Riz. 5. Cadre avec coin
Exemple 3 : superposition de triangles
Étant donné que nous superposons un élément de couleur unie sur un autre, cette méthode ne convient qu'aux remplissages de couleur unie et ne convient pas aux dégradés ou aux images d'arrière-plan.
Utiliser la transformation
En utilisant la transformation, nous pouvons faire pivoter un élément carré de 45º et en obtenir un losange. Ce n'est pas encore un triangle en tant que tel, nous laissons donc la partie saillante dont nous avons besoin bien en vue et cachons le reste derrière un autre élément (exemple 4).
Exemple 3 : Transformation
Le résultat de cet exemple est présenté sur la Fig. 6.
Riz. 6. Triangle avec ombre
Problème
Le recadrage des images en forme de losange est une technique de conception visuelle courante, mais sa mise en œuvre en CSS est loin d'être simple. En fait, jusqu’à récemment, cela était presque impossible.
Par conséquent, pour concrétiser leurs idées, les concepteurs ont dû d'abord recadrer les images requises dans un éditeur graphique. Bien entendu, il va sans dire que ce type d'effet entraîne d'énormes difficultés dans la maintenance du site Web et garantit une confusion à l'avenir si quelqu'un souhaite modifier le style des images. Nous devrions sûrement avoir une meilleure solution maintenant. En fait, il existe deux méthodes !
Solution basée sur la transformation
L'idée de base est la même que dans la première solution du secret précédent (voir le secret « Parallélogramme » ci-dessus) : nous devons envelopper notre image dans
HTML
.image(
largeur : 400 px ;
transformation : rotation (45 degrés) ;
débordement caché;
}
.image > img (
largeur maximale : 100 % ;
transformation : rotation (-45 deg );
}
Cependant, comme vous pouvez le voir sur la photo, nous n'avons pas pu obtenir immédiatement la stylisation requise. Bien sûr, si vous envisagez de recadrer l'image en forme octogonale, vous pouvez dire que le travail est terminé et passer à autre chose. Mais pour recadrer l'image à la forme d'un diamant, vous devrez travailler plus dur.
Les transformations rotation() opposées ne suffisent pas pour obtenir l'effet souhaité (le div avec le nom.image est indiqué par un contour en pointillés)
Le principal problème réside dans la déclaration max-width: 100%. 100% s'applique à notre côté conteneur.photo. Cependant, nous voulons que la largeur de l’image résultante soit égale à la diagonale de l’original, et non à son côté. Vous avez déjà deviné que nous avons encore besoin de l'aide du théorème de Pythagore (si vous avez besoin de vous rafraîchir la mémoire, vous trouverez l'explication en secret). Comme l’indique le théorème, la diagonale d’un carré est égale à son côté multiplié par 
.
Par conséquent, il est logique de définir une valeur de largeur maximale de 2 × 100 % ≈ 141,4213562 % ou, arrondie, 142 %, puisque nous ne voulons en aucun cas que l'image devienne plus petite (et si elle s'avère un peu plus grande, alors tout va bien puisque nous le coupons de toute façon).
En fait, il est encore mieux d'agrandir l'image à l'aide de la transformation scale(), pour deux raisons : nous voulons que la taille de l'image reste à 100 % dans les situations où les transformations CSS ne sont pas prises en charge ;
Lorsqu'une image est agrandie à l'aide de la transformation scale(), elle est mise à l'échelle à partir du centre (sauf si une valeur d'origine de transformation différente est spécifiée). Si vous l'augmentez en modifiant la valeur de la propriété width, elle sera mise à l'échelle à partir du coin supérieur gauche et pour la déplacer, nous devrons utiliser des valeurs de marge négatives. En mettant le tout ensemble, nous obtenons ce code final :
.image(
largeur : 400 px ;
transformation : rotation (45 degrés) ;
débordement caché;
}
.image > img (
largeur maximale : 100 % ;
transformation : rotation (-45 degrés) échelle (1,42 );
}
Comme vous pouvez le voir sur la photo, cela nous donne enfin le résultat souhaité.
ESSAYEZ-LE VOUS-MÊME !
http://play.csssecrets.io/diamond-images
Solution de chemin de détourage
La solution précédente fonctionne, mais constitue en soi un sale tour. Cela nécessite un élément HTML supplémentaire, ce qui signifie que c'est une solution compliquée, déroutante et fragile : si nous devons traiter des images non carrées, le résultat sera désastreux.
En réalité, il existe une bien meilleure façon d’obtenir le résultat souhaité. L'idée principale est d'utiliser la propriété chemin de détourage- une autre fonctionnalité empruntée à SVG. Cette propriété peut désormais être appliquée au contenu HTML (au moins dans les navigateurs compatibles) et dans une syntaxe agréable et lisible, contrairement à son équivalent SVG, connu pour rendre les gens fous.
Il n'a qu'un seul inconvénient (au moment de la rédaction de ce chapitre) : une prise en charge limitée du navigateur. Cependant, cette solution revient gracieusement à un rendu simplifié (sans découpage), elle mérite donc d'être prise en considération. Il y a de fortes chances que vous soyez déjà familier avec les chemins de détourage grâce aux applications de retouche d'images comme Adobe Photoshop. Les chemins de détourage vous permettent de découper un élément dans la forme de votre choix. Dans ce cas, nous allons utiliser la forme polygon().
Nous allons définir un losange, mais en général cette forme permet de définir n'importe quel polygone par une séquence de points séparés par des virgules. Vous pouvez même utiliser des pourcentages - les valeurs totales seront calculées par rapport aux dimensions globales de l'élément. Le code est très simple :
chemin de détourage : polygone (50 % 0, 100 % 50 %, 50 % 100 %, 0 50 %) ;
Croyez-le ou non, c'est tout ! Mais au lieu de deux éléments HTML et de huit lignes de code CSS déroutant, nous avons obtenu ce que nous voulions avec une seule ligne simple. Mais les merveilleuses capacités de clip-path ne se limitent pas à cela. Cette propriété prend même en charge l'animation - à condition que nous animions la transition entre deux fonctions de forme identiques (dans notre cas polygon()) avec le même nombre de points. Ainsi, si nous voulons agrandir en douceur l’image complète au survol de la souris, cela peut être fait de cette façon :
img(
chemin de détourage : polygone (50 % 0, 100 % 50 %,
50% 100%, 0 50%);
transition : chemin de clip 1 s ;
}
img: survol (
chemin de détourage : polygone (0 0, 100 % 0,
100% 100%, 0 100%);
}
De plus, cette méthode s'adapte bien aux images non carrées, ah, les joies du CSS moderne...
ESSAYEZ-LE VOUS-MÊME !
Générateur CSS3 en ligne pour créer des effets graphiques sympas et obtenir leur code CSS. Vous pouvez modifier séparément les styles pour différents états tels que :hover, :active, etc. Vous obtenez une interface pour créer des ombres complexes, des dégradés, des effets 3D, des effets de texte et bien plus encore. Le projet possède sa propre galerie d'effets à partir de laquelle vous pouvez commencer votre développement. L'avantage du projet est que vous pouvez obtenir des styles pour un seul élément, comme une ombre ou un dégradé.
Lors de notre première visite sur le site, il nous est proposé de créer un modèle pour un champ de saisie, un bouton, un bloc ou de sélectionner un modèle prêt à l'emploi dans la galerie de projets. Commençons par quelque chose de simple, comme une galerie de formes géométriques. Sélectionnez le signe Yin-Yang dans la galerie et cliquez sur « Obtenir le code » dans le coin supérieur droit :
On nous montrera du CSS prêt à l'emploi pour le développement en cours, ainsi qu'un exemple de code HTML. Dans la galerie de projets, vous trouverez plus de 20 modèles pour différentes formes CSS et, bien sûr, vous pouvez créer les vôtres.
Après avoir fouillé les sections de la galerie, nous voyons des boutons, des champs de texte, des effets directement pour le texte, les formes et les jeux de dégradés mentionnés ci-dessus. Jouons avec les effets de texte :
site Web - wow, c'est en 3D !
Je dois dire que le CSS généré est étonnamment très propre et lisible, ce qui est très agréable. Regardons un joli bouton :
site web de boutons sympas
Les fonctionnalités supplémentaires incluent la sauvegarde de votre état dans le stockage local du navigateur. Si vous fermez accidentellement l'onglet, la prochaine fois que vous accéderez au site, toutes vos modifications resteront avec vous.
Lorsque vous utilisez des polices personnalisées avec Google Fonts, EnjoyCSS les ajoute automatiquement à l'exemple HTML. Dans mon cas, pour le texte et le bouton, cela ressemble à ceci :
Le CSS final est assez volumineux, je le présente donc uniquement à la fin de l'article :
Yin-Yang (
flotteur : gauche ;
largeur : 96 px ;
hauteur : 48px ;
position : relative ;
bordure : 2px solide #f81 ;
largeur de bordure inférieure : 50 px ;
-webkit-border-radius : 100 % ;
rayon de bordure : 100 % ;
couleur : rgba(0,0,0,1) ;
-o-text-overflow : clip ;
débordement de texte : clip ;
-webkit-transform : rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
transformation : rotationZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
origine de transformation : 50 % 50 % 0 ;
Yin-yang ::avant (
largeur : 12px ;
hauteur : 12px ;
position : absolue ;
contenu: "";
haut : 50 % ;
gauche : 0 ;
bordure : 18px solide #f81 ;
-webkit-border-radius : 100 % ;
rayon de bordure : 100 % ;
police : normale normale normale 100 %/normale Arial, Helvetica, sans-serif ;
couleur : rgba(0,0,0,1) ;
-o-text-overflow : clip ;
débordement de texte : clip ;
arrière-plan : rgba(255,255,255,1) ;
texte-ombre : aucun ;
-webkit-transform-origin : 50 % 50 % 0 ;
origine de transformation : 50 % 50 % 0 ;
}
Yin-yang ::après (
largeur : 12px ;
hauteur : 12px ;
position : absolue ;
contenu: "";
haut : 50 % ;
gauche : 50 % ;
bordure : 18px rgba solide (255,255,255,1) ;
-webkit-border-radius : 100 % ;
rayon de bordure : 100 % ;
police : normale normale normale 100 %/normale Arial, Helvetica, sans-serif ;
couleur : rgba(0,0,0,1) ;
-o-text-overflow : clip ;
débordement de texte : clip ;
arrière-plan : #f81 ;
texte-ombre : aucun ;
-webkit-transform : scaleX(1) scaleY(1) scaleZ(1) ;
transformation : scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin : 50 % 50 % 0 ;
origine de transformation : 50 % 50 % 0 ;
}
Profitez-css-3dtext (
curseur : pointeur ;
bordure : aucune ;
police : normal normal normal 72px/normal "Passero One", Helvetica, sans-serif ;
couleur : rgba (255,255,255,1) ;
alignement du texte : centre ;
-o-text-overflow : clip ;
débordement de texte : clip ;
texte-ombre : 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,1 70) , 0 6px 1px rgba(0 ,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0, 0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition : tous les 300 ms de bézier cubique (0,42, 0, 0,58, 1 );
-moz-transition : tous les 300 ms cubique-bézier (0,42, 0, 0,58, 1 );
-o-transition : tous les 300 ms de bézier cubique (0,42, 0, 0,58, 1 );
transition : tous les 300 ms cube-bézier (0,42, 0, 0,58, 1) ;
-webkit-transform : scaleX(1) scaleY(1) scaleZ(1) ;
transformation : scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin : 50 % 50 % 0 ;
origine de transformation : 50 % 50 % 0 ;
}
Enjoy-css-3dtext: survol (
couleur : rgba(169,214,169,1) ;
Text-shadow: 0 1px 0 rgba (255,255,255,1), 0 2px 0 rgba (255,255,255,1), 0 3px 0 rgba (255,255,255,1), 0 4px 0 rgba (2 55 255 255 ,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba (0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0 , 0,0,14902) ;
-webkit-transition : tous les 200 ms cubique-bézier (0,42, 0, 0,58, 1) 10 ms ;
-moz-transition : tous les 200 ms cubique-bézier (0,42, 0, 0,58, 1) 10 ms ;
-o-transition : tous les 200 ms cubique-bézier (0,42, 0, 0,58, 1) 10 ms ;
transition : tous les 200 ms cube-bézier (0,42, 0, 0,58, 1) 10 ms ;
}
Bouton de commentaires (
affichage : bloc en ligne ;
flotteur : gauche ;
position : relative ;
curseur : pointeur ;
marge : 0 2% 0 0 ;
remplissage : 12px 22px ;
débordement caché;
bordure : aucune ;
police : normal normal gras 1,6em/normal "Syncopate", Helvetica, sans-serif ;
couleur : #ecf0f1 ;
-o-text-overflow : clip ;
débordement de texte : clip ;
-kit Web-
background-origin : padding-box ;
clip d'arrière-plan : bordure-boîte ;
taille de l'arrière-plan : auto auto ;
-webkit-box-shadow : 0 10px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
texte-ombre : 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196,80,78 ) , 4px 4px 0 RVB(196,80,78) , 5px 5px 0 RVB(196,80,78) , 6px 6px 0 RVB(196,80,78) , 7px 7px 0 RVB(196,80,78) , 8px 8px 0 RVB(196,80,78) , 9px 9px 0 RVB(196,80,78) , 10px 10px 0 RVB(196,80,78) , 11px 11px 0 RVB(196,80,78) , 12px 12px 0 RVB (196,80,78) , 13px 13px 0 RVB (196,80,78) , 14px 14px 0 RVB (196,80,78) , 15px 15px 0 RVB (196,80,78) , 16px 16px 0 RVB (196,80,78) , 17px 17px 0 RVB(196,80,78) , 18px 18px 0 RVB(196,80,78) , 19px 19px 0 RVB(196,80,78) , 20px 20px 0 RVB(196 ,80,78) , 21px 21px 0 RVB(196,80,78) , 22px 22px 0 RVB(196,80,78) , 23px 23px 0 RVB(196,80,78) , 24px 24px 0 RVB(196,80) ) ,78) , 25px 25px 0 RVB(196,80,78) , 26px 26px 0 RVB(196,80,78) , 27px 27px 0 RVB(196,80,78) , 28px 28px 0 RVB(196,80, 78) ) , 29px 29px 0 RVB(196,80,78) , 30px 30px 0 RVB(196,80,78) , 31px 31px 0 RVB(196,80,78) , 32px 32px 0 RVB(196,80,78) ) , 33px 33px 0 RVB(196,80,78) , 34px 34px 0 RVB(196,80,78) , 35px 35px 0 RVB(196,80,78) , 36px 36px 0 RVB(196,80,78) , 37px 37px 0 RVB(196,80,78) , 38px 38px 0 RVB(196,80,78) , 39px 39px 0 RVB(196,80,78) , 40px 40px 0 RVB(196,80,78) , 41px 41px 0 RVB (196,80,78) , 42px 42px 0 RVB(196,80,78) , 43px 43px 0 RVB(196,80,78) , 44px 44px 0 RVB(196,80,78) , 45px 45px 0 RVB (196,80,78) , 46px 46px 0 rgb(196,80,78) , 47px 47px 0 rgb(196,80,78) , 48px 48px 0 rgb(196,80,78) , 1px 1px 0 rgba(196 ,80) ,78,0.980392) , 2px 2px 0 rgba(196,80,78,0.960784) , 3px 3px 0 rgba(196,80,78,0.941176) , 4px 4px 0 rgba(196,80,78,0.921569) , 5px 5px 0 rgba(196,80,78,0.901961) , 6px 6px 0 rgba(196,80,78,0.882353) , 7px 7px 0 rgba(196,80,78,0.862745) , 8px 8px 0 rgba(196, 80,78 , 0.843137), 9px 9px 0 RVBA (196,80,78,0.819608), 10PX 10PX 0 RVBA (196,80,78.0.8), 11PX 11PX 0 RVBA (196.80.78.0.780392), 12PX 12PX 0 RVBA (196,80,78,0.760784), 13PX 13PX 0 RVBA (196,80,78,0.741176), 14PX 14PX 0 RVBA (196,80,78,0.721569), 15PX 15PX 0 RVBA (196.80.78,0.701961 ) , 16px 16px 0 rgba(196,80,78,0.682353) , 17px 17px 0 rgba(196,80,78,0.658824) , 18px 18px 0 rgba(196,80,78,0.639216) , 19px 19px 0 rgba(1 9 6 ,80,78,0.619608) , 20px 20px 0 rgba(196,80,78,0.6) , 21px 21px 0 rgba(196,80,78,0.580392) , 22px 22px 0 rgba(196,80,78,0.560784) , 23PX 23PX 0 RGBA (196,80,78,0.541176), 24px 24px 0 RGBA (196,80,78,0.521569), 25px 25px 0 RGBA (196,80,78,0.498039), 26px 26px 0 RGBA (196,8,8 0 ,78,0.478431) , 27px 27px 0 rgba(196,80,78,0.458824) , 28px 28px 0 rgba(196,80,78,0.439216) , 29px 29px 0 rgba(196,80,78,0. 419608), 30px 30px 0 RVBA (196,80,78,0.4), 31px 31px 0 RVBA (196,80,78,0.380392), 32px 32px 0 RVBA (196.80.78.0.360784), 33PX 33PX 0 RVBA ( 196, 80,78,0.341176) , 34px 34px 0 rgba(196,80,78,0.317647) , 35px 35px 0 rgba(196,80,78,0.298039) , 36px 36px 0 rgba(196,80,78,0.278431 ) , 37px 37px 0 rgba(196,80,78,0.258824) , 38px 38px 0 rgba(196,80,78,0.239216) , 39px 39px 0 rgba(196,80,78,0.219608) , 40px 40px 0 rgba(196 , 80, 78,0.2) , 41px 41px 0 rgba(196,80,78,0.180392) , 42px 42px 0 rgba(196,80,78,0.156863) , 43px 43px 0 rgba(196,80,78,0.137255) , 44px 44PX 0 RVBA (196,80,78,0,117647), 45PX 45PX 0 RVBA (196,80,78,0,0980392), 46PX 46PX 0 RVBA (196,80,78,0,0784314), 47PX 47PX 0 RVBA (196,80, 78,0,0588 235) , 48px 48px 0 rgba(196,80,78,0.0392157) , 50px 50px 0 rgba(196,80,78,0) ;
-webkit-transform : scaleX(1) scaleY(1) scaleZ(1) ;
transformation : scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin : 50 % 50 % 0 ;
origine de transformation : 50 % 50 % 0 ;
}
Bouton de feedback : survol (
alignement du texte : centre ;
arrière-plan : -webkit-linear-gradient (-90deg, #ce6161 0, #ef6664 100 % );
arrière-plan : -moz-linear-gradient (180deg, #ce6161 0, #ef6664 100 % );
arrière-plan : dégradé linéaire (180 deg, #ce6161 0, #ef6664 100 % );
position d'arrière-plan : 50 % 50 % ;
background-origin : padding-box ;
-webkit-background-clip : bordure-boîte ;
clip d'arrière-plan : bordure-boîte ;
-webkit-background-size : auto auto ;
taille de l'arrière-plan : auto auto ;
}
Bouton de feedback : actif (
haut : 5px ;
arrière-plan : -webkit-linear-gradient (-90deg, #ff8583 0, #ff5350 100 % );
arrière-plan : -moz-linear-gradient (180deg, #ff8583 0, #ff5350 100 % );
arrière-plan : dégradé linéaire (180 degrés, #ff8583 0, #ff5350 100 % );
position d'arrière-plan : 50 % 50 % ;
-webkit-background-origin : boîte de remplissage ;
background-origin : padding-box ;
-webkit-background-clip : bordure-boîte ;
clip d'arrière-plan : bordure-boîte ;
-webkit-background-size : auto auto ;
taille de l'arrière-plan : auto auto ;
-webkit-box-shadow : 0 5px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
Salut tout le monde. Aujourd'hui, nous aborderons un sujet assez inhabituel, à savoir l'avenir du web design, les formes CSS.
Comme vous le savez, il est désormais très à la mode, mais il se compose principalement de rectangles, qui, à leur tour, limitent considérablement les horizons des designers. Et puis il y a l’adaptabilité. Ce qui est très limitant en terme de créativité. Mais il y a un énorme avantage ici : il est facile d'enrouler du texte autour d'un rectangle, mais il est plus difficile de faire circuler le texte autour de formes rondes ou inégales. Parce que les images ne peuvent pas être rondes.
Dans ce cas précis, les chiffres viennent à notre secours. Le populaire site CSS du W3C a publié la première documentation sur les formes. Voici cet article en anglais CSS Shapes Module Niveau 1. Ce module a été récemment publié le 20 juin. Jusqu'à présent, il s'agit d'une version bêta, qui inclut des formes telles que le rectangle, le triangle, l'ellipse, le cercle et le polygone.
Examinons maintenant de plus près quel est l'avantage des formes CSS à l'aide d'un exemple.
Tout d’abord, prenons un balisage HTML simple, grâce à http://www.webdesignerdepot.com :
Ceci est un exemple de texte