Our Blog

Bilmeniz gereken 11 CSS sırrı

by imleme
css

Henüz kullanmamış olabileceğiniz daha az bilinen CSS özelliklerini keşfedin.

CSS’ye aşina olsanız ve güzel düzenler oluşturuyor olsanız bile, yine de yeni CSS özelliklerini ve özelliklerini keşfedebilirsiniz. Bunları kullanarak, içeriğin web sitesinde nasıl davrandığı konusunda daha fazla etkiye sahip olursunuz ve aynı zamanda yaratıcı teknikleri fotoğrafçılık gibi öğelere nasıl uygulayacağınız konusunda daha fazla özgürlüğe sahip olursunuz.

Bu eğitimde, daha az bilinen bazı özellikleri inceleyeceğiz. Bunlarla deney yaparken, lütfen söz konusu özelliklerin tüm tarayıcılar tarafından desteklenmediğini unutmayın, bu nedenle bunları Kullanabilir miyim sitesinde incelemeye değer. Bazı kısa ve öz örneklere bakalım.

Daha fazla CSS ilhamı mı istiyorsunuz? En iyi CSS animasyon örneklerinin yanı sıra daha fazla CSS numarası seçkisine bakın . Bir site oluşturmaya sıfırdan başlıyorsanız, harika web sitesi oluşturucuları listemizi deneyin ve varlıkları depolamak için sizin için doğru bulut depolamayı edinin .

Neye ihtiyacınız olacak:
Favori web tarayıcınız ve geliştirici araçlarınız – Bu eğitimde kullandığım tüm özellikleri destekledikleri için Firefox veya Google Chrome kullanmanızı tavsiye ederim.
Bir kod editörü.
Görüntüler ve yazı tipleri gibi varlıklar (bunları depomdan indirebilirsiniz .
Tipografik yön
Metnin web’de sunulma şeklini geliştirmemize yardımcı olan birkaç CSS özelliği vardır.

  1. Metin vuruşu
    Adobe Illustrator veya vektör çizim uygulamalarından metin konturuna (anahat) aşinayız. Aynı efekti text-strok özelliğini kullanarak da uygulayabiliriz .

Metin konturunu CSS ile canlandırabileceğinizi bilmek güzel, ancak yalnızca kontur rengini – kontur genişliği değildir.

footer h3 {
/more styles in style.css/
//
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #000;
}

  1. :: ilk harf
    Bu sözde öğe, blok düzeyindeki öğenin ilk harfine stilleri uygular. Bu sayede, bize basılı ve kağıt dergilerinden aşina olduğumuz efektler sunabiliyoruz.

p.intro:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: .5;
margin: 15px 15px 10px 0 ;
}

  1. Gradyan metni
    Son olarak, herhangi bir karmaşık yöntem olmadan metnimize gradyan uygulayabiliriz. Bu göz alıcı etkiyi web sitemize nasıl ekleyebileceğimizi öğrenelim.

