Bu makale, kutu gölgeleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir dizi hileyi tanıtacak
Kutu gölgeleri
box-shadow bir öğenin kutusuna alt gölge uygulamanıza olanak tanır. Metin gölgeleri gibi, kutu gölgeleri de IE9+ ve Edge dahil olmak üzere tüm tarayıcılarda oldukça iyi desteklenir. Eski IE sürümü kullanan kullanıcıların gölgeleri görüntülemesi zor olabilir. Bu nedenle içeriğinizin gölgeler olmadan da okunabilir olduğundan emin olmak için tasarımlarınızı test etmelisiniz.
Basit bir kutu gölgesi
Basit bir örneğe bakalım. Önce biraz HTML:
<article class="simple">
<p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>
Şimdi CSS:
p {
margin: 0;
}
article {
max-width: 500px;
padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}
.simple {
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
Bu kodlar bize aşağıdaki sonucu verir:
box-shadow için dört değer verebiliyoruz:
- İlk uzunluk değeri yatay kaymadır – gölgenin orijinal kutudan sağa kaydırıldığı mesafeyi verir (veya değer negatifse sola).
- İkinci uzunluk değeri dikey kaymadır – gölgenin orijinal kutudan aşağı doğru (veya değer negatifse yukarı doğru) olan uzaklığıdır.
- Üçüncü uzunluk değeri, bulanıklık yarıçapıdır – gölgeye uygulanan bulanıklık miktarı.
- Renk değeri, gölgenin temel rengidir .
Bu değerleri tanımlamak için mantıklı olabilecek herhangi bir uzunluk ve renk birimini kullanabilirsiniz.
Çoklu kutu gölgeleri
Ayrıca box-shadow değerlerini virgülle ayırarak tek bir bildirimde birden çok kutu gölgesi belirleyebilirsiniz :
p {
margin: 0;
}
article {
max-width: 500px;
padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}
.multiple {
box-shadow: 1px 1px 1px black,
2px 2px 1px black,
3px 3px 1px red,
4px 4px 1px red,
5px 5px 1px black,
6px 6px 1px black;
}
Şimdi şu sonucu alıyoruz:
Bu örnekte renki katmanlara sahip, yükseltilmiş bir kutu oluşturarak eğlenceli bir şey yaptık. Ancak bu özelliği istediğiniz şekilde kullanabilirsiniz. Örneğin birden çok ışık kaynağına dayalı gölgelerle daha gerçekçi bir görünüm oluşturabilirsiniz.
Diğer kutu gölge özellikleri
text-shadow özelliğinin aksine, box-shadow için inset anahtar kelimesi de kullanılabilir – bunu bir gölge bildiriminin başına koymak, onun bir dış gölge yerine bir iç gölge olmasına neden olur.
Bir örneğe göz atalım ve ne demek istediğimizi görelim. İlk olarak, bu örnek için farklı bir HTML ile gideceğiz:
<button>Press me!</button>
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 1px 1px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
Bu bize aşağıdaki sonucu verir:
Burada focus/hover/active durumları için bazı düğme stilleri ayarladık. Düğmenin üzerinde varsayılan olarak basit bir kutu gölgesi bulunuyor. Ayrıca güzel bir gölgeleme efekti vermek için düğmenin zıt köşelerine yerleştirilmiş biri açık ve biri koyu olan birkaç iç gölge öğesi verilmiş.
Düğmeye basıldığında, etkin durum, ilk kutu gölgesinin çok koyu bir iç metin gölgesi ile değiştirilmesine neden olarak, düğmeye basılıyormuş gibi bir görünüm verir.
filtreler
CSS kullanarak bir görselin içeriğini değiştiremeseniz de yapabileceğiniz bazı yaratıcı şeyler bulunuyor. Tasarımlarınıza ilgi çekmenize yardımcı olabilecek çok güzel bir özellik filter özelliği. Bu özellik, Photoshop benzeri filtreleri doğrudan CSS’de etkinleştirir.
Aşağıdaki örnekte filtre için iki farklı değer kullandık. İlk değer blur()– bu fonksiyona verilen değer görüntüyü ne kadar bulanıklaştıracağımızı belirliyor.
İkincisi grayscale(); bir yüzde değeri (%) kullanarak ne kadar rengin griye dönüştütrülmesini ayarlıyoruz.
<div class="wrapper">
<div class="box"><img src="balloons.jpg" alt="balloons" class="blur"></div>
<div class="box"><img src="balloons.jpg" alt="balloons" class="grayscale"></div>
</div>
img {
height: 100%;
width: 100%;
display: block;
object-fit: cover;
}
.blur {
filter: blur(10px);
}
.grayscale {
filter: grayscale(60%);
}
Filtreler yalnızca görüntülere değil, herhangi bir öğeye de uygulanabilir. Mevcut filtre seçeneklerinden bazıları, diğer CSS özelliklerine çok benzer şeyleri yapar. Örneğin drop-shadow() çok benzer bir şekilde çalışır ve box-shadow veya text-shadow ile benzer bir etki verir. Bununla birlikte, filtrelerle ilgili güzel olan diğer bir şey de, uygulanan filtrenin bir bütün olarak kutunun kendisine değil, kutunun tam şekli üzerinde çalışmalarıdır. Bu son kısım biraz karışık, gelin bir örnek üzerinde görelim.
Bu sonraki örnekte filtremizi bir kutuya uyguluyoruz ve onu bir “kutu gölgesiyle” karşılaştırıyoruz. Gördüğünüz gibi, gölge filtresi metnin ve kenar çizgilerinin tam şeklini takip ediyor. “Kutu gölgesi” ise sadece kutunun karesini takip ediyor.
p {
border: 5px dashed red;
}
.filter {
filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}
.box-shadow {
box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
}
<p class="filter">Filter</p>
<p class="box-shadow">Box shadow</p>
Karışım modları
CSS karışım modları, iki öğe üst üste geldiğinde, karıştırma efekti belirten öğelere karışım modları eklememize olanak tanır — her piksel için gösterilen son renk, orijinal piksel rengiyle alttaki katmandaki pikselin kombinasyonunun sonucu olacaktır. Photoshop gibi grafik uygulamalarının kullanıcıları blend modlarına aşina olacaktır.
CSS’de karışım modlarını kullanan iki özellik vardır:
background-blend-mode, tek bir öğe üzerinde ayarlanmış birden çok arka plan görüntüsünü ve rengi bir araya getirir.mix-blend-mode, hem arka plan hem de içerik olmak üzere üst üste geldiği öğelerle ayarlandığı öğeyi bir araya getirir.
karışım modları.html örnek sayfasında (bkz. kaynak kodu) ve <blend-mode> referans sayfasında burada anlatıldandan çok daha fazla örnek bulabilirsiniz.
Not: Karışım modları da yeni özelliklerden birisidir. Bu özellik filtrelerden biraz daha az desteklenir. Edge’de henüz destek yok ve Safari yalnızca bazı karışım modu seçeneklerini destekliyor.
arka plan karışım modu
Yine de bu özelliği daha iyi anlayabilmemiz için birkaç örneğe bakalım. İlk olarak, background-blend-mode;
<div>
</div>
<div class="multiply">
</div>
Şimdi biraz CSS — <div> öğesine bir arka plan görüntüsü ve yeşil bir arka plan rengi ekliyoruz :
div {
width: 250px;
height: 130px;
padding: 10px;
margin: 10px;
display: inline-block;
background: url(colorful-heart.png) no-repeat center 20px;
background-color: green;
}
.multiply {
background-blend-mode: multiply;
}
Elde ettiğimiz sonuç şu – orijinali solda ve karıştırma modununun etkisini sağda görebilirsiniz:
mix-karışım-modu
Şimdi mix-blend-mode‘a bakalım. Burada yine yukarıdaki örnekte kullandığımız iki <div>‘i kullancağız. Ancak şimdi her bir div öğesini mor bir arka plana sahip başka bir öğe üzerine oturtacağız:
<article>
No mix blend mode
<div>
</div>
<div>
</div>
</article>
<article>
Multiply mix
<div class="multiply-mix">
</div>
<div>
</div>
</article>
CSS:
article {
width: 280px;
height: 180px;
margin: 10px;
position: relative;
display: inline-block;
}
div {
width: 250px;
height: 130px;
padding: 10px;
margin: 10px;
}
article div:first-child {
position: absolute;
top: 10px;
left: 0;
background: url(colorful-heart.png) no-repeat center 20px;
background-color: green;
}
article div:last-child {
background-color: purple;
position: absolute;
bottom: -10px;
right: 0;
z-index: -1;
}
.multiply-mix {
mix-blend-mode: multiply;
}
Bu bize aşağıdaki sonuçları verir:
Burada, karışımın yalnızca iki arka plan görüntüsünü değil, aynı zamanda altındaki rengi de birbirine karıştırdığını görebilirsiniz.
CSS şekilleri
CSS’deki her şeyin dikdörtgen bir kutu olduğu ve görsellerin fiziksel bir dikdörtgen kutu olduğu doğru olsa da, CSS Shapes kullanarak içeriğimizin dikdörtgen olmayan şeyler etrafında akıyormuş gibi görünmesini sağlayabiliriz.
CSS Shapes özelliği, metnin dikdörtgen olmayan bir şeklin etrafına sarılmasını sağlar. Özellikle ,metni kaydırmak isteyeceğiniz, biraz boşluk içeren bir görüntüyle çalışırken yararlı olacaktır.
Aşağıdaki resimde hoş bir şekilde yuvarlak bir balonumuz var. Asıl görsel dosyası dikdörtgen olsa da, görüntüye float özelliği vererek (şekiller yalnızca float öğelere uygulanır) ve shape-outside değeri circle(50%) olan bir öğe kullanarak, metnin balon şeklini izlediği efektini verebiliriz.
img {
float: left;
shape-outside: circle(50%);
}<div class="wrapper">
<img src="round-balloon.png" alt="balloon">
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.</p>
</div>Bu örnekteki şekil resim dosyasının içeriğine tepki vermiyor. Bunun yerine, daire fonksiyonu ile dosyanın içine uyan bir daire çizmişiz gibi, merkez noktasını görüntü dosyasının merkezinden alıyor. Metnin etrafında aktığı daire de bu oluyor.
Not: Firefox’ta Şekilleri incelemek için DevTools Shapes Inspector’ı kullanabilirsiniz.
circle() fonksiyonu dışında şekiller oluşturmak için farklı yollar da bulunuyor. Daha fazla bilgi ve CSS Şekilleri ile ilgili örnek kod için MDN’de CSS Şekilleri Kılavuzlarına bakın
-webkit-background-clip: metin
Kısaca değineceğimiz bir diğer özellik de background-clip özelliğinin text değeridir. -webkit-text-fill-color: transparent; ile birlikte kullanıldığında, bu, arka plan resimlerini öğenin metninin şekline göre kırpmanıza olanak tanıyarak bazı güzel efektler oluşturmanıza sağlar. Bu özellik henüz resmi bir standart değil, ancak popüler olduğu ve geliştiriciler tarafından oldukça yaygın olarak kullanıldığı için birden çok tarayıcıda uygulanmıştır. Bu bağlamda kullanıldığında, -webkit-Webkit/Chrome tabanlı olmayan tarayıcılar için bile her iki özellik de önek gerektirir:
.text-clip {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Peki neden diğer tarayıcılar bir -webkit-öneki uygulamayı tercih etti? Esas olarak tarayıcı uyumluluğu için. O kadar çok web geliştiricisi -webkit- özelliğini kullanmaya başladı ki, desteklemeyen tarayıcılar bozukmuş gibi görünmeye başladı. Oysa, gerçekte, bu tarayıcılar sadece standartları takip ediyorlardı. Bu nedenle, bu tür birkaç özelliği uygulamak zorunda kaldılar. Bu, çalışmanızda standart olmayan ve/veya ön ekli CSS özellikleri kullanmanın tehlikesini vurgular – bunlar yalnızca tarayıcı uyumluluğu sorunlarına neden olmakla kalmaz, aynı zamanda değişikliğe de tabidir, bu nedenle kodunuz her an bozulabilir. Standartlara bağlı kalmak çok daha iyidir.
Üretim çalışmanızda bu tür özellikleri kullanmak istiyorsanız, tarayıcılar arasında kapsamlı bir şekilde test ettiğinizden emin olun ve bu özelliklerin çalışmadığı yerlerde sitenin hala kullanılabilir olup olmadığını kontrol edin.
Not: Tam -webkit-background-clip: text kod örneği için bkz. background-clip-text.html (ayrıca bkz. kaynak kodu).
Özet
Bu makalenin eğlenceli olduğunu umuyoruz – genellikle yeni oyuncaklarla oynamak eğlencelidir ve modern tarayıcılarda ne tür gelişmiş şekillendirme araçlarının kullanıma sunulduğunu görmek de her zaman ilginçtir.