Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants

Créer des commandes d'utilisateurs uniques et une navigation avec des formes CSS

Alignant horizontalement ou verticalement, il s'agit de l'ordre traditionnel des commandes utilisateur à l'écran, tout comme une liste d'éléments de menu. Mais que se passe-t-il si nous le changeons en une disposition plus fluide qui comprend des virages, des courbes et des rainures? Il ne faut que quelques lignes de code pour y parvenir. À l'ère de la conception minimaliste moderne, la disposition incurvée des commandes d'utilisateurs ajoute juste la bonne quantité de vitalité à la conception Web.

Grâce aux formes CSS, le codage est extrêmement simple.

Les formes CSS (en particulier shape-outside ) sont une norme qui attribue la géométrie aux éléments flottants. Le contenu entoure ensuite les éléments flottants le long des limites de ces formes.

Ce cas d'utilisation standard est souvent présenté comme une conception de textes, de contenu édité - le texte en plaine s'écoule le long de sa forme flottante sur ses côtés. Cependant, dans ce post, nous utilisons des contrôles utilisateur au lieu du texte brut pour voir comment ces formes injectent des contours lisses dans leur disposition.

La première démonstration est une conception qui peut être utilisée dans la page du produit, où les commandes de fonctionnement liées au produit peuvent être alignées le long de la forme du produit lui-même.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343279003.png" class="lazy" alt="Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants">
<div>
  <label for="one">Une bouteille</label>
</div>
<div>
  <label for="six">Six pack</label>
</div>
<div>
  <label for="twelve">Pack de douze</label>
</div>
<div>
  <label for="crate">Caisse entière</label>
</div>

img {
  Hauteur: 600px;
  flottant: à gauche;
  Forme-Out-Out: URL ("Bottle.png");
  Filtre: luminosité (1,5);
}
saisir {
  -Webkit-apparence: aucun;
  Apparence: aucun;
  Largeur: 25px;
  hauteur: 25px;
  marge-gauche: 20px;
  Dimensionnement en boîte: contenu-box;
  Border: 10px solide https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B231714;
  Border-Radius: 50%;
  CONTEXTE: GRADIÉ LINÉAIRE (45 degrés, rose, beige);
  curseur: pointeur;
}

L'image de la bouteille flotte vers la gauche et utilise shape-outside pour donner des limites de forme. L'image elle-même est utilisée comme référence pour les formes.

Remarque: seules les images avec des arrière-plans transparentes peuvent générer des formes en fonction du contour de l'image.

Le style par défaut du bouton radio est remplacé par un style personnalisé. Une fois que le navigateur applique la forme à l'image flottante, les boutons radio sont automatiquement alignés le long de la forme de la bouteille.

De cette façon, nous n'avons pas à prendre la peine d'attribuer des positions à chaque bouton radio individuellement pour créer une telle conception. Tous les boutons ajoutés par la suite s'aligneront automatiquement avec les boutons précédents en fonction de la forme de la bouteille.

Voici un autre exemple, inspiré par la page d'accueil de Wikipedia. Ceci est un exemple parfait du type de disposition du menu principal non conventionnel que nous envisageons.

Il est facile de mettre en œuvre avec shape-outside :

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Formation</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Atmosphère</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Chaleur</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Gravitation</a>
  </div>
</div>
<div class="right">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Lune</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Climat</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rotation</a><br> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Orbite</a>
  </div>
</div>

img {
  hauteur: 250px;
  flottant: à gauche;
  Forme-Out-Out: cercle (40%);
}

Main> Div {Grid-Area: 1/1;}; 

.Right {Transform: Rotatey (180Deg) Translatex (250px);

.Right> a { 
  Affichage: bloc en ligne; 
  Transform: Rotatey (180Deg) Translatex (-40px); 
}

Main> Div: Nth of-Type (2) IMG {Visibilité: Hidden;

Les éléments ne peuvent flotter que vers la gauche ou la droite. Il n'y a pas d'élément flottant central et le contenu entoure les deux côtés. Pour atteindre la conception où le lien entoure les deux côtés de l'image, j'ai créé deux ensembles de liens et renversé l'un d'eux horizontalement. J'ai utilisé la même image avec la valeur de forme circle() CSS dans les deux groupes, donc la forme correspond même après rotation. Le texte de liaison du groupe FLIP sera affiché dans un côté à l'envers, il est donc tourné en arrière.

Bien que deux images puissent être superposées les unes aux autres sans débordement visible, il est préférable d'en cacher l'un en utilisant opacity ou visibility .

Le troisième exemple est dû à l'utilisation d'éléments HTML dynamiques<details></details> Et ça a l'air un peu vivant. Cette démonstration est un excellent exemple de conception qui affiche des informations supplémentaires sur les produits, etc., qui est cachée par défaut des utilisateurs.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343437928.png" class="lazy" alt="Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants">
<details>
  <summary>Cliquez pour en savoir plus!</summary>
  <ul>
    <li>Le diamant est maintenant connu sous le nom de Sancy</li>
    <li>Il comprend deux couronnes consécutives</li>
    <li>C'est probablement d'origine indienne</li>
  </ul>
</details>

img {
  hauteur: 200px;
  flottant: à gauche;
  Forme-Outside: URL ("Diamond.png");
  marge de forme: 20px;
}
résumé {
  Contexte: rouge;
  Couleur: blanc;
  curseur: pointeur;
  Police-poids: Bold;
  Largeur: 80%; 
  hauteur: 30px;
  hauteur de ligne: 30px;
}

L'image flotte vers la gauche et donne la même forme CSS que l'image. shape-margin ajoute un espace de marge autour de la forme attribuée à l'élément flottant. Lorsque vous cliquez<summary></summary> Lorsque l'élément est, le parent<details></details> L'élément affiche son contenu, qui entoure automatiquement la forme de l'image en diamant flottante.

<details></details> Le contenu d'un élément ne doit pas être une liste comme il l'a fait dans la démo. Tout contenu incliné sera enroulé autour de la forme de l'image flottante.

Le dernier exemple utilise des formes de polygone au lieu d'images ou de formes simples (comme les cercles et les ovales). En ajoutant une autre coordonnée à la forme, le polygone peut être facilement plié, ce qui entraîne une géométrie plus inclinée.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343443133.png" class="lazy" alt="Utilisation de formes CSS pour les contrôles et navigation des utilisateurs intéressants">
<div>
  <ul>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Maison</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projets</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Boutique</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Médias</a></li>
  </ul>
</div>

div {
  Largeur: 0;
  hauteur: 0;
  --D: 200px;
  Border-droite: var (- d) Solide transparent;
  Bordure-fond: var (- d) solide transparent;
  bordure-gauche: var (- d) rouge massif;
  flottant: à gauche;
  Forme-Outside: Polygone (0 0, var (- D) 0, 0 var (- D));
}
ul {
  Style de liste: aucun;
  Tableau de rembourrage: 25px;
}

Utilisez les propriétés de la frontière pour créer un triangle rouge flottant vers la gauche. Pour créer une forme de triangle CSS qui correspond au triangle rouge, nous utilisons la fonction polygon comme valeur de shape-outside . La valeur de polygon() est les trois coordonnées du triangle, séparées par des virgules. Les liens sont automatiquement alignés autour du triangle flottant, formant une disposition de menu inclinée le long des bords diagonaux du triangle.

Comme vous pouvez le voir, même pour une simple disposition diagonale des commandes des utilisateurs, les formes CSS font un excellent travail pour ajouter une certaine vitalité à la conception. L'utilisation de formes CSS est bien meilleure que la rotation d'une rangée de commandes d'utilisateurs - l'alignement des commandes et du texte individuels tournera également, entraînant des exceptions de mise en page. En revanche, la forme CSS organise simplement des commandes individuelles le long de la limite de forme fournie.

Veuillez noter que dans l'exemple de code ci-dessus, le chemin d'image doit être remplacé par le chemin d'image réel. J'ai fait de mon mieux pour conserver la signification d'origine et j'ai fait des synonymes et des phrases ajustées à certaines phrases pour réaliser un effet pseudo-original.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!