Süslü Görüntü Süslemeleri: Anahatlar ve Karmaşık Animasyonlar

Bu üç bölümlük serideki son iki makaleyi, yalnızca renk geçişlerini kullanarak gerçekten düzgün görüntü süslemeleri yapmak için degradelerle oynayarak geçirdik. eleman. Bu üçüncü ve son parçada, CSS kullanarak daha fazla teknik keşfedeceğiz. outline Emlak. Bu garip gelebilir çünkü genellikle kullanırız. outline bir elemanın etrafına basit bir çizgi çizmek için — sorta benzeri border ancak aynı anda yalnızca dört kenarı da çizebilir ve Kutu Modelinin bir parçası değildir.

Yine de onunla daha fazlasını yapabiliriz ve bu makalede denemek istediğim şey de bu.

İlk örneğimizle başlayalım - harika bir animasyonla üzerine gelindiğinde kaybolan bir kaplama:

Bunu görüntünün üzerine fazladan bir öğe ekleyerek başarabiliriz, ancak kendimize meydan okuduğumuz şey bu değil Bu seride yapmak için Bunun yerine, CSS'ye ulaşabiliriz outline Negatif bir dengeye sahip olabileceği ve unsuruyla örtüşebileceği özelliği ve kaldıraç.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

İşin püf noktası, bir outline bu, görüntü boyutunun yarısı kadar kalın, ardından negatif bir değerle görüntü boyutunun yarısı kadar kaydırın. Renkle biraz yarı şeffaflık ekleyin ve kaplamamız var!

Gerisi ne olur :hover. güncelliyoruz outline ve her iki dış hat arasındaki geçiş, havalı vurgulu efekti yaratır. Aynı teknik, hareket ettirmediğimiz bir solma efekti oluşturmak için de kullanılabilir. outline ama şeffaf yap

Bunda görüntü boyutunun yarısını kullanmak yerine çok büyük bir boyut kullanıyorum. outline kalınlık değeri (100vmax) bir CSS maskesi uygularken. Bununla, artık görüntü boyutunu bilmeye gerek yok — hile her boyutta işe yarıyor!

kullanarak sorunlarla karşılaşabilirsiniz. 100vmax Safari'de büyük bir değer olarak. Durum buysa, değiştirdiğiniz önceki numarayı düşünün. 100vmax görüntü boyutunun yarısı ile.

İşleri daha da ileri götürebiliriz! Örneğin, fazladan basitçe kırpmak yerine outline, şekiller oluşturabilir ve süslü bir ortaya çıkarma animasyonu uygulayabiliriz.

Harika değil mi? bu outline sarı kaplamayı oluşturan şeydir. bu clip-path ekstra klipler outline yıldız şeklini almak için Ardından fareyle üzerine gelindiğinde rengi şeffaf hale getiriyoruz.

Oh, onun yerine kalp mi istiyorsun? Bunu kesinlikle yapabiliriz!

Yaratabileceğimiz tüm olası kombinasyonları hayal edin. Tek yapmamız gereken CSS maskesi ve/veya ile bir şekil çizmek. clip-path ile birleştirin ve outline kandırmak. Tek çözüm, sonsuz olanaklar!

Ve evet, kesinlikle bunu da canlandırabiliriz. bunu unutmayalım clip-path canlandırılabilir ve mask gradyanlara dayanır - bu serinin ilk iki makalesinde son derece ayrıntılı olarak ele aldığımız bir şey.

Biliyorum, animasyon biraz sorunlu. Bu, bir üretim sahasında kullanılacak "nihai ürün"den ziyade fikri göstermek için bir demodur. Daha doğal bir geçiş için işleri optimize etmek isteriz.

İşte kullanan bir demo mask yerine. Sonunda seninle dalga geçtiğim kişi son makale:

Biliyor muydunuz outline mülkiyet bu kadar çok şey yapabildi mi? Süslü görüntü süslemeleri için araç kutunuza ekleyin!

Her şeyi birleştirin!

Gradyanları, maskeleri, kırpmayı ve ana hatları kullanarak pek çok numara öğrendiğimize göre artık büyük final zamanı. Sadece teknikleri göstermek için değil, aynı zamanda bu yaklaşımların ne kadar esnek ve modüler olduğunu göstermek için geçtiğimiz haftalarda öğrendiklerimizi birleştirerek bu seriyi sonlandıralım.

Bu demoları ilk kez görüyorsanız, onları çıkarmak için kullanılan bir sürü ekstra div sarmalayıcı ve sözde öğe olduğunu varsayabilirsiniz. Ama her şey doğrudan eleman. Bu gelişmiş şekilleri ve efektleri elde etmek için ihtiyacımız olan tek seçici bu!

Tamamlayan

Tanrım, son birkaç haftadır bu üç bölümlük dizide benimle takıldığın için teşekkürler. Basit görüntüleri göz alıcı ve etkileşimli bir şeye dönüştüren bir dizi farklı tekniği keşfettik. Ele aldığımız her şeyi kullanacak mısın? Kesinlikle değil! Ancak umarım bu, CSS özelliklerinin gradyanlar gibi gelişmiş kullanımlarını incelemeniz için iyi bir alıştırma olmuştur. mask, clip-path, ve outline.

Ve her şeyi sadece biriyle yaptık eleman! Ekstra div sarmalayıcıları ve sözde öğeler yok. Elbette, bu kendimize koyduğumuz bir kısıtlama ama aynı zamanda bizi CSS'yi keşfetmeye ve yaygın kullanım durumları için yenilikçi çözümler bulmaya itti. Bu nedenle, HTML'nize fazladan işaretleme eklemeden önce, CSS'nin zaten bu görevi yerine getirip getirmediğini düşünün.