Web sayfanızdaki bir öğeye eklenen yumuşak bir dış parıltı, öğeyi görüntüleyen kişi için öne çıkarır. kullanın CSS3 ve önemli bir nesnenin dış kenarlarına ışıma uygulamak için HTML. Efekt, içindeki bir nesneye eklenen bir dış ışımaya benzer. Photoshop.
Parlayacak Öğeyi Yaratın
Işıma efektleri herhangi bir arka planda çalışır, ancak koyu arka planlarda en iyi şekilde görünürler çünkü o zaman parıltı daha fazla parlar gibi görünür. Yuvarlatılmış köşeli dikdörtgen kutu örneğinde, bir DIV öğesi, siyah bir arka plana sahip başka bir DIV öğesine yerleştirilir. Parlama için dış DIV gerekli değildir, ancak beyaz bir arka plan üzerinde parlamayı görmek zordur.
Öğenin Boyutunu ve Rengini Ayarlayın
Parıltı ile süsleyeceğiniz öğeyi seçtikten sonra, stiller ekle arka plan rengi, boyutu ve yazı tipleri gibi.
Bu örnek mavi bir dikdörtgendir; boyut 147 piksele 90 piksel olarak ayarlanmıştır; ve arka plan rengi bir kraliyet mavisi olan #1f5afe olarak ayarlanmıştır. Öğeyi siyah kap öğesinin ortasına yerleştirmek için bir kenar boşluğu içerir.
Köşeleri Döndür
CSS3 ile köşeleri yuvarlatılmış bir dikdörtgen oluşturmak kolaydır. ışıma sınıfınıza border-radius stili özelliğini ekleyin. Sadece kullanmayı unutma –webkit– ve –moz– en yüksek uyumluluk için önekler.
-webkit-border-radius: 15 piksel;
-moz-border-radius: 15 piksel;
sınır yarıçapı: 15 piksel;
Parıltıyı Kutu Gölgesiyle Ekleyin
Işımanın kendisi bir kutu gölgesi ile oluşturulur. Parlamayı bir gölge gibi yansıtmadan tüm öğeyi hale getirdiğinden, yatay ve dikey uzunlukları 0 piksele ayarlayın.
Bu örnekte, bulanıklık yarıçapı 15 piksele ayarlanmıştır ve bulanıklığın yayılması 5 pikseldir, ancak ışımanın ne kadar geniş ve dağınık olmasını istediğinizi belirlemek için bu ayarlarla oynayabilirsiniz. Renk rgb (255.255.190) RGBa alfa saydamlığı yüzde 75'e ayarlanmış sarı bir renktir—rgba (255.255.190, .75). Projeniz için en uygun parıltı rengini seçin. Köşeleri yuvarlarken olduğu gibi, tarayıcı öneklerini kullanmayı unutmayın (–webkit– ve –moz–) en iyi uyumluluk için.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
kutu gölgesi: 0px 0px 15px 5px rgba (255, 255, 190, .75);