Décorations d'image fantaisie: magie à un seul élément

Cet article explore les techniques créatives de décoration d'image en utilisant uniquement la balise img et CSS, une entreprise difficile mais enrichissante. Oubliez un balisage, des divs ou des pseudo-éléments supplémentaires; Nous obtiendrons des résultats époustouflants avec un seul élément. Ceci est le premier d'une série présentant la puissance de CSS.

La série:

• Magique à élément unique - Cet article
• masques et effets de volants avancés
• COMPRIGMENTS ET ANIMATIONS COMPLEXE

Possibilités de style:

Sans éléments supplémentaires, nos options de style sont limitées à border, box-shadow, outline et background. Fait intéressant, même si le background est caché derrière l'image, nous pouvons le tirer parti en créant de l'espace autour de l'image en utilisant padding et / ou border, puis en dessinant l'arrière-plan dans cet espace. Cela ouvre la porte à l'utilisation de gradients pour des effets impressionnants.

Exemple 1: cadre de gradient

Cet exemple utilise un gradient conique, un rembourrage et un contour pour créer un cadre visuellement attrayant. La bordure transparente et le rembourrage fonctionnent avec les propriétés du gradient background-origin et background-clip pour atteindre l'effet de trame souhaité. Un négatif outline-offset crée une forme carrée propre.

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

Exemple 2: cadre unique uniquement

Cet exemple utilise quatre gradients coniques, un pour chaque coin. En survol, ces gradients se développent pour créer un cadre complet. Les gradients utilisent des arrêts durs entre les couleurs pour créer des arêtes vives, et les variables CSS améliorent la lisibilité du code.

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}
img:hover {
  background-size: 51% 51%;
}

Techniques et animations avancées:

L'article explore des exemples plus complexes en utilisant la manipulation du gradient, clip-path et des animations de volants sophistiquées. Ces exemples démontrent la polyvalence des gradients dans la création de diverses formes et effets. L'utilisation des variables CSS et des variables internes (préfixées avec des soulignements) améliore l'organisation du code et la maintenabilité.

Conclusion:

Cet article démontre la puissance surprenante du CSS et des gradients pour créer des décorations d'image visuellement impressionnantes à l'aide d'une seule balise img. La série se poursuit avec des techniques plus avancées, explorant des masques, des effets de survol et des animations complexes. Une exploration plus approfondie des articles liés fournira une compréhension plus approfondie des principes CSS sous-jacents.

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!