Her Geliştiricinin Bilmesi Gereken 8 Temel CSS İpuçları ve Püf Noktaları

HTML iskeletini kurduktan sonra bir web sayfasına stil eklemek için CSS kullanılır. Ayrıca, CSS'de sadece birkaç satır kodla şık tasarımlar oluşturabilirsiniz.

Her geliştirici, projelerini hızlı ve verimli bir şekilde geliştirmek için bu CSS numaralarını bilmelidir. Verimliliğinizi bir sonraki seviyeye çıkaracaklarından eminler - hadi başlayalım.

1. Hover Efektleri

kullanarak bir HTML öğesine bir vurgulu efekti ekleyebilirsiniz. :vurgu seçici.

Örnek: Bir düğme öğesine fareyle üzerine gelme efekti ekleme.

HTML Kodu:

üzerimde gezin

CSS Kodu:

düğme: üzerine gelin {
renk: #0062FF;
kenarlık: #0062FF düz 1 piksel;
arka plan: #FFFF99;
}

Bu kodla oynayabilir ve aşağıdaki gibi efektler ekleyebilirsiniz. solma,büyümek, eğmek, ve benzeri. Kendi haline getir!

Hover'da CSS Fade-in Etkisi

buton{
opaklık: 0,5;
}
düğme: üzerine gelin{
opaklık: 1;
}

Hover'da CSS Büyüme Etkisi

düğme: üzerine gelin{
-webkit-dönüşüm: ölçek (1.2);
-ms-dönüşüm: ölçek (1.2);
dönüştürme: ölçek (1.2);
}

2. Bir div Kapsayıcısına Sığdırmak İçin Görüntüleri Yeniden Boyutlandırın

kullanarak bir görüntüyü bir div kapsayıcısına sığdırmak için yeniden boyutlandırabilirsiniz. yükseklik, Genişlik, ve nesne-uyum özellikler.

HTML Kodu:

CSS Kodu:

.Rastgele görüntü {
 yükseklik: %100;
 genişlik: %100;
 nesne-uyum: içerir;
 }

3. Tüm Stilleri Geçersiz Kılma

Bir özniteliğin diğer tüm stil bildirimlerini (satır içi stiller dahil) kullanarak geçersiz kılabilirsiniz. !önemli bir değerin sonundaki yönerge.

HTML Kodu:

 Selam Dünya!

CSS Kodu:

P {
 arka plan rengi: sarı;
 }
 .sınıf adı {
 arka plan rengi: mavi !önemli;
 }
 #idName {
 arka plan rengi: yeşil;
 }

Bu örnekte, !önemli kural tüm diğerlerini geçersiz kılar arka plan rengi bildirimler ve arka plan renginin yeşil yerine mavi olarak ayarlanmasını sağlar.

4. Üç Noktalı Metni Kes

Taşan metni üç nokta ile kesebilirsiniz (...) kullanmak metin taşması CSS özelliği.

HTML Kodu:

 Lorem ipsum dolor sit amet conectetur adipisicing elit, sed do eiusmod tempor.

CSS Kodu:

.Metin {
 boşluk: nowrap;
 taşma: gizli;
 metin taşması: üç nokta;
 genişlik: 200 piksel;
 }

İlişkili: Örneklerle Açıklanan CSS Kutu Modeli

5. Metin dönüştürmeyi kullanma

Metni büyük harfe, küçük harfe veya büyük harfe çevirmeye zorlayabilirsiniz. metin dönüştürme CSS özelliği.

büyük harf

HTML Kodu:

 Lorem ipsum dolor sit amet, conectetur adipisicing elit.

CSS Kodu:

.büyük harf {
 metin dönüştürme: büyük harf;
 }

küçük harf

HTML Kodu:

 Lorem ipsum dolor sit amet, conectetur adipisicing elit.

CSS Kodu:

.küçük harf {
 metin dönüştürme: küçük harf;
 }

Büyük harf kullan

HTML Kodu:

 Lorem ipsum dolor sit amet, conectetur adipisicing elit.

CSS Kodu:

.kapitalize etmek {
 metin dönüştürme: büyük harfe çevirme;
 }

6. Tek Satır Özellik Bildirimini Kullanma

Kodunuzu kısa ve kolay okunabilir hale getirmek için CSS'deki stenografi özelliklerini kullanabilirsiniz.

Örneğin, CSS arka fon değerlerini tanımlamanıza izin veren bir steno özelliğidir. arka plan rengi, arka plan görüntüsü, arka plan-tekrar, ve arka plan konumu. Benzer şekilde, özellikleri tanımlayabilirsiniz. yazı tipi, sınır, marj, ve dolgu malzemesi.

Tek Satır Arka Plan Özellik Beyanı

arka plan rengi: siyah;
arka plan resmi: url (images/xyz.png);
arka plan tekrarı: tekrar yok;
arka plan konumu: sol üst;

Yukarıdaki bildirimi tek bir satıra sadeleştirebilirsiniz:

arka plan: siyah url (images/xyz.png) tekrarsız sol üst;

Steno özelliklerin kullanımı çok uygundur, ancak bazı özellikleri göz önünde bulundurmanız gerekir. zor kenar vakaları (MDN Web Dokümanlarında belirtildiği gibi) bunları kullanırken.

Araç ipuçları, kullanıcı fare imlecini öğenin üzerine getirdiğinde bir öğe hakkında daha fazla bilgi sağlamanın bir yoludur.

HTML Kodu:

Sağ Araç İpucu
Bu, Araç İpucu metnidir

CSS Kodu:

gövde {
 metin hizalama: merkez;
 }
 .tooltip_div {
 pozisyon: göreceli;
 ekran: satır içi blok;
 }
 .tooltip_div .tooltip {
 görünürlük: gizli;
 genişlik: 170 piksel;
 arka plan rengi: mavi;
 renk: #fff;
 metin hizalama: merkez;
 sınır yarıçapı: 6 piksel;
 dolgu: 5 piksel 0;
 /* Araç ipucunu konumlandırma */
 konum: mutlak;
 z-endeksi: 1;
 üst: -5 piksel;
 sol: %105;
 }
 .tooltip_div: üzerine gelin .tooltip {
 görünürlük: görünür;
 }

HTML Kodu:

Sol Araç İpucu
Bu, Araç İpucu metnidir

CSS Kodu:

gövde {
 metin hizalama: merkez;
 }
 .tooltip_div {
 pozisyon: göreceli;
 ekran: satır içi blok;
 }
 .tooltip_div .tooltip {
 görünürlük: gizli;
 genişlik: 170 piksel;
 arka plan rengi: mavi;
 renk: #fff;
 metin hizalama: merkez;
 sınır yarıçapı: 6 piksel;
 dolgu: 5 piksel 0;
 /* Araç ipucunu konumlandırma */
 konum: mutlak;
 z-endeksi: 1;
 üst: -5 piksel;
 sağ: %105;
 }
 .tooltip_div: üzerine gelin .tooltip {
 görünürlük: görünür;
 }

HTML Kodu:

En İyi İpucu
Bu, Araç İpucu metnidir

CSS Kodu:

gövde {
 metin hizalama: merkez;
 }
 .tooltip_div {
 üst kenar boşluğu: 100 piksel;
 pozisyon: göreceli;
 ekran: satır içi blok;
 }
 .tooltip_div .tooltip {
 görünürlük: gizli;
 genişlik: 170 piksel;
 arka plan rengi: mavi;
 renk: #fff;
 metin hizalama: merkez;
 sınır yarıçapı: 6 piksel;
 dolgu: 5 piksel 0;
 /* Araç ipucunu konumlandırma */
 konum: mutlak;
 z-endeksi: 1;
 alt: %100;
 sol: %50;
 sol kenar boşluğu: -60 piksel;
 }
 .tooltip_div: üzerine gelin .tooltip {
 görünürlük: görünür;
 }

HTML Kodu:

Alt Araç İpucu
Bu, Araç İpucu metnidir

CSS Kodu:

gövde {
 metin hizalama: merkez;
 }
 .tooltip_div {
 üst kenar boşluğu: 100 piksel;
 pozisyon: göreceli;
 ekran: satır içi blok;
 }
 .tooltip_div .tooltip {
 görünürlük: gizli;
 genişlik: 170 piksel;
 arka plan rengi: mavi;
 renk: #fff;
 metin hizalama: merkez;
 sınır yarıçapı: 6 piksel;
 dolgu: 5 piksel 0;
 /* Araç ipucunu konumlandırın */
 konum: mutlak;
 z-endeksi: 1;
 en iyi 100%;
 sol: %50;
 sol kenar boşluğu: -60 piksel;
 }
 .tooltip_div: üzerine gelin .tooltip {
 görünürlük: görünür;
 }

Özel oluşturmak için Bootstrap kitaplığını da kullanabilirsiniz. Önyükleme ipuçları.

8. Gölge Efektleri Ekle

kullanarak metinlere ve öğelere CSS gölge efektleri ekleyebilirsiniz. Metin gölgesi ve kutu-gölge Sırasıyla CSS özellikleri.

CSS Metin Gölgesi

bu Metin gölgesi CSS özelliği metne gölgeler ve katmanlar ekler. bu Metin gölgesi özellik, metne uygulanacak virgülle ayrılmış bir gölge listesi kabul eder.

Metin gölgesi CSS Özelliğinin sözdizimi:

/* text-shadow CSS özelliği ile 4 argüman kullanabilirsiniz:
ofset-x, ofset-y, bulanıklık yarıçapı ve renk */
/* ofset-x | ofset-y | bulanıklık yarıçapı | renk */
metin gölgesi: 2px 2px 4px kırmızı;
/* renk | ofset-x | ofset-y | bulanıklık yarıçapı */
metin gölgesi: #18fa3e 1px 2px 10px;

Not: Renk ve bulanıklık yarıçapı bağımsız değişkenleri isteğe bağlıdır.

İlişkili: CSS metin gölgesi Nasıl Kullanılır: Püf Noktaları ve Örnekler

Örneğin:

arka plan: #e74c3c;
renk: #fff;
yazı tipi ailesi: lato;
metin gölgesi: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52), 4px 4px rgba (140, 33, 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0,55), 7px 7px rgba (154, 40, 28, 0,56), 8px 8px rgba (158, 42, 30, 0,57), 9px 9px rgba (162, 44, 31, 0,58)), 10px 10 piksel rgba (166, 45, 33, 0,59), 11 piksel 11 piksel rgba (169, 47, 34, 0.6), 12 piksel 12px rgba (173, 48, 36, 0.61), 13px 13px rgba (176, 50, 37, 0.62), 14px 14px rgba (178, 51, 38, 0.63), 15px 15px rgba (181, 52, 39, 0.64), 16px 16px rgba (184, 54, 40, 0.65), 17px 17px rgba (186, 55, 41, 0.66), 18px 18px rgba (189, 56, 42, 0.67), 19px 19px rgba (191, 57, 43, 0.68), 20px 20px rgba (193, 58, 44, 0.69), 21px 21px rgba ( 195, 59, 45, 0.7), 22px 22px rgba (197, 60, 46, 0.71), 23px 23px rgba (199, 61, 47, 0.72), 24px 24px rgba (201, 62, 47, 0.73), 25px 25px rgba (202, 62, 48, 0.74), 26px 26px rgba (204, 63, 49, 0.75), 27px 27px rgba (206, 64, 49, 0.76), 28px 28px rgba (207, 65, 50, 0.77), 29px 29px rgba (209, 65, 51, 0.78), 30px 30px rgba (210, 66, 51, 0.79), 31px 31px rgba (211, 67, 52, 0.8), 32px 32px rgba ( 213, 67, 52, 0.81), 33px 33px rgba (214, 68, 53, 0.82), 34px 34px rgba (215, 69, 53, 0.83), 35px 35px rgba (216, 69, 54, 0.84), 36px 36px rgba (218, 70, 54, 0.85), 37px 37px rgba (219, 70, 55, 0.86), 38px 38px rgba (220, 71, 55, 0.87), 39px 39px rgba (221, 71, 56, 0.88), 40px 40px rgba (222, 72, 56, 0.89), 41px 41px rgba (223, 72, 57, 0.9), 42px 42px rgba (224, 73, 57, 0.91), 43px 43px rgba ( 225, 73, 57, 0.92), 44px 44px rgba (225, 73, 58, 0.93), 45px 45px rgba (226, 74, 58, 0.94), 46px 46px rgba (227, 74, 58, 0.95), 47px 47px rgba (228, 75, 59, 0.96), 48px 48px rgba (229, 75, 59, 0.97), 49px 49px rgba (230, 75, 59, 0.98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Kutu Gölgesi

bu kutu-gölge özellik, HTML öğelerine gölge uygulamak için kullanılır.

Kutu gölgesi CSS özelliğinin sözdizimi

kutu gölgesi: [yatay kayma] [dikey kayma] [bulanıklaştırma yarıçapı] [isteğe bağlı yayılma yarıçapı] [renk];

Not: Bulanıklaştırma, yayılma ve renk parametreleri isteğe bağlıdır.

İlişkili: CSS kutu gölgesi Nasıl Kullanılır: Püf Noktaları ve Örnekler

Örneğin:

kutu gölgesi: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Bu makalede kullanılan kaynak kodun tamamına bir göz atmak isterseniz, burada GitHub deposu.

Modern CSS Püf Noktalarını Kullanarak Web Sitenizi Stillendirin

Bir web sitesine CSS metin gölgeleri eklemek, kullanıcıların dikkatini çekmenin harika bir yoludur. Web sitesine belirli bir zarafet ve benzersiz bir his verebilir. Yaratıcı olun ve bazılarıyla denemeler yapın Metin gölgesi Web sitenizin temasıyla uyumlu olabilecek örnekler.

Web Sitenizde Denemeniz İçin 11 CSS Metin Gölge Örneği

CSS'de metin gölge efektleriyle çok şey yapabilirsiniz, ancak tam olarak neyin mümkün olduğunu bilmek zor olabilir. Bu görsel örneklerle yardım alın.

Sonrakini Oku

Yazar hakkında