CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stilini düzenlemek için kullanılan bir dildir. Bu makalede, çeşitli CSS fonksiyonlarına odaklanacağız ve bunların nasıl kullanıldığını anlatacağız.
attr(): Seçilen öğenin bir özniteliğinin değerini döndürme
CSS’de attr() fonksiyonu, bir HTML öğesinin özniteliğinin değerini almak için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile attr() fonksiyonunun kullanımı */ h1::before { content: attr(data-custom-text); color: blue; } </style> <title>attr() Fonksiyonu Örneği</title> </head> <body> <!-- HTML ile attr() fonksiyonunun kullanımı --> <h1 data-custom-text="Merhaba Dünya!"></h1> </body> </html> |
Bu örnekte, h1 başlığına data-custom-text adında özel bir öznitelik ekledik. Ardından CSS içinde ::before seçicisi ile attr(data-custom-text) kullanarak bu özniteliğin değerini alıp, başlığın önüne ekledik.
Açıklama:
data-custom-text: Bu öznitelik,h1başlığının içeriğini özelleştirmek için kullanılır.::before: Bu seçici, seçilen öğenin içine bir içerik eklememizi sağlar.attr(data-custom-text): Bu ifade, seçilen öğenindata-custom-textözniteliğinin değerini içeriğe ekler.color: blue;: Eklenen içeriğin rengini mavi olarak belirler.
Bu örnek, attr() fonksiyonunun bir öğenin özniteliğini alarak CSS içinde nasıl kullanılabileceğini basit bir şekilde gösterir.
calc(): CSS özellik değerlerini hesaplamak için
calc() fonksiyonu, CSS özelliklerinde hesaplamalar yapmak için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile calc() fonksiyonunun kullanımı */ div { width: calc(50% - 20px); height: 100px; background-color: lightblue; margin: 20px; } </style> <title>calc() Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte, bir div öğesi oluşturduk ve calc() fonksiyonunu kullanarak width özelliğini hesaplamalı bir şekilde ayarladık.
Açıklama:
width: calc(50% - 20px);: Bu ifade,divöğesinin genişliğini tarayıcının genişliğinin yarısı ve 20 piksel çıkarmak suretiyle hesaplar. Bu, öğenin genişliğini dinamik olarak ayarlamamıza olanak tanır.height: 100px;:divöğesinin sabit bir yüksekliğe sahip olmasını sağlar.background-color: lightblue;:divöğesinin arka plan rengini belirler.margin: 20px;:divöğesine 20 piksel marj ekler, böylece etrafında bir boşluk oluşur.
Bu örnek, calc() fonksiyonunun özellikle genişlik ve yükseklik gibi değerleri hesaplamak için nasıl kullanılabileceğini gösterir.
conic-gradient(): Konik gradyan oluşturma
Bu fonksiyon, konik bir gradyan arka plan oluşturmak için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile conic-gradient() fonksiyonunun kullanımı */ div { width: 200px; height: 200px; background: conic-gradient(red, yellow, green); } </style> <title>conic-gradient() Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte, bir div öğesi oluşturduk ve conic-gradient() fonksiyonunu kullanarak konik bir gradyan arka plan oluşturduk.
Açıklama:
width: 200px; height: 200px;:divöğesinin genişliği ve yüksekliği sabit bir değere ayarlanmıştır.background: conic-gradient(red, yellow, green);: Bu ifade,divöğesinin arka planını oluşturan konik bir gradyanı belirtir. Gradyan, sırasıyla kırmızı, sarı ve yeşil renklerini içerir.
Bu örnek, conic-gradient() fonksiyonunun kullanımını basit bir şekilde gösterir. Bu fonksiyon, özellikle arka planlarda renk geçişlerini daha dinamik ve görsel olarak çekici hale getirmek için kullanılır.
linear-gradient(): Doğrusal gradyan oluşturma
Doğrusal gradyan, bir rengin diğerine doğru bir geçiş oluşturur. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile linear-gradient() fonksiyonunun kullanımı */ div { width: 200px; height: 200px; background: linear-gradient(to right, red, blue); } </style> <title>linear-gradient() Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte, bir div öğesi oluşturduk ve linear-gradient() fonksiyonunu kullanarak doğrusal bir gradyan arka plan oluşturduk.
Açıklama:
width: 200px; height: 200px;:divöğesinin genişliği ve yüksekliği sabit bir değere ayarlanmıştır.background: linear-gradient(to right, red, blue);: Bu ifade,divöğesinin arka planını oluşturan doğrusal bir gradyanı belirtir. Gradyan, soldan sağa doğru kırmızıdan maviye bir renk geçişi içerir.
linear-gradient() fonksiyonu, belirtilen yönde renk geçişleri oluşturarak web sayfalarına dinamik bir görünüm kazandırabilir. Bu fonksiyon, özellikle arka planlarda ve çeşitli tasarım öğelerinde kullanılabilir.
radial-gradient(): Yay gradyan oluşturma
Yay gradyan, merkezden dışa doğru renk geçişleri oluşturur. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile radial-gradient() fonksiyonunun kullanımı */ div { width: 200px; height: 200px; background: radial-gradient(circle, red, yellow); } </style> <title>radial-gradient() Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte, bir div öğesi oluşturduk ve radial-gradient() fonksiyonunu kullanarak yay şeklinde bir gradyan arka plan oluşturduk.
Açıklama:
width: 200px; height: 200px;:divöğesinin genişliği ve yüksekliği sabit bir değere ayarlanmıştır.background: radial-gradient(circle, red, yellow);: Bu ifade,divöğesinin arka planını oluşturan yay şeklinde bir gradyanı belirtir. Gradyan, merkezden dışa doğru kırmızıdan sarıya bir renk geçişi içerir.
radial-gradient() fonksiyonu, belirli bir noktadan merkeze doğru yayılan renk geçişleri oluşturarak özellikle arka planlarda ve tasarım öğelerinde kullanılabilir.
repeating-linear-gradient() ve repeating-radial-gradient(): Tekrarlanan doğrusal ve yay gradyanlar
Bu fonksiyonlar, belirli bir deseni tekrarlayan gradyanlar oluşturmak için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile repeating-linear-gradient() fonksiyonunun kullanımı */ div { width: 200px; height: 200px; background: repeating-linear-gradient(to right, red, blue 20px); margin-bottom: 20px; } /* CSS ile repeating-radial-gradient() fonksiyonunun kullanımı */ span { display: inline-block; width: 100px; height: 100px; background: repeating-radial-gradient(circle, red, yellow 20px); } </style> <title>Repeating Gradyanlar Örneği</title> </head> <body> <!-- HTML içinde bir div ve bir span öğesi --> <div></div> <span></span> </body> </html> |
Bu örnekte, repeating-linear-gradient() ve repeating-radial-gradient() fonksiyonlarını kullanarak tekrarlanan doğrusal ve yay gradyanlar oluşturduk.
Açıklama:
- repeating-linear-gradient():
width: 200px; height: 200px;:divöğesinin genişliği ve yüksekliği sabit bir değere ayarlanmıştır.background: repeating-linear-gradient(to right, red, blue 20px);: Bu ifade,divöğesinin arka planını oluşturan, soldan sağa doğru tekrarlanan bir doğrusal gradyanı belirtir. Gradyan, kırmızıdan maviye doğru renk geçişini 20 piksel aralıklarla tekrar eder.
- repeating-radial-gradient():
display: inline-block; width: 100px; height: 100px;:spanöğesinin görüntüsünü düzenlemek için stil özellikleri ayarlanmıştır.background: repeating-radial-gradient(circle, red, yellow 20px);: Bu ifade,spanöğesinin arka planını oluşturan, merkezden dışa doğru tekrarlanan bir yay gradyanını belirtir. Gradyan, kırmızıdan sarıya doğru renk geçişini 20 piksel aralıklarla tekrar eder.
Bu örnek, tekrarlanan gradyanların nasıl oluşturulacağını gösterir ve özellikle desenler oluşturmak için kullanışlıdır.
rgb() ve rgba(): RGB ve RGBA renk tanımlama
Bu fonksiyonlar, renkleri RGB (Red-Green-Blue) veya RGBA (Red-Green-Blue-Alpha) modeline göre tanımlamak için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile rgb() fonksiyonunun kullanımı */ p { color: rgb(255, 0, 0); } /* CSS ile rgba() fonksiyonunun kullanımı */ span { display: inline-block; width: 100px; height: 100px; background: rgba(0, 128, 255, 0.5); } </style> <title>RGB ve RGBA Renk Fonksiyonları Örneği</title> </head> <body> <!-- HTML içinde bir paragraf ve bir span öğesi --> <p>RGB Renk: Kırmızı</p> <span>RGBA Renk: Mavi</span> </body> </html> |
Bu örnekte, rgb() ve rgba() fonksiyonlarını kullanarak renk tanımlamalarını gösterdik.
Açıklama:
- rgb():
color: rgb(255, 0, 0);: Bu ifade,pöğesinin metin rengini RGB modeline göre belirtir. Burada kullanılan(255, 0, 0)değerleri, tamamen kırmızı bir rengi temsil eder.
- rgba():
display: inline-block; width: 100px; height: 100px;:spanöğesinin görüntüsünü düzenlemek için stil özellikleri ayarlanmıştır.background: rgba(0, 128, 255, 0.5);: Bu ifade,spanöğesinin arka plan rengini RGBA modeline göre belirtir. Burada kullanılan(0, 128, 255)değerleri, tamamen mavi bir rengi temsil ederken,0.5alpha (saydamlık) değeri yarı saydamlığı ifade eder.
Bu örnek, rgb() ve rgba() fonksiyonlarının renk tanımlamalarında nasıl kullanılabileceğini basit bir şekilde gösterir.
var(): Özel özellik değerini eklemek
var() fonksiyonu, özel bir özelliğin değerini eklemek için kullanılır. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile var() fonksiyonunun kullanımı */ :root { --main-color: #3498db; } a { color: var(--main-color); text-decoration: none; border: 2px solid var(--main-color); padding: 8px; display: inline-block; margin: 20px; } </style> <title>var() Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir bağlantı öğesi --> <a href="#">Özel Renkli Bağlantı</a> </body> </html> |
Bu örnekte, var() fonksiyonunu kullanarak özel bir özelliğin değerini belirttik ve bu değeri bir bağlantı öğesinin rengi ve kenarlık rengi olarak kullandık.
Açıklama:
:root { --main-color: #3498db; }::rootseçicisi, belirtilen değeri kök (root) elementine ekler. Burada--main-colorisimli özel bir özellik tanımlanır ve bu özellik bir renk değeri (#3498db) ile ilişkilendirilir.a { color: var(--main-color); }:aöğesinin metin rengini--main-colorözel özelliğin değeri ile belirler.border: 2px solid var(--main-color);: Bağlantı öğesine 2 piksel kalınlığında ve--main-colorözel özelliğin değeri ile aynı renkte bir kenarlık ekler.padding: 8px; display: inline-block; margin: 20px;: Diğer stil özellikleri, bağlantı öğesinin genel görünümünü düzenler.
Bu örnek, var() fonksiyonunun özel özellik değerlerini tanımlamak ve kullanmak için nasıl kullanılabileceğini gösterir.
Dönüşüm Fonksiyonları
CSS’de dönüşüm fonksiyonları (transform functions) da oldukça önemli ve yaygın kullanılan bir konsepttir. Bu fonksiyonlar, öğelerin konumlarını, boyutlarını ve dönme açılarını değiştirmek için kullanılır. İşte bazı yaygın transform fonksiyonları ve bunların kullanıldığı bir örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile transform fonksiyonlarının kullanımı */ div { width: 100px; height: 100px; background-color: #3498db; transform: translate(50px, 20px) rotate(45deg) scale(1.5); /* 50 piksel sağa, 20 piksel aşağıya kaydır, 45 derece döndür, boyutu 1.5 kat büyüt */ } </style> <title>Transform Fonksiyonları Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte, transform özelliği kullanılarak öğenin pozisyonu, dönüşü ve boyutu değiştirilmiştir.
Açıklama:
transform: translate(50px, 20px) rotate(45deg) scale(1.5);: Bu ifade, öğenin konumunu (50 piksel sağa, 20 piksel aşağıya), dönüş açısını (45 derece) ve boyutunu (1.5 kat) değiştiren bir dönüşüm kombinasyonunu ifade eder.
Transform fonksiyonları, animasyonlar ve öğelerin düzenini dinamik olarak kontrol etmek için çok güçlüdür. translate, rotate, scale gibi temel dönüşüm fonksiyonlarının yanı sıra skew, matrix, rotateX, rotateY gibi diğer dönüşüm fonksiyonları da bulunmaktadır.
Ölçekleme Fonksiyonları
CSS içindeki ölçekleme (scaling) fonksiyonları, öğelerin boyutlarını değiştirmek için kullanılır. Temel ölçekleme fonksiyonu scale() fonksiyonudur ve genellikle diğer dönüşüm fonksiyonları ile birleştirilerek bir öğenin boyutunu kontrol etmek için kullanılır. İşte scale() fonksiyonunun kullanıldığı bir örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS içinde ölçekleme fonksiyonları */ div { width: 100px; height: 100px; background-color: #3498db; transition: transform 0.3s ease-in-out; } div:hover { transform: scale(1.5); /* Öğeyi üzerine gelindiğinde boyutunu 1.5 katına çıkar */ } </style> <title>Ölçekleme Fonksiyonları Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte:
transform: scale(1.5);:divöğesine gelindiğindescale()fonksiyonu uygulanır. Bu fonksiyon, öğeyi orijinal boyutunun 1.5 katına çıkartır.transition: transform 0.3s ease-in-out;:transitionözelliği,transformözelliğine yumuşak bir geçiş efekti oluşturmak için kullanılır. Ölçekleme değişikliği, 0.3 saniye süresince bir giriş-çıkış yumuşak geçiş fonksiyonu ile gerçekleşir.
scale() fonksiyonunun değerini değiştirerek farklı ölçekleme efektleri elde edebilirsiniz. Örneğin, scale(0.5) öğeyi orijinal boyutunun yarısına küçültürken, scale(2) öğeyi iki kat büyütür.
Ölçekleme fonksiyonları, özellikle duyarlı tasarım ve etkileşimli kullanıcı arayüzleri için öğelerin boyutunu değiştirmenin görsel olarak çekici bir yolu olarak kullanılır.
Skew Fonksiyonları
CSS içindeki “skew” fonksiyonları, öğelerin eğikliğini veya çarpıklığını değiştirmek için kullanılır. Temel olarak iki farklı “skew” fonksiyonu bulunmaktadır: skewX() ve skewY().
İşte her iki “skew” fonksiyonunun kullanıldığı bir HTML ve CSS örneği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile skew fonksiyonlarının kullanımı */ div { width: 100px; height: 100px; background-color: #3498db; transition: transform 0.3s ease-in-out; } div:hover { transform: skewX(45deg) skewY(15deg); /* Öğeyi üzerine gelindiğinde X ekseni boyunca 45 derece, Y ekseni boyunca 15 derece eğ */ } </style> <title>Skew Fonksiyonları Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte:
transform: skewX(45deg) skewY(15deg);:divöğesine gelindiğindeskewX()veskewY()fonksiyonları uygulanır. Bu fonksiyonlar, öğeyi sırasıyla X ekseni boyunca 45 derece ve Y ekseni boyunca 15 derece eğik yapar.transition: transform 0.3s ease-in-out;:transitionözelliği,transformözelliğine yumuşak bir geçiş efekti uygulamak için kullanılır. Skew değişikliği, 0.3 saniye süresince bir giriş-çıkış yumuşak geçiş fonksiyonu ile gerçekleşir.
skew fonksiyonları, özellikle geometrik şekilleri veya kullanıcı arayüzlerindeki öğeleri çarpıtmak ve eğmek için kullanılır. Değerlerin pozitif veya negatif olması, eğiklik yönünü belirler. Bu fonksiyonlar, öğeleri daha organik ve dinamik hale getirmek için kullanışlıdır.
Rotate Fonksiyonları
CSS içindeki “rotate” fonksiyonları, öğeleri döndürmek için kullanılır. Temel olarak iki farklı “rotate” fonksiyonu vardır: rotate() ve rotate3d().
İşte her iki “rotate” fonksiyonunun kullanıldığı bir HTML ve CSS örneği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile rotate fonksiyonlarının kullanımı */ div { width: 100px; height: 100px; background-color: #3498db; transition: transform 0.3s ease-in-out; } div:hover { transform: rotate(45deg); /* Öğeyi üzerine gelindiğinde 45 derece döndür */ } </style> <title>Rotate Fonksiyonları Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte:
transform: rotate(45deg);:divöğesine gelindiğinderotate()fonksiyonu uygulanır. Bu fonksiyon, öğeyi saat yönünde 45 derece döndürür.transition: transform 0.3s ease-in-out;:transitionözelliği,transformözelliğine yumuşak bir geçiş efekti uygulamak için kullanılır. Dönüş değişikliği, 0.3 saniye süresince bir giriş-çıkış yumuşak geçiş fonksiyonu ile gerçekleşir.
rotate fonksiyonları, öğeleri belirli bir derece açıyla döndürmek için kullanılır. Bu, animasyonlar, sayfalar arası geçişler veya kullanıcı etkileşimleri gibi durumlar için görsel çekicilik sağlar.
Matrix fonksiyonları
“matrix” fonksiyonu, CSS transform özelliğinde kullanılan temel bir matematiksel dönüşüm fonksiyonudur. Bu fonksiyon, öğeleri 2D düzlemde döndürmek, ölçeklendirmek ve kaydırmak için kullanılır. matrix() fonksiyonu, altı parametre alır ve bu parametreler bir dönüşüm matrisini temsil eder.
İşte matrix() fonksiyonunun kullanıldığı bir HTML ve CSS örneği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* CSS ile matrix fonksiyonunun kullanımı */ div { width: 100px; height: 100px; background-color: #3498db; transition: transform 0.3s ease-in-out; } div:hover { transform: matrix(1, -0.5, 0, 1, 20, 10); /* Öğeyi üzerine gelindiğinde belirtilen dönüşüm matrisini uygula */ } </style> <title>Matrix Fonksiyonu Örneği</title> </head> <body> <!-- HTML içinde bir div öğesi --> <div></div> </body> </html> |
Bu örnekte:
transform: matrix(1, -0.5, 0, 1, 20, 10);:divöğesine gelindiğindematrix()fonksiyonu uygulanır. Bu fonksiyon, bir dönüşüm matrisini belirtir. Altı parametresi sırasıylamatrix(a, b, c, d, e, f)şeklinde yer alır ve bu değerler öğenin döndürülmesi, ölçeklendirilmesi ve kaydırılması için kullanılır.transition: transform 0.3s ease-in-out;:transitionözelliği,transformözelliğine yumuşak bir geçiş efekti uygulamak için kullanılır. Matris dönüşümü, 0.3 saniye süresince bir giriş-çıkış yumuşak geçiş fonksiyonu ile gerçekleşir.
Matris fonksiyonları, öğelerin dönüşümünü daha karmaşık ve özelleştirilmiş bir şekilde kontrol etmek için kullanılır. Bu fonksiyonlar genellikle diğer temel dönüşüm fonksiyonları olan rotate(), scale(), ve translate() ile birleştirilerek kullanılır.
Matematik Fonksiyonları
CSS’de matematiksel ifadeleri değerlendirmek ve bazı matematiksel işlemleri gerçekleştirmek için kullanılan bazı fonksiyonlar bulunmaktadır. İşte bu fonksiyonların bir açıklaması:
Temel Aritmetik Fonksiyonlar:
1. calc()
calc() fonksiyonu, temel aritmetik hesaplamaları numerik değerler üzerinde gerçekleştirmek için kullanılır. Özellikle genişlik, yükseklik, kenar boyları gibi değerlerde kullanılır.
Örnek:
|
1 2 3 |
width: calc(50% - 20px); |
Bu örnekte, genişliği yüzde 50 olan bir öğeden 20 piksel çıkarılmıştır.
Karşılaştırma Fonksiyonları:
2. min()
min() fonksiyonu, bir değer listesinin en küçük değerini hesaplar.
Örnek:
|
1 2 3 |
width: min(100px, 50%, 200px); |
Bu örnekte, en küçük değeri hesaplayarak genişliği belirler.
3. max()
max() fonksiyonu, bir değer listesinin en büyük değerini hesaplar.
Örnek:
|
1 2 3 |
width: max(100px, 50%, 200px); |
Bu örnekte, en büyük değeri hesaplayarak genişliği belirler.
4. clamp()
clamp() fonksiyonu, bir değeri belirli bir aralıkta tutar. Minimum, orta ve maksimum değerleri alır ve bu değerler arasında kalan değeri kullanır.
Örnek:
|
1 2 3 |
width: clamp(200px, 50%, 500px); |
Bu örnekte, genişliği en az 200 piksel, en fazla 500 piksel olacak şekilde belirler.
Adım Değer Fonksiyonları:
5. round()
round() fonksiyonu, bir sayıyı bir yuvarlama stratejisine dayanarak yuvarlar.
Örnek:
|
1 2 3 |
width: round(3.7); |
Bu örnekte, 3.7 sayısını en yakın tam sayıya yuvarlar.
6. mod()
mod() fonksiyonu, bir sayıyı başka bir sayıya böldüğünde kalanı hesaplar. Modül işlemi, bölenle aynı işarette bir kalan döndürür.
Örnek:
|
1 2 3 |
width: mod(10, 3); |
Bu örnekte, 10’u 3’e böldüğümüzde kalanı hesaplar.
7. rem()
rem() fonksiyonu, bir sayıyı başka bir sayıya böldüğünde kalanı hesaplar. Modül işlemi, bölenden bağımsız olarak bir kalan döndürür.
Örnek:
|
1 2 3 |
width: rem(10, 3); |
Bu örnekte, 10’u 3’e böldüğümüzde kalanı hesaplar.
Bu fonksiyonlar, CSS içinde matematiksel işlemleri daha esnek bir şekilde gerçekleştirmek için kullanılır.
Son
Bu CSS fonksiyonları, web tasarımında ve geliştirmesinde daha fazla esneklik sağlar. Umarım bu makale, CSS fonksiyonlarını kullanma konusunda size rehberlik eder.
CSS ile kullanılan tüm fonksiyon listesi için: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions adresini ziyaret edebilirsiniz.
Yorum Yap