Her Web Tasarımcının Bilmesi Gereken 20 Temel CSS Hilesi

Bu kesinlikle yeni başlayanlar için. Kutu modelinin nasıl çalıştığını ve bu kutuları nasıl yüzdüğünü öğrendikten sonra, CSS’niz hakkında ciddi olmanın zamanı geldi. Bu amaçla, istediğiniz tasarımı oluşturmanıza yardımcı olacak çok sayıda ipucu, püf noktası, teknik ve ara sıra kirli hack listesi hazırladık.

CSS zor olabilir ve siz de almalısınız. Ve şimdi, belirli bir sırayla, bilmeniz gereken her şey (neredeyse):

1. Mutlak konumlandırma

Bir öğenin web sitemizde her zaman nerede yaşadığını kontrol etmek istiyorsanız, mutlak konumlandırma bunun gerçekleşmesinin anahtarıdır. Tarayıcınızı büyük bir sınırlayıcı kutu olarak düşünüyorsanız, mutlak konumlandırma, bir öğenin tam olarak nerede kaldığını kontrol etmenizi sağlar. Bir öğenin nerede kaldığını kontrol etmek için bir piksel değeri ile birlikte üst, sağ, alt ve sol kullanın.

position:absolute;
top:20px;
right:20px

Yukarıdaki CSS, bir öğenin konumunu tarayıcınızın üst ve sağ kenarlarından 20 piksel kalacak şekilde ayarlar. Bir div içinde mutlak konumlandırma da kullanabilirsiniz.

2. * + seçici

* Belirli bir seçicinin tüm unsurları seçmenizi sağlar. Örneğin, * p kullandıysanız ve sonra buna CSS stilleri eklediyseniz, bunu <p> etiketiyle belgenizdeki tüm öğelere yapar . Bu, web sitenizin bölümlerini global olarak hedeflemenizi kolaylaştırır.

3. Tüm stilleri geçersiz kılma

Bu çok az kullanılmalıdır, çünkü bunu her şey için yaparsanız, uzun vadede kendinizi belada bulacaksınız. Ancak, belirli bir öğe için başka bir CSS stilini geçersiz kılmak istiyorsanız, css’inizdeki stillerden sonra ! Örneğin, sitemin belirli bir bölümündeki H2 başlıklarının mavi yerine kırmızı olmasını isteseydim, şu CSS’yi kullanırdım:

.section h2 { color:red !important; }

4. Merkezleme

Merkezleme zor, çünkü ne merkezlemeye çalıştığınıza bağlı. İçeriğe göre, ortalanacak öğelerin CSS’sine bakalım.

METİN

Metin, text-align: center; . Her iki tarafta olmasını istiyorsanız, orta yerine sol veya sağ kullanın.

İÇERİK

Bir div (ya da herhangi bir başka elemanı) buna blok özelliği ilave edilmesi ve daha sonra, otomatik kenar kullanılarak ortalanabilir. CSS şöyle görünecektir:

#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 
}

Genişlik için “% 100’ün altında bir şey” koymamın nedeni,% 100 genişliğinde olsaydı, tam genişlikte olması ve merkezlemeye ihtiyaç duymamasıdır. % 60 veya 550 piksel gibi sabit bir genişliğe sahip olmak en iyisidir.

5. Dikey hizalama (bir metin satırı için)

Bunu bir CSS navigasyon menüsünde kullanacaksınız, bunu neredeyse garanti edebilirim. Anahtar, menünün yüksekliğini ve metnin satır yüksekliğini aynı yapmaktır. Geri dönüp müşteriler için mevcut web sitelerini düzenlediğimde bu tekniği çok görüyorum. İşte bir örnek:

.nav li{
    line-height:50px;
    height:50px;
}

6. Fareyle üzerine gelme efektleri

Bu düğmeler, metin bağlantıları, sitenizin sekme bölümleri, simgeler ve daha fazlası için kullanılır. Birisi faresinin üzerine geldiğinde renk değiştirecek bir şey istiyorsanız, aynı CSS’yi kullanın, ancak şunu ekleyin : fareyle üzerine gelin ve stili değiştirin. İşte bir örnek:

.entry h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.entry h2:hover{
    color:#f00;
}

Bunun yaptığı, birisinin üzerine geldiğinde h2 etiketinizin rengini siyahtan kırmızıya değiştirmesidir. : Hover’ı kullanmakla ilgili en iyi şey, değişmezse yazı tipi boyutunu veya ağırlığını tekrar bildirmek zorunda olmamanızdır. Yalnızca belirttiğiniz şeyi değiştirir.

GEÇİŞ

Menülerde veya web sitenizdeki resimlerde olduğu gibi fareyle üzerine gelme efektleri için, renklerin sonuca çok hızlı bir şekilde yapışmasını istemezsiniz. İdeal olarak, geçiş özelliğinin devreye girdiği yer olan değişimi kademeli olarak kolaylaştırmak istersiniz.

.entry h2:hover{
    color:#f00;
    transition: all 0.3s ease;
}

Bu, değişikliği hemen kırmızıya yaslamak yerine .3 saniyenin üzerinde gerçekleştirir. Bu, fareyle üzerine gelme etkisini göze daha hoş ve daha az sarsıcı yapar.

7. Bağlantı durumları

Bu stiller birçok tasarımcı tarafından kaçırılır ve ziyaretçilerinizle gerçekten kullanılabilirlik sorunlarına neden olur. : Link sözde sınıfı kontrolleri henüz tıklanan edilmemiş tüm bağlantıları. : Ziyaret edilen sözde sınıfı kolları önceden ziyaret ettiğiniz bağlantılarınızın stil. Bu, web sitesi ziyaretçilerine sitenizde nerede bulunduklarını ve henüz keşfetmedikleri yerleri bildirir.

a:link { color: blue; }
a:visited { color: purple; }

8. Görüntüleri sığdırmak için kolayca yeniden boyutlandırın

Bazen orantılı olarak ölçeklenirken görüntülerin belirli bir genişliğe sığması gereken bir tutam olur. Bunu yapmanın kolay bir yolu, bunu gerçekleştirmek için maksimum genişlik kullanmaktır. İşte bir örnek:

img {
    max-width:100%;
    height:auto;
}

Bu, görüntünün en büyüğünün% 100 olduğu ve görüntünün genişliğine bağlı olarak yüksekliğin otomatik olarak hesaplandığı anlamına gelir. Bazı durumlarda, genişliği% 100 olarak belirtmeniz gerekebilir.

9. Bir bölümün elemanlarını kontrol etme

Yukarıdaki resim örneğini kullanarak, yalnızca blogunuz gibi belirli bir bölümün resimlerini hedeflemek istiyorsanız, blog bölümü için bir sınıf kullanın ve bunu gerçek seçiciyle birleştirin. Bu, yalnızca blog bölümünün resimlerini seçmenizi sağlar; logonuz veya sosyal meia simgeleri gibi diğer resimleri veya sitenizin kenar çubuğu gibi diğer bölümlerindeki resimleri seçmez. CSS şöyle görünür:

.blog img{
    max-width:100%;
    height:auto;
}

10. Doğrudan çocuklar

Keşke CSS kullanmaya ilk başladığımda bunu bilseydim. Bu bana çok zaman kazandıracaktı! Bir öğenin doğrudan alt öğelerini seçmek için > düğmesini kullanın . Örneğin:

#footer > a

Bu, hemen Altbilgi Kimliği altındaki tüm etkin bağlantı öğelerini seçecek ve şekillendirecektir. Etkin öğeyi aşan hiçbir şey veya altbilgide yer alan düz metin gibi başka bir şey seçmez. Bu, üst düzey gezinme öğeleriyle de harika çalışır.

BELİRLİ ALT UNSURLAR

İnanın, bu listeleri şekillendirirken kullanışlıdır. Sadece öğeyi aşağıya doğru stilize etmek istediğiniz öğeyi saymanız ve ardından bu stili uygulamanız yeterlidir.

li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}

Yukarıdaki CSS, listedeki ikinci öğeyi hedefler ve kalın, altı çizili ve mavi yapar. Parantez içindeki sayıdan sonra bir “n” ekleyin ve her 2. liste öğesini hedefleyebilirsiniz. Kolay okuma için diğer satırları tablo stili bir düzende şekillendirebileceğinizi hayal edin. CSS şöyle olur:

li:nth-child(2)

11. Birden fazla sınıfa veya seçiciye CSS uygulayın

Tüm resimlerin, blog bölümünün ve kenar çubuğunun çevresine aynı bir kenarlık eklemek istediğinizi varsayalım. Aynı CSS’yi 3 kez yazmak zorunda değilsiniz. Bu öğeleri virgülle ayırarak listeleyin. İşte bir örnek:

.blog, img, .sidebar {
    border: 1px solid #000;
}

İster yıllarca web tasarımcısı olun, ister yeni başlıyorsunuz, web sitelerini doğru şekilde nasıl oluşturacağınızı öğrenmek, kayalık, hiç bitmeyen bir yolculuk gibi görünebilir. Hangi dilleri öğrenmek istediğinizi daralttıktan sonra becerilerinizi öğrenmek ve geliştirmek zorundasınız.

Ne öğrenirseniz öğrenin, CSS ustalaşmanız gereken önemli ama göz korkutucu becerilerden biridir. Bununla birlikte, özellikle işi yapmak için birkaç kullanışlı ve daha az bilinen CSS tekniği biliyorsanız, bu kadar zor olmak zorunda değildir.

12. kutu boyutlandırma: sınır kutusu;

Bu, birçok web tasarımcısı arasında bir favori, çünkü dolgu ve düzen sorunları çözüyor. Temel olarak, bir kutuyu belirli bir genişliğe ayarlayıp ona dolgu eklediğinizde, dolgu kutunun boyutuna eklenir. Ancak, kutu boyutlandırma ile: border-box; , bu reddedilir ve kutular olması gerektiği boyutta kalır.

13.: before

Bu CSS, bir CSS öğesi seçmenize ve belirli bir sınıfa uygulanmış her öğeden önce içerik eklemenize izin veren bir seçicidir. Her H2 etiketinden önce belirli bir metin istediğiniz bir web siteniz olduğunu varsayalım. Bu kurulumu bize yaparsınız:

h2:before { 
    content: "Read: ";
<span class="Apple-converted-space">    color: #F00;</span>
}

Bu, özellikle bir simge yazı tipi kullanıyorsanız son derece kullanışlıdır. Simgeleri belirli öğelerin önüne yerleştirebilir ve global olarak uygulayabilirsiniz.

14.: after

Seçici: öncesi gibi, belirli öğelere global olarak içerik eklemek için: after öğesini kullanabilirsiniz. Pratik bir kullanım, bir blogdaki her alıntıdan sonra “daha fazla bilgi” eklemektir. Bunu nasıl yapacağınız aşağıda açıklanmıştır.

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

15. içerik

içerik , denetlemek istediğiniz bir öğeyi eklemeniz gerektiğinde kullanışlı olan bir CSS özelliğidir. Bunun için gördüğüm en yaygın kullanım, belirli bir yere bir simge yazı tipinden bir simge eklemektir. Yukarıdaki örneklerde, eklemek istediğiniz metni tırnak içine almanız gerektiğini görebilirsiniz.

16. CSS sıfırlama

Farklı tarayıcıların varsayılan CSS ayarları vardır, bu yüzden bunları sıfırlamak gerekir, böylece eşit, tutarlı bir oyun alanınız vardır. Bunu bir ev inşa etmek olarak düşünün ve bir dağın kenarında, kumlu bir plajda veya ormanlık bir alanın ortasında inşa edip etmediğinizi, bu temelin düz olmasını istersiniz.

Bu CSS sıfırlama yöntemi, tüm web siteleriniz için standart bir temel oluşturur ve CSS başlangıç ​​noktalarında tutarlılık sağlar. İstenmeyen sınırları, önceden belirlenmiş kenar boşluklarını, dolguları, satır yüksekliklerini, listelerdeki stilleri vb. Kaldırır. Eric Meyer iyi çalışan bir tane yarattı .

17. Damla kapakları

Herkes damla kapaklarını sever. Bize geleneksel basılı kitabı hatırlatır ve bir içerik sayfası başlatmanın harika bir yoludur. Yani 1 ^st , geniş mektup gerçekten dikkatinizi çeken. Css’de bir alt başlık oluşturmanın kolay bir yolu vardır ve sözde öğesi:: ilk harfini kullanmaktır. İşte bir örnek:

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

Bunun yaptığı, harfi diğer harflerin boyutunun 3 katı olacak şekilde ayarlamaktır. Çakışmayı önlemek için harfin etrafında 3 piksel boşluk belirler ve harfin rengini kırmızı olarak ayarlar.

18. Metni tamamen büyük harf, küçük harf veya büyük harf olmaya zorla

Tüm büyük harflere bölümün tamamını yazmak saçma olur. Geri dönüp web sitesinin formatı değiştiğinde veya güncellendiğinde bunu düzeltmeniz gerektiğini düşünün. Bunun yerine, metni belirli bir biçimlendirmeye zorlamak için aşağıdaki css stillerini kullanın. Bu css, h2 başlık etiketini hedefler.

• h2 {text-transform: büyük harf; } – tümü büyük harf
• h2 {metin dönüşümü: küçük harf; } – tümü küçük harf
• h2 {text-transform: büyük harf kullanımı; } – 1 istifade eder ^st her kelimenin harfi.

19. Dikey ekran yüksekliği

Bazen ekranın boyutu ne olursa olsun bir bölümün tüm ekranı doldurmasını istersiniz. Bunu vh ile kontrol edebilir veya yüksekliği görüntüleyebilirsiniz. Bundan önceki sayı yüzde olarak verilmiştir, bu nedenle tarayıcının% 100’ünü doldurmasını isterseniz 100’e ayarlarsınız. Sabit bir gezinme menüsünü barındırmak için% 85 gibi bir değere ayarlayabilirsiniz.

Kap için bir sınıf oluşturun ve olmasını istediğiniz vh miktarını uygulayın. Ayarlamanız gerekebilecek bir şey, portre modundaki telefonlar gibi belirli ekranlar veya yönler için medya sorgu değeridir. Bir yatay görüntüyü portre moduna sığacak şekilde uzattığınızı düşünün. Bu iyi görünmezdi.

.fullheight { height: 85vh; }

20. Stil telefon bağlantıları

Bir kullanıcı telefonuna dokunduğunda bir telefon numarasını çağıran bir bağlantınız varsa, geleneksel etkin bağlantı seçici ile bu numarayı biçimlendirmekte sorun yaşayabilirsiniz. Bunun yerine, aşağıdaki CSS’yi kullanın:

a[href^=tel] {
<span class="Apple-converted-space">    color: #FFF;</span>
<span class="Apple-converted-space">    text-decoration: none;</span>
}