Hiasan Imej mewah: Magic elemen tunggal

Artikel ini meneroka teknik hiasan imej kreatif hanya menggunakan tag

dan CSS, usaha yang mencabar namun memberi ganjaran. Lupa markup tambahan, div, atau elemen pseudo; Kami akan mencapai hasil yang menakjubkan dengan satu elemen. Ini adalah yang pertama dalam siri yang mempamerkan kuasa CSS. img

Siri:

Single Element Magic -
• artikel ini
topeng dan kesan hover lanjutan
menggariskan dan animasi kompleks

Kemungkinan gaya:

Tanpa elemen tambahan, pilihan gaya kami terhad kepada

, border, box-shadow, dan outline. Menariknya, walaupun background tersembunyi di belakang imej, kita boleh memanfaatkannya dengan membuat ruang di sekitar imej menggunakan background dan/atau padding, kemudian melukis latar belakang dalam ruang itu. Ini membuka pintu untuk menggunakan kecerunan untuk kesan yang mengagumkan. border

Contoh 1: Bingkai Gradien

Contoh ini menggunakan kecerunan, padding, dan garis besar untuk membuat bingkai visual yang menarik. Sempadan dan padding yang telus berfungsi bersama -sama dengan ciri -ciri kecerunan

dan background-origin untuk mencapai kesan bingkai yang dikehendaki. A negatif background-clip mencipta bentuk yang bersih dan persegi. outline-offset

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);
}

Contoh 2: bingkai sudut sahaja

Contoh ini menggunakan empat kecerunan konik, satu untuk setiap sudut. Pada hover, kecerunan ini berkembang untuk membuat bingkai lengkap. Kecerunan menggunakan perhentian keras antara warna untuk membuat tepi tajam, dan pembolehubah CSS meningkatkan kebolehbacaan kod.

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%;
}

Teknik dan animasi lanjutan: Artikel meneroka contoh yang lebih kompleks menggunakan manipulasi kecerunan,

, dan animasi hover yang canggih. Contoh -contoh ini menunjukkan kepelbagaian kecerunan dalam mewujudkan pelbagai bentuk dan kesan. Penggunaan pembolehubah CSS dan pembolehubah dalaman (diawali dengan garis bawah) meningkatkan organisasi kod dan penyelenggaraan.

clip-path

Kesimpulan:

Artikel ini menunjukkan kuasa mengejutkan CSS dan kecerunan untuk mencipta hiasan imej yang mengagumkan dengan menggunakan satu

tag. Siri ini berterusan dengan teknik yang lebih maju, meneroka topeng, kesan hover, dan animasi yang kompleks. Penjelajahan lanjut mengenai artikel -artikel yang dipautkan akan memberikan pemahaman yang lebih mendalam tentang prinsip CSS yang mendasari.

Atas ialah kandungan terperinci Hiasan Imej mewah: Magic elemen tunggal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!