CSS Podcast'i - 020: İşlevler
'nı inceleyin.
Bu kursta şimdiye kadar çeşitli CSS işlevleriyle karşılaştınız.
grid modülünde,
minmax()
ve fit-content()
ile tanıştınız,
farklı açılar belirleniyor.
color (Renk) modülünde,
renkleri tanımlamanıza yardımcı olan rgb()
ve hsl()
tanıtıldı.
Diğer birçok programlama dili gibi CSS'de birçok yerleşik işlev vardır ihtiyaç duyduğunuzda erişebilirsiniz.
Her CSS işlevinin belirli bir amacı vardır. Bu derste, üst düzey bir genel bakış ve böylece bunları nerede ve nasıl kullanacağınızı daha iyi anlarsınız.
İşlev nedir?
İşlev, belirli bir görevi tamamlayan, adlandırılmış ve bağımsız bir kod parçasıdır. İşlev, kodunuzun içinde çağırabilmeniz ve işleve veri iletebilmeniz için adlandırılmıştır. Bu, bağımsız değişkenlerin aktarılması olarak bilinir.
Çoğu CSS işlevi yalnızca işlevlerdir.
Yani, aynı argümanlara aynı argümanları iletirseniz
her zaman aynı sonucu verirler.
kodunuzun geri kalanında neler olduğundan bağımsız olarak güncelleyin.
Bu işlevler genellikle CSS'nizdeki değerler değiştikçe yeniden hesaplanır.
dilindeki diğer öğelere
benzer bir şekilde olduğunda
ör. currentColor
gibi hesaplanan basamaklı değerler.
CSS'de yalnızca sağlanan işlevleri kullanabilirsiniz. kendi mesajınızı yazmak yerine Ancak işlevler bazı bağlamlarda iç içe yerleştirilebilir. bu da onlara daha fazla esneklik sağlar. Bu modülün ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.
İşlevsel seçiciler
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Fonksiyonel seçiciler hakkında bilgi edindiniz.
sözde sınıf modülü
gibi ayrıntılı fonksiyonların
:is()
ve
:not()
.
Bu işlevlere iletilen bağımsız değişkenler CSS seçicilerdir,
ve bu öğeler daha sonra değerlendirilir.
Öğelerle bir eşleşme varsa
CSS kuralının geri kalanı onlara uygulanır.
Özel özellikler ve var()
:root {
--base-color: #ff00ff;
}
.my-element {
background: var(--base-color);
}
Özel mülk, CSS kodunuzdaki değerleri tokenlere ayırmanızı sağlayan bir değişkendir.
Özel mülkler de şelaleden etkilenir
Bu da bağlamsal olarak manipüle edilebilecek veya yeniden tanımlanabilecek demektir.
Özel özelliklerin önünde iki tire (--
) bulunması gerekir ve özellik büyük/küçük harfe duyarlıdır.
var()
işlevi, gerekli bir bağımsız değişken alır:
değer olarak döndürmeye çalıştığınız özel özelliği seçin.
Yukarıdaki snippet'te var()
işlevi için bağımsız değişken olarak --base-color
iletildi.
--base-color
tanımlanmışsa var()
, değeri döndürür.
.my-element {
background: var(--base-color, hotpink);
}
var()
işlevine yedek bildirim değeri de aktarabilirsiniz.
Bu, --base-color
bulunamazsa
Bunun yerine, iletilen bildirim kullanılır. Bu örnek için renk, hotpink
rengidir.
Bir değer döndüren işlevler
var()
işlevi, değer döndüren CSS işlevlerinden yalnızca biridir.
İşlevler
attr()
ve
url()
, var()
ile benzer bir yapı izler:
bir veya daha fazla bağımsız değişken iletmeniz ve bunları CSS beyanınızın sağ tarafında kullanmanız gerekir.
a::after {
content: attr(href);
}
Buradaki attr()
işlevi
<a>
öğesinin href
özelliğinin içeriğini alıyor
ve ::after
sözde öğesinin content
değeri olarak ayarlanıyor.
<a>
öğesinin href
özelliğinin değeri değişecekse
bu değer, bu content
özelliğine otomatik olarak yansıtılır.
.my-element {
background-image: url('/path/to/image.jpg');
}
url()
işlevi bir dize URL'si alır ve resimleri, yazı tiplerini ve içeriği yüklemek için kullanılır.
Geçerli bir URL iletilmezse veya URL'nin işaret ettiği kaynak bulunamıyorsa
url()
işlevi tarafından hiçbir şey döndürülmez.
Renk işlevleri
color [renk] modülünde renk işlevleri hakkında bilgi edindiniz. Bu e-postayı henüz okumadıysanız kesinlikle okumanızı öneririz.
CSS'de kullanılabilen bazı renk işlevleri:
rgb()
, rgba()
, hsl()
, hsla()
, hwb()
, lab()
ve lch()
.
Bunların tümü, yapılandırma bağımsız değişkenlerinin iletildiği ve bir rengin geri döndürüldüğü benzer bir biçime sahiptir.
Matematiksel ifadeler
Diğer birçok programlama dili gibi CSS, çeşitli hesaplama türlerine yardımcı olmak için yararlı matematiksel işlevler sağlar.
calc()
calc()
fonksiyonunun parametresi tek bir matematiksel ifade alır.
Bu matematiksel ifade, çeşitli türlerin bir karışımı olabilir.
Örneğin uzunluk, sayı, açı ve frekans. Birimler de karıştırılabilir.
.my-element {
width: calc(100% - 2rem);
}
Bu örnekte, calc()
işlevi bir öğenin genişliğini boyutlandırmak için kullanılmaktadır.
%100'ü %100 oranında olduğu için
daha sonra, hesaplanan değerden 2rem
kaldırılır.
:root {
--root-height: 5rem;
}
.my-element {
width: calc(calc(10% + 2rem) * 2);
height: calc(var(--root-height) * 3);
}
calc()
işlevi, başka bir calc()
işlevinin içine yerleştirilebilir.
Ayrıca, bir ifadenin parçası olarak var()
işlevinde özel özellikler de aktarabilirsiniz.
min()
ve max()
min()
işlevi, geçirilen bir veya daha fazla bağımsız değişkenin en küçük hesaplanan değerini döndürür.
max()
işlevi tam tersini yapar: İletilen bir veya daha fazla bağımsız değişkenin en büyük değerini alır.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
Bu örnekte
genişlik 20vw
arasındaki en küçük değer olmalıdır
(görüntü alanı genişliğinin% 20'si) ve 30rem
.
Yükseklik, 20vh
arasındaki en büyük değer olmalıdır
(görüntü alanı yüksekliğinin% 20'si) ve 20rem
.
clamp()
clamp()
işlevi üç bağımsız değişken alır: minimum boyut,
belirlemektir.
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
Bu örnekte, font-size
, görüntü alanının genişliğine bağlı olarak değişken olacaktır.
vw
birimi, ekranı yakınlaştırmaya yardımcı olmak için rem
birimine eklenir.
çünkü yakınlaştırma düzeyinden bağımsız olarak vw
birimi aynı boyutta olacaktır.
Kök yazı tipi boyutuna göre bir rem
birimiyle çarpılıyorsa
clamp()
fonksiyonuna göreli bir hesaplama noktası sağlar.
min()
, max()
ve clamp
() işlevleri hakkında daha fazla bilgiyi şurada bulabilirsiniz:
bu makaleyi inceleyin.
Şekiller
İlgili içeriği oluşturmak için kullanılan
clip-path
offset-path
ve
shape-outside
CSS özellikleri, kutunuzu görsel olarak kırpmak veya içeriğin etrafından akması için bir şekil sağlamak için şekilleri kullanır.
Bu özelliklerin her ikisiyle de kullanılabilecek şekil işlevleri vardır.
Örneğin, basit şekiller
circle()
ellipse()
ve
inset()
boyutlandırmak için yapılandırma bağımsız değişkenlerini alırlar.
Daha karmaşık şekiller, ör.
polygon()
özel şekiller oluşturmak için virgülle ayrılmış X ve Y eksen değeri çiftlerini alabilirsiniz.
.circle {
clip-path: circle(50%);
}
.polygon {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
polygon()
gibi, SVG doldurma kuralını bağımsız değişken olarak alan bir path()
işlevi de vardır.
Bu, bir grafik aracıyla çizilebilecek son derece karmaşık şekillerin ortaya çıkmasına olanak tanır.
tercih edebilirsiniz.
Dönüşümler
CSS işlevlerine dair bu genel bakışta son olarak,
ve derinliğini değiştiren
yöntemleri kullanabilirsiniz.
Aşağıdaki işlevlerin tümü transform
özelliğiyle kullanılır.
Döndürme
Bir öğeyi döndürmek için
rotate()
işlevini kullanın.
Ayrıca şunu da kullanabilirsiniz:
rotateX()
rotateY()
ve
rotateZ()
işlevleri kullanabilirsiniz.
Derece, dönüş ve radyan birimlerini geçirerek dönüş seviyesini belirleyebilirsiniz.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
işlevi dört bağımsız değişken alır.
İlk 3 bağımsız değişken sayıdır ve X, Y ve Z koordinatlarını tanımlar. Dördüncü bağımsız değişken olan rotasyon, derece, açı ve dönüşleri kabul eder.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
Ölçek
Bir öğenin ölçeklendirmesini transform
ve
scale()
işlevini kullanın.
Fonksiyon, bir veya iki sayıyı pozitif ya da negatif ölçeklendirmeyi belirleyen bir değer olarak kabul eder.
Yalnızca tek bir sayı bağımsız değişkeni tanımlarsanız
hem X hem de Y ekseni aynı şekilde ölçeklendirilir ve her ikisinin de tanımlanması, X ve Y'nin kısaltmasıdır.
Tıpkı rotate()
gibi,
mevcut
scaleX()
,
scaleY()
ve
scaleZ()
bir öğeyi belirli bir eksende ölçeklendirmek için kullanılır.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
Ayrıca rotate
işlevinde olduğu gibi,
scale3d()
işlevini kullanın.
Bu, scale()
işlevine benzer ancak üç bağımsız değişken gerektirir: X, Y ve Z ölçek faktörü.
Çeviri
translate()
işlevleri, bir öğeyi doküman akışındaki konumunu korurken taşır.
Uzunluk ve yüzde değerlerini bağımsız değişken olarak kabul ederler.
translate()
işlevi, bir bağımsız değişken tanımlanırsa X eksenindeki bir öğeyi çevirir.
ve her iki bağımsız değişken de tanımlanırsa X ve Y eksenindeki bir öğeyi çevirir.
.my-element {
transform: translatex(40px) translatey(25px);
}
Diğer dönüştürme işlevlerinde olduğu gibi belirli bir eksen için belirli işlevleri kullanabilirsiniz,
kullanarak
translateX
translateY
ve
translateZ
.
Ayrıca şunu da kullanabilirsiniz:
translate3d
Bu, X, Y ve Z hareketlerini tek bir fonksiyonda tanımlamanıza olanak tanır.
Egzersiz
Bir öğeyi eğmek için
skew()
açıları bağımsız değişken olarak kabul eden işlevler.
skew()
işlevi, translate()
işlevine çok benzer bir şekilde çalışır.
Yalnızca bir bağımsız değişken tanımlarsanız bu yalnızca X eksenini etkiler. Her ikisini de tanımlarsanız
X ve Y eksenini etkiler.
Ayrıca şunu da kullanabilirsiniz:
skewX
ve
Her bir ekseni bağımsız olarak etkilemek için skewY
.
.my-element {
transform: skew(10deg);
}
Perspektif
Son olarak,
perspective
mülkü
kullanıcı ile Z düzlemi arasındaki mesafeyi değiştirmek için kullanılır.
Bu mesafe hissi verir ve tasarımlarınızda bir alan derinliği oluşturmak için kullanılabilir.
David Desandro'nun çok faydalı makalesinden bu örneği, ürünün nasıl kullanılabileceğini gösteriyor.
ile birlikte perspective-origin-x
ve perspective-origin-y
özelliklerini kullanarak tam anlamıyla 3D deneyimler oluşturun.
Animasyon işlevleri, gradyanlar ve filtreler
CSS, öğeleri animasyonunuza yardımcı olan işlevler de sunar. gradyanlar uygulayabilir ve görünümlerini değiştirmek için grafik filtreleri kullanabilir. Bu modülü mümkün olduğunca kısa ve öz tutmak için bağlı modüllerde ele alınmıştır. Bunların tümü, bu modülde gösterilen fonksiyonlara benzer bir yapıya sahiptir.
Öğrendiklerinizi sınayın
Fonksiyonlarla ilgili bilginizi test etme
CSS işlevleri hangi karakterlerle tanımlanabilir?
::
:
[]
{}
()
CSS'de yerleşik matematik işlevleri var mı?
calc()
işlevi, font-size: calc(10px + calc(5px * 3));
gibi başka bir calc()
işlevinin içine yerleştirilebilir
Aşağıdakilerden hangileri CSS şekli işlevleridir?
ellipse()
square()
inset()
polygon()
circle()
rect()