Web Tasarımcılarının Bilmesi Gereken CSS Püf Noktaları

1996 yılında dünyaya tanıtılmasından bu yana CSS, web tasarımının görsel bölümünün temelini olmuştur. Bir web tasarımının mizanpajı, tipografisi ve renkleri gibi unsurlarının kısacası arayüzünün inşaasında CSS bilgisi gereklidir . Bir web tasarımcısı olarak temel CSS püf noktalarını bilmek, işinizi geliştirmenize, daha iyi bir görünüme ve hisse sahip web sayfaları üretmenize ve onları daha duyarlı ve kullanıcı dostu hale getirmenize yardımcı olmaktadır diyebilirim.

Bu yazıda, web tasarımcısının bilmesi gereken 5 CSS püf noktayı belirteceğim. Bu teknikler, kesinlikle kalabalığın arasından sıyrılacak güzel ve duyarlı web siteleri oluşturmanıza yardımcı olacaktır.

Tasarımcılar için Temel CSS Püf Noktaları

Grid Düzeni

Grid düzeni, tasarımcıların kolayca karmaşık düzenler oluşturmasını sağlayan güçlü bir araçtır. Satırları ve sütunları tanımlayabilir ve ardından içlerine öğeler yerleştirebilirsiniz. Bir fotoğraf galerisi gibi uzamsal olarak mantıksal olarak düzenlenmesi gereken birçok benzer öğeyle uğraşırken özellikle yararlıdırlar.

Grid düzenini kullanmak için, önce display: grid özelliğiyle bir kapsayıcı öğeyi grid olarak tanımlarsınız. Ardından, sırasıyla grid-template-rows ve grid-template-columns* özelliklerini kullanarak her satırın ve sütunun boyutunu ve yerleşimini belirleyebilirsiniz. Son olarak, grid-column ve grid-row özelliklerini kullanarak öğeleri gride yerleştirebilirsiniz.

İşte grid düzeninin nasıl kullanılacağına dair basit bir örnek:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

.item {
grid-column: 1 / 3;
grid-row: 2;
}

Bu örnekte, üç sütun ve aralarında 20 piksel boşluk bulunan bir container oluşturmak için bir grid kullanıyoruz. Ayrıca ikinci satıra bir öğe yerleştiriyoruz ve onu iki sütuna yayıyoruz.

Flexbox

Flexbox, tasarımcıların kolaylıkla duyarlı düzenler oluşturmasına olanak tanıyan başka bir güçlü düzen aracıdır. Flexbox ile esnek bir container tanımlayabilir ve ardından bu kapsayıcı içine öğeler yerleştirebilirsiniz.

Flexbox’ı kullanmak için, önce bir container öğesini display: flex özelliğiyle bir esnek container olarak tanımlarsınız . Ardından, justify-content ve align-items gibi özellikleri kullanarak öğelerin ana ve çapraz eksenler boyunca nasıl dağıtılacağını belirtebilirsiniz . Esnek temel özelliğini kullanarak her bir öğenin boyutunu da ayarlayabilirsiniz.

İşte Flexbox’ın nasıl kullanılacağına dair bir örnek:

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

.item {
flex-basis: 30%;
}

Bu örnekte, eşit aralıklarla yerleştirilmiş ve dikey olarak ortalanmış öğeler içeren bir container oluşturmak için bir flexbox kullanıyoruz.

Geçişler ve Animasyonlar

Hem geçişler hem de animasyonlar, web sitenize etkileşim ve görsel ilgi eklemek için harika araçlardır. Geçişlerle, özelliklerin zaman içinde nasıl değişeceğini belirtebilirsiniz, animasyonlar ise keyframeler yardımıyla animasyonlu içerik oluşturmanıza olanak tanır.

Geçişleri kullanmak için önce özellikleri kullanarak bir öğenin başlangıç ​​ve bitiş durumlarını tanımlarsınız. Ardından, hangi özelliklerin geçiş yapması gerektiğini ve geçişin ne kadar sürmesi gerektiğini belirtmek için geçiş özelliğini kullanabilirsiniz. Öğenin durumu değiştiğinde (örneğin, kullanıcı öğenin üzerine geldiğinde), geçiş gerçekleşir.

Bir buton üzerinde fareyle üzerine gelme efekti oluşturmak için geçişlerin nasıl kullanılacağına ilişkin bir örneği burada bulabilirsiniz:

.button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.5s ease;
}

.button:hover {
background-color: #fff;
color: #333;
}

Bu örnekte, buton arka plan rengi özelliği, zamanlama kolaylığı işleviyle 0,5 saniye boyunca geçiş yapacak şekilde ayarlanmıştır. Kullanıcı mouse ile butonun üzerine getirdiğinde, arka plan rengi beyaza dönerek basit ama etkili bir mouse üzerine gelme efekti oluşturur.

Özel Yazı Tipleri

Özel yazı tipleri, tasarımcıların web siteleri için benzersiz ve akılda kalıcı tipografi oluşturmalarına olanak tanır. Tasarımcılar, özel yazı tiplerini kullanarak web sitelerini rakiplerinden ayırabilir ve daha tutarlı ve sürükleyici bir deneyim yaratabilir.

Özel yazı tiplerini kullanmak için öncelikle beğendiğiniz bir yazı tipini bulup indirmeniz gerekir. Daha sonra yazı tipi dosyalarını web sitenize yükleyebilir ve yazı tipini metninize uygulamak için CSS’i kullanabilirsiniz. Yazı tipini tanımlamak için @font-face kuralını kullanabilir veya yazı tipi dosyalarını barındırmak için Google Yazı Tipleri gibi bir hizmeti kullanabilir ve yazı tipini web sitenize eklemenin basit bir yolunu sağlayabilirsiniz.

İşte özel yazı tiplerinin @font-face kuralıyla nasıl kullanılacağına dair bir örnek:

@font-face {
font-family: ‘My Custom Font’;
src: url(‘my-custom-font.woff2’) format(‘woff2’),
url(‘my-custom-font.woff’) format(‘woff’);
}

h1 {
font-family: ‘My Custom Font’, sans-serif;
}

Bu örnekte, @font-face kuralını kullanarak “My Custom Font” adlı özel bir font tanımlıyoruz . Daha sonra font-family özelliğini kullanarak bu fontu bir h1 öğesine uyguluyoruz .

Değişkenler

Özel özellikler olarak da bilinen değişkenler, tasarımcıların CSS’lerinde kullanılabilecek yeniden kullanılabilir değerleri tanımlamasına olanak tanır. Bu, tutarlı ve modüler stiller oluşturmayı kolaylaştırabilir ve gelecekte stilleri güncellemeyi de kolaylaştırabilir.

CSS’de değişkenleri kullanmak için önce — önekini kullanarak tanımlayın. Daha sonra bu değişkeni var() işleviyle referans göstererek CSS’niz boyunca kullanabilirsiniz. JavaScript kullanarak değişkenin değerini dinamik olarak da güncelleyebilirsiniz.

İşte CSS’de değişkenlerin nasıl kullanılacağına dair bir örnek:

:root {
–primary-color: #007bff;
}

button {
background-color: var(–primary-color);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}

button:hover {
background-color: #fff;
color: var(–primary-color);
}

Bu örnekte, bir birincil renk değişkeni tanımlıyor ve onu mavi bir tona ayarlıyoruz. Daha sonra bir butonun arka plan rengini ayarlamak için bu değişkeni kullanıyoruz. Kullanıcı mouse ile butonun üzerine getirdiğinde, arka plan rengi beyaza ve renk, değişkeni kullanarak ayarladığımız ana renge dönüşür.