Süslü Görüntü Süslemeleri: Tek Elementli Sihir

Başlığın da söylediği gibi, resimleri süsleyeceğiz! Bunun hakkında konuşan bir sürü başka makale var, ancak burada ele aldığımız şey biraz farklı çünkü bu daha zorlu bir konu. Meydan okuma? Bir görüntüyü yalnızca kullanarak dekore edin etiket ve daha fazlası değil.

Doğru, fazladan işaretleme yok, div yok ve sözde öğe yok. Sadece tek etiket.

Kulağa zor geliyor değil mi? Ancak bu makalenin ve bu küçük seriyi oluşturan diğer makalelerin sonunda, tek bir öğeyle çalışmanın sınırlamalarına rağmen CSS'nin bize harika ve çarpıcı sonuçlar verecek kadar güçlü olduğunu kanıtlayacağım.

İlk örneğimizle başlayalım

Kodu derinlemesine incelemeden önce, bir stil oluşturma olanaklarını sıralayalım. herhangi bir ekstra öğe veya sözde öğe olmadan. Kullanabiliriz border, box-shadow, outlineVe, tabii ki, background. Bir görsele arka plan eklemek garip görünebilir çünkü görselin arkasında olacağından onu göremiyoruz - ancak işin püf noktası alan yaratmaktır etrafında görüntü kullanılarak padding ve / veya border ve sonra arka planımızı bu alanın içine çizin.

Sanırım bundan bahsettiğimden beri bundan sonra ne olacağını biliyorsun background, Sağ? Evet, gradyanları! Yapacağımız tüm dekorasyonlar çok sayıda degradeye dayanıyor. eğer beni takip etti Bir süreliğine bunun sana hiç de sürpriz gelmeyeceğini düşünüyorum. 😁

İlk örneğimize dönelim:

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

tanımlıyoruz padding ve şeffaf border değişkeni kullanarak --s imajımızın etrafında bu değişkenin üç katına eşit bir boşluk yaratmak.

Neden ikisini de kullanıyoruz? padding ve border biri ya da diğeri yerine? Bunlardan yalnızca birini kullanarak elde edebiliriz ancak degradem için bu kombinasyona ihtiyacım var çünkü varsayılan olarak başlangıç ​​değeri background-clip is border-box ve background-origin eşittir padding-box.

Mantığını anlamak için adım adım bir örnek:

Başlangıçta görüntü üzerinde herhangi bir kenarlığımız yok, dolayısıyla degrademiz iki parça oluşturacak 1px kalınlıkta. (Ben kullanıyorum 3px Bu özel demoda görülmesi daha kolay olsun diye.) Renkli bir kenarlık ekliyoruz ve degrade bize dolgu alanı içinde hala aynı sonucu veriyor (nedeniyle) background-origin) ancak sınırın arkasında tekrarlanıyor. Kenarlığın rengini şeffaf yaparsak tekrarlamayı kullanabilir ve istediğimiz çerçeveyi elde edebiliriz.

The outline demoda negatif bir denge var. Bu, degradenin tepesinde kare bir şekil oluşturur. Bu kadar! Bir degrade ve bir degrade kullanarak görüntümüze güzel bir dekorasyon ekledik. outline. Daha fazla degrade kullanabilirdik! Ancak kodumu her zaman mümkün olduğu kadar basit tutmaya çalışıyorum ve şunu buldum: outline bu şekilde daha iyi.

İşte yalnızca kullandığım yalnızca degrade çözümü padding alanı tanımlamak için. Hala aynı sonuç ancak daha karmaşık bir sözdizimiyle.

Başka bir fikir deneyelim:

Bunun için önceki örneği aldım ve kaldırdım. outlineve bir clip-path Her iki taraftaki degradeyi kesmek için. clip-path value biraz ayrıntılı ve kafa karıştırıcı, ancak burada noktalarını daha iyi görebilmeniz için bir örnek var:

Sanırım ana fikri anladınız. Farklı türde dekorasyonlar elde etmek için arka planları, ana hatları, kırpmaları ve bazı maskelemeleri birleştireceğiz. Ek bir bonus olarak bazı harika fareyle üzerine gelme animasyonlarını da değerlendireceğiz! Şu ana kadar incelediklerimiz, gelecek olanın yalnızca küçük bir özetidir!

Yalnızca Köşe Çerçevesi

Bu dört gradyan alır. Her degrade bir köşeyi kaplar ve fareyle üzerine gelindiğinde görüntünün etrafında tam bir çerçeve oluşturacak şekilde bunları genişletiriz. Degradelerden birinin kodunu inceleyelim:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

Eşit büyüklükte bir degrade çizeceğiz 50px 50px ve sol üst köşeye yerleştirin (0 0). Degradenin konfigürasyonu için bu sonuca nasıl ulaştığımı gösteren adım adım bir çizimi burada bulabilirsiniz.

Degradelerin yalnızca iki renk arasında geçiş yapmak için iyi olduğunu düşünme eğilimindeyiz. Ama gerçekte onlarla çok daha fazlasını yapabiliriz! Farklı şekiller oluşturmaya gelince özellikle faydalıdırlar. İşin püf noktası, renkler arasında yumuşak geçişler yerine (yukarıdaki örnekte olduğu gibi) sert durakların olmasını sağlamaktır:

#0000 25%, darkblue 0

Bu temelde şunu söylüyor: "Degradeyi şeffaf bir renkle doldurun. 25% alanı doldurun, ardından kalan alanı doldurun darkblue.

Kafanı kaşıyor olabilirsin 0 değer. Sözdizimini basitleştirmek için küçük bir hile. Gerçekte bunu renkler arasında kesin bir duraklama yapmak için kullanmalıyız:

#0000 25%, darkblue 25%

Bu daha mantıklı! Şeffaf renk şu şekilde biter: 25% ve darkblue tam olarak şeffaflığın bittiği yerde başlıyor ve sert bir duruş sergiliyor. İkincisini şununla değiştirirsek 0, tarayıcı işi bizim için yapacaktır, bu nedenle bu işi yapmanın biraz daha etkili bir yolu vardır.

Bir yerde şartname, diyor ki:

eğer bir renk durağı or geçiş ipucu listede kendisinden önceki herhangi bir renk durağının veya geçiş ipucunun belirtilen konumundan daha küçük bir konuma sahipse, konumunu, kendisinden önceki herhangi bir renk durağının veya geçiş ipucunun belirtilen en büyük konumuna eşit olacak şekilde ayarlayın.

0 her zaman diğer değerlerden daha küçüktür, dolayısıyla tarayıcı onu her zaman bildirimde kendisinden önce gelen en büyük değere dönüştürecektir. Bizim durumumuzda bu sayı 25%.

Şimdi aynı mantığı tüm köşelere uyguluyoruz ve aşağıdaki kodla bitiriyoruz:

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

Tüm degradeler aynı renk konfigürasyonunu kullandığından, bazı fazlalıkları önlemek için CSS değişkenlerini ekledim.

Fareyle üzerine gelme efekti için tek yaptığım, tam çerçeveyi oluşturmak amacıyla degradelerin boyutunu artırmak:

img:hover {
  background-size: 51% 51%;
}

Evet öyle 51% yerine 50% — bu küçük bir örtüşme yaratır ve olası boşlukları önler.

Aynı tekniği kullanarak başka bir fikir deneyelim:

Bu sefer yalnızca iki degrade kullanıyoruz, ancak daha karmaşık bir animasyonla. Öncelikle her degradenin konumunu güncelliyoruz, ardından tam çerçeveyi oluşturmak için boyutlarını artırıyoruz. Ayrıca renk, boyut, kalınlık ve hatta görüntü ile çerçeve arasındaki boşluk üzerinde daha iyi kontrol sağlamak için daha fazla değişken ekledim.

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

Neden --_i ve --_p değişkenlerin adında alt çizgi var mı? Alt çizgiler, kodu optimize etmek için kullanılan "dahili" değişkenleri dikkate almak için kullandığım adlandırma kuralının bir parçasıdır. Özel bir şey değiller ama çerçeveyi kontrol etmek için ayarladığımız değişkenler arasında bir fark yaratmak istiyorum (örneğin --b, --c, vb.) ve kodu kısaltmak için kullandıklarımı.

Kod kafa karıştırıcı görünebilir ve anlaşılması kolay olmayabilir, ancak şunu yazdım: üç parçalı dizi bu tekniği detaylandırdığım yer. Yukarıdaki koda nasıl ulaştığımı anlamak için en azından ilk makaleyi okumanızı şiddetle tavsiye ederim.

Farklı değerleri daha iyi anlamak için bir örnek:

Çerçeve Gösterimi

Fareyle üzerine gelindiğinde tam kareyi ortaya çıkaracağımız başka bir animasyon türünü deneyelim:

Harika, değil mi? Ve eğer yakından bakarsanız, fareyi dışarı çıkardığınızda çizgilerin ters yönde kaybolduğunu fark edeceksiniz, bu da etkiyi daha da süslü hale getiriyor! Benzer bir efekt kullandım önceki bir makale.

Ancak bu sefer tüm öğeyi kapsamak yerine, bir tanım tanımlayarak yalnızca küçük bir kısmını ele alıyorum. height böyle bir şey elde etmek için:

Bu çerçevemizin üst sınırıdır. Aynı işlemi görüntünün her iki tarafında da tekrarlıyoruz ve vurgulu efektimizi elde ediyoruz:

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

Gördüğünüz gibi, aynı degradeyi dört kez uyguluyorum ve her biri, aynı anda yalnızca bir tarafı kaplayacak şekilde farklı bir konuma sahip.

Bir diğeri? Hadi gidelim!

Bu biraz çetrefilli görünüyor ve gerçekten de iki konik degradenin bu tür bir büyüyü nasıl başardığını anlamak biraz hayal gücü gerektiriyor. İşte degradelerden birini gösteren bir demo:

Sözde eleman degradeyi simüle eder. Başlangıçta görüş alanı dışındadır ve fareyle üzerine gelindiğinde çerçevenin üst kenarını elde etmek için ilk önce konumunu değiştiririz. Daha sonra doğru kenarı elde etmek için yüksekliği artırıyoruz. Degrade şekli son bölümde kullandığımıza benzer: iki tarafı kaplayan iki parça.

Peki neden degradenin genişliğini yaptım? 200%? düşünürdün 100% yeterli olur değil mi?

100% yeterli olmalı ama genişliğini eşit tutarsam degradeyi istediğim gibi hareket ettiremeyeceğim 100%. Bu da nasıl olduğuyla ilgili başka bir küçük tuhaflık background-position İşler. Bunu burada ele alıyorum önceki bir makale. ben de Yığın Taşması'nda bir cevap yayınladı bununla uğraşmak. Çok fazla okuma gerektiğini biliyorum ama gerçekten zaman ayırmaya değer.

Artık bir degradenin mantığını açıkladığımıza göre, ikincisi kolaydır çünkü tam olarak aynı şeyi yapar ancak bunun yerine sol ve alt kenarları kapsar. Tek yapmamız gereken birkaç değeri değiştirmek ve işimiz bitti:

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

Gördüğünüz gibi her iki degrade de neredeyse aynı. Sadece boyut ve konum değerlerini değiştiriyorum.

Çerçeve Döndürme

Bu sefer imajımızın etrafına bir çerçeve çizmeyeceğiz, bunun yerine mevcut bir resmin görünümünü ayarlayacağız.

Muhtemelen düz bir çizgiyi nasıl açılı bir çizgiye dönüştürebildiğimi soruyorsunuzdur. Hayır, büyü bundan farklı. Bu, dört degrade için basit animasyonları birleştirdikten sonra elde ettiğimiz yanılsamadır.

Üst degradenin animasyonunun nasıl yapıldığını görelim:

Ben sadece tekrarlanan bir degradenin konumunu güncelliyorum. Henüz süslü bir şey yok! Aynısını sağ taraf için de yapalım:

İşin püf noktasını görmeye başladın mı? Her iki degrade de köşede kesişerek düz çizginin açılı bir çizgiye dönüştüğü yanılsamayı yaratır. Daha iyi görebilmek için anahattı kaldıralım ve taşmayı gizleyelim:

Şimdi kalan kenarları kapatmak için iki degrade daha ekliyoruz ve işimiz bitti:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

Bu kodu alıp biraz ayarlarsak harika bir animasyon daha elde edebiliriz:

Bu örnekteki mantığı çözebilir misiniz? Bu senin ödevin! Kod korkutucu görünebilir ancak daha önce incelediğimiz örneklerle aynı mantığı kullanıyor. Her degradeyi izole etmeye çalışın ve nasıl canlandırıldığını hayal edin.

Tamamlayan

Bir makalede bu kadar çok degrade var!

Kesinlikle öyle ve seni uyardım! Ancak zorluk, bir görüntüyü fazladan öğeler ve sözde öğeler olmadan dekore etmekse, elimizde yalnızca birkaç olasılık kalır ve degradeler en güçlü seçenektir.

Bazı açıklamalarda biraz kaybolduysanız endişelenmeyin. Bu meydan okuma için geri dönüştürdüğümüz bazı konseptlerle daha fazla ayrıntıya girdiğim eski makalelerimden bazılarını her zaman öneririm.

Bu serideki bir sonraki makaleye kadar sizi oyalayacak son bir demoyla ayrılıyorum. Bu sefer ben kullanıyorum radial-gradient() başka bir komik vurgulu efekti oluşturmak için. Nasıl çalıştığını anlamak için kodu incelemenize izin vereceğim. Takılırsanız yorumlarda bana sorular sorun!