Share
Dans le didacticiel précédent, nous avions entrevu la création de formes CSS, ce qui nous permettait de définir la forme réelle d'un élément. Nous avons abordé les bases; en créant un cercle et en entourant quelques lignes de texte. Explorons maintenant des formes plus complexes, rendant nos mises en page plus riches et moins carrées..
Au-delà des formes simples comme les cercles et les rectangles, nous pouvons également créer des polygones; formes composées de plusieurs côtés (généralement cinq ou plus), comme un pentagone ou un hexagone. Pour en créer un, nous utilisons le CSS polygone() fonction qui prend plusieurs valeurs séparées par des virgules définissant les coordonnées de la forme:
Accentsconagua
.forme float: left; taille du fond: contenir; répétition de fond: non répétée; marge: 30px; largeur: 265px; hauteur: 265px; marge de forme: 20px; .pentagon background-image: url ('… /img/pentagon.svg'); forme extérieure: polygone (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Avec le code ci-dessus, nous avons ajouté cinq coordonnées, générant ainsi une forme de pentagone. Ajouter une autre coordonnée à la fonction transformera la forme en hexagone, une de plus pour un heptagone, une autre pour un octogone, etc..
Créer une forme de polygone manuellement n’est pas aussi facile que de créer un cercle ou une ellipse, en particulier si le polygone est complexe et comporte des dizaines de coordonnées. Heureusement, il existe un outil pratique qui rend la création de formes CSS plus intuitive.
CSS Shapes Editor est une extension Chrome. Une fois que vous l'avez installé, il ajoute un nouvel onglet nommé Formes dans DevTools sous le Éléments onglet, en ligne avec les autres sous-onglets (modes, Ordinateur, etc.)
le Formes onglet contient un forme extérieure bien jumelé avec un plus + signe pour nous aider à ajouter des fonctions CSS Shape. Choisissons le polygone() et l'élément de la page, nous pouvons alors commencer à dessiner la forme directement dans le navigateur, comme une application graphique.
Au fur et à mesure que nous dessinons, l’extension du navigateur mettra à jour notre fonction de polygone avec les coordonnées respectives de la forme dessinée, en l’ajoutant simultanément sous forme de style en ligne à l’élément. Une fois cela fait, copiez le code généré et collez-le dans votre feuille de style.
Coordonnées de polygone généréesEn utilisant cette même technique, nous pouvons facilement dessiner et appliquer n'importe quelle forme sur notre page Web, par exemple:
Image de Comment ajouter du drame à une scène pluvieuse avec Adobe PhotoshopUne autre valeur possible que nous pouvons utiliser dans le forme extérieure propriété est la url () une fonction; la même fonction que nous utilisons ailleurs dans CSS pour ajouter une image de fond. Dans ce cas, le url () fonction permet la forme extérieure propriété pour définir une forme d'élément basée sur l'image.
Vous pouvez choisir d'utiliser le url () fonction au lieu de polygone() lorsque vous avez un graphique particulièrement complexe, avec de nombreuses courbes et angles et que vous souhaitez que votre contenu s’enroule de manière fluide. Ou, lorsqu'il s'agit de contenu généré par l'utilisateur dans lequel définir la forme peut être délicat.
Nous allons utiliser ce perroquet Ara de Unsplash. Tout d'abord, vous devrez créer une version avec transparence, par exemple:
La forme de notre perroquet AraL'image de perroquet d'origine est ajoutée au conteneur en tant qu'image d'arrière-plan:
.conteneur background-repeat: no-repeat; background-image: url ('… /img/parrot.png'); Pour la forme elle-même, nous l'ajouterons à un autre élément du conteneur et cette fois, nous utiliserons une autre propriété CSS Shape appelée forme-image-seuil.
.forme forme-marge: 15px; shape-outside: url ('… /img/parrot-shape.png'); forme-image-seuil: 0; Cette propriété particulière définit le seuil de transparence minimale qui définit la forme de l'image. il faut un nombre entre 0 à 1 comme la valeur. Donc, si vous avez une image légèrement transparente, vous voudrez peut-être la régler sur 0.8 ou 0.5. Nous avons mis notre valeur à 0 puisque la zone entourant la forme du perroquet est complètement transparente.
Le résultat devrait ressembler à quelque chose comme:
La prise en charge du navigateur pour les formes CSS est correcte; Cependant, n'attendez pas beaucoup de Firefox, Internet, Explorer ou Edge. Aussi, en réponse à la question de Stephen dans le tutoriel précédent, nous avons plusieurs options.
«C’est une bonne question, mais sincère: quelle est la solution de repli pour IE / FF? Il semble que le fait de jouer à fond avec une mise en forme se retrouverait dans des endroits étranges pour de nombreux utilisateurs. »- Stephen Bateman
Premièrement, nous pouvons utiliser Modernizr. Modernizr est une bibliothèque JavaScript fiable pour le test des fonctionnalités du navigateur. Assurez-vous d'avoir inclus le Formes CSS et le Ajouter CSS classes option lors du téléchargement de la bibliothèque. Ensuite, vous pouvez spécifier les styles de mise en page lorsque CSS Shape n'est pas pris en charge, comme suit:
/ ** * Lorsque le navigateur ne supporte pas "CSS Shape". * / .no-formes .shape forme-dehors: polygone (); / ** * Styles lorsque le navigateur prend en charge "CSS Shape". * / .shapes .shape
Si le chargement de Modernizr vous semble trop, puisqu'il suffit de vérifier si le navigateur est compatible CSS, vous pouvez ajouter les lignes JavaScript suivantes.
if ('undefined' === typeof document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Chaque propriété en CSS vient avec son équivalent sous l'objet JavaScript Style, ce qui nous permet d'ajouter du style de manière dynamique via JavaScript. Ce code détecte si le navigateur a le forme en dehors méthode, alors où ce n'est pas le cas, nous ajoutons la pas-css-forme classe que nous pouvons utiliser pour ajouter les styles de secours.
.forme forme-extérieur: polygone (); .no-formes .shape
Enfin, nous pouvons utiliser le CSS @soutien syntaxe dans la feuille de style, par exemple.
@supports (forme-extérieur: cercle ()) .shape forme-extérieur: cercle ();
A vous de décider quelle approche correspond le mieux à votre projet.
Une grande chose à propos de CSS Shapes est qu’elle a un repli naturel. Pas trop grave. Avoir un carré. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@jensimmons) 11 février 2015
Dans ce tutoriel, nous avons découvert comment utiliser le polygone() fonction dans CSS Shape et appris comment dessiner facilement des polygones en utilisant une extension Chrome. Nous avons également appris à exploiter une image pour dessiner des formes pour nous. particulièrement utile avec des formes trop complexes. Enfin, malgré la prise en charge raisonnable des navigateurs CSS Shapes, nous avons envisagé d’utiliser des alternatives gracieuses pour les navigateurs non pris en charge..