h2.contact-heading {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background: radial-gradient(#ffbc00, #ff65aa);
}

İçerik kontrolü
Aşağıdaki özellikler sayesinde, kapsayıcılarının boyutu veya oranı ne olursa olsun metin veya görüntülerin nasıl davranacağı üzerinde daha fazla kontrole sahip olabiliriz.

  1. Hat kelepçesi
    Hat kelepçe özelliği hatları belli bir sayıda metni keser. Çalışması için üç özelliğe ihtiyacımız var.

Ekran özelliği ihtiyaçları için ayarlanacak -webkit-box veya -webkit-inline-box , -webkit-box-yönlendirmek aksi kırpılması olmayacak, gizli dikey ve taşma kümesine seti.

p.shortened {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

  1. Sütun sayısı
    Sayesinde kolon-sayım özelliği, bir tarayıcı eşit sütunlar belirli bir sayıda içerik dağıtır.

.outro {
column-count: 2;
}

  1. Karakter birimi
    İlan

Metin genişliğimizi veya yüksekliğimizi karakter birimine göre sınırlayabiliriz. Eric Mayer’in belirttiği gibi , ch birimi, mevcut yazı tipindeki ‘0’ (sıfır) karakterinin genişliğini temsil eder ve bu, özellikle tek aralıklı yazı tipleriyle kombinasyon halinde kullanılır. Yazı tipi ailesi değiştikçe değişir. Buna biraz x yüksekliği gibi davranabiliriz , ancak ch , x yerine 0 karakterinin genişliğine bağlıdır.

h2.contact-heading {
/more properties in the CSS file

max-width: 8ch;
}

  1. Kelime sonu etiketi
    Bu öğretici CSS numaralarına dayanmasına rağmen, bir HTML etiketinden de bahsetmek istiyorum: . Bu, bir sözcük kesme fırsatını tanımlayan bir HTML öğesidir – tarayıcının bir satırı kesebileceği metin içinde bir konum. Bazı durumlarda kullanışlı olabilir – bir kelime oldukça uzun olduğunda ve tarayıcının kelimeyi yanlış yerlerde, örneğin bir telefon numarasında kıracağından korktuğumuzda kullanılabilir.

+0043234-343234-234

  1. Nesne uyumu
    Konteynerin boyutuna bağlı olarak görüntü davranışını kontrol edip edemeyeceğimizi merak ediyorsanız, object-fit özelliğini kontrol etmenizi tavsiye ederim . Bu, bir veya

.object-fit {
object-fit: cover;
height: 400px;
width: 100%;
}

  1. Konik gradyan
    Eğer sadece CSS kullanarak bir pasta grafiği oluşturup oluşturamayacağınızı merak ettiyseniz, iyi haber, gerçekten yapabilirsiniz! Ve bunun çözümü bizi konik gradyan fonksiyonuna getiriyor . Merkezi bir nokta etrafında döndürülen ayarlanmış renk geçişlerine sahip bir degradeden oluşan bir görüntü oluşturur (bir radyal degradede bulacağınız gibi merkezi noktadan yaymak yerine ).

.piechart {
background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%);
border-radius: 50%;
width: 300px;
height: 300px;
}

  1. Sayaçlar
    Numaralandırılmış bir listedeki sayıların stilini belirlemek için CSS sayaçları adı verilen özelliklerle oynamamız gerekir. CSS sayaçları, içeriğin bir belgedeki konumuna göre görünümünü ayarlamanıza olanak tanır.
    CSS sayaçlarını kullanmak için:

Sayaçlarını değer artırılıp azaltılabilir karşı arttırma
Bir içerik özelliğinden counter () veya counters () işlevini kullanarak sayacın değerini görüntüleyebiliriz.

ol.numbered-list > li:before {
content: counter(li);
position: absolute;
box-sizing: border-box;
width: 45px;
height: 45px;
background: #f3b70f;
border-radius: 50%;
}
ol.numbered-list li {
position: relative;
left: 0px;
list-style: none;
counter-increment: li;
}

  1. Metin Seçimi rengini değiştirin
    Metin Seçimi rengini değiştirmek için :: selection , metin vurgu rengini seçtiğiniz bir renkle değiştirmek için tarayıcı düzeyinde geçersiz kılan sözde bir öğedir. İmleç ile içeriği seçtiğinizde renk görülebilir.

::selection {
background-color: #f3b70f;
}

  1. @support
    İlan

Tüm tarayıcılar tarafından desteklenmeyen bir CSS özelliğini kullanmak istediğinizde, @support kuralı adında bir özellik sorgusu vardır . Bu, CSS özelliği: değer çiftleri için tarayıcı desteğini kontrol etmenizi sağlar. @Support bloğuna dahil edilen kod, yalnızca bu koşullar doğruysa işlenecektir.

Tarayıcı @support’u anlamıyorsa , kodun belirli bir bölümünü de oluşturmaz.

@supports (text-stroke: 4px navy;) {
.example {
text-stroke: 4px navy;
}
}

Bazı özellikler yine de tarayıcıların uyumluluğuyla ilgili sorunlar yaşayabilir, ancak onlarla oynamaktan çekinmeyin. Tarayıcı desteğiniz şu anda sınırlı olsa da, bunlar gelecekte büyük olasılıkla yaygın uygulamalar haline gelecektir. Bu sadece bir zaman meselesi. Bu efektlerin yalnızca onları oluşturabilen tarayıcılarda yüklenmesini sağlamak istiyorsanız , stilleri sarmak için @supports kuralını kullanın.

Daha fazla ilham almak isterseniz Jen Simmons ve Mozilla , araçlar ve teknikler, yenilikler ve en iyi uygulamalar da dahil olmak üzere web tasarımı ve geliştirmeyle ilgili videolarla dolu bir YouTube kanalı olan Layout Land’i başlattı . Ek olarak, Firefox DevTools’u kullanarak renk kontrastını nasıl test edeceğinizi ve renk körlüğünü nasıl simüle edeceğinizi öğrenebilirsiniz . Web sitenizin karmaşıklığını düşünürken, web barındırma hizmetinizin hedeflerinizi yansıttığından emin olun.

Bu CSS hileleriyle tasarımlarınızda devrim yaratın

 

Comments are closed.

Your nameYour emailYour text

Kategoriler

Log in
Register
Send message