Etkileyici Web Tasarımı: CSS Transform Scale Nasıl Kullanılır?

Merhaba dostlar! Bugün sizlerle birlikte CSS’in büyülü dünyasına dalıyoruz. CSS, web sayfalarımızı biçimlendirmek için kullandığımız bir stil dilidir. CSS transform scale özelliği, bir elementin boyutunu değiştirmemizi sağlar. Bu rehberde, CSS transform scale özelliğinin nasıl kullanılacağını birlikte öğreneceğiz.

Transform:Scale() Nedir?

CSS transform scale özelliği, bir HTML elementinin boyutunu artırmak veya azaltmak için kullanılır. Bu özellik, elementin orijinal boyutunu korurken, görüntülenen boyutunu değiştirir. Bu, web tasarımında dinamik ve etkileyici efektler oluşturmamızı sağlar.

transform:scale() özelliğini test edebilmemiz için önce HTML dosyamızı oluşturalım ve body etiketleri arasına bir div açalım. Bu div’in içine de “Örnek yazı” yazalım. (Ya da istediğiniz herhangi bir metin.)

div {
  background: red;
  color: white;
  width: 250px;
  margin: auto;
  text-align: center;
}

Yukarıdaki örnekte, harici bir CSS dosyası içinde div elementinin arka plan rengini kırmızı, yazı rengini beyaz, genişliğini 250px ve hizalamasını da ortaya denk gelecek şekilde yapılandırdık. Şu anda div’imizin görüntüsü aşağıdaki görselde yer aldığı gibi.

Şimdi div ögemize aşağıdaki kodu ekleyelim ve neler olacağını birlikte görelim.

div {
  background: red;
  color: white;
  width: 250px;
  margin: auto;
  text-align: center;
  /*Aşağıdaki kodu ekledik.*/
  transform: scale(1.5)
}

Fark ettiyseniz div ögemiz normalden daha da fazla büyüdü. İşte bunu sağlayan transform: scale(1.5) özelliği. Normalde div ögemizin varsayılan ölçek değeri 1’dir. (1.0) Eğer biz bu değeri 1.5 yaparsak div ögesinin ölçeğini büyütmüş oluruz. Aynı şekilde istersek bu ölçeği 1’in altına düşürerek div ögesinin varsayılan ölçek boyutunu daha da küçültebiliriz. Özetle transform:scale() çalışma mantığı bu şekildedir. Aşağıda boyutu büyümüş olan div ögesini görüyorsunuz.

transform scale özelliğini genellikle tıklayabileceğimiz ögeler üzerinde kullanırız. (En azından ben öyle yapıyorum.) Tıklayabileceğimiz ögeler deyince eminim aklınıza ilk gelen butonlar olmuştur. Evet, kullanıcının fare ile butonumuzun üzerine geldiğinde çeşitli animasyonlarla butonun boyut değiştirmesi eminim onun da hoşuna gidecektir. Şimdi isterseniz transform scale özelliğini butonlar üzerinde görelim.

Butonlar Üzerinde Kullanım

Yine aynı dosyamız üzerinden devam edelim ve yeni bir buton etiketi oluşturalım. Buton etiketinin içine istediğimiz herhangi bir metni yazalım. Ben basitçe “Buton” yazacağım. Harici CSS dosyamıza giderek aşağıdaki stil özelliklerini butonumuza ekleyelim. Her bir CSS özelliğinin açıklamasını hemen üstünde yorum satırlarında detaylıca belirttim. (Normalde her bir HTML ögesine class verilir ancak burada zaten yalnızca bir buton olduğu için ben herhangi bir class vermeden genel seçici olan “button” kullandım.)

button {
  /* Kenarları yumuşatır. Bu özellik, butonun köşelerini yuvarlar. Değer ne kadar büyük olursa, yuvarlama o kadar belirgin olur. */
  border-radius: 10px;

  /* İç boşluğu ayarlar. Bu özellik, butonun içindeki metin ile butonun kenarları arasındaki boşluğu belirler. İlk değer yukarı ve aşağı boşluğu, ikinci değer ise sağ ve sol boşluğu belirtir. */
  padding: 10px 20px;

  /* Yazı rengini belirler. Bu özellik, butonun içindeki metnin rengini belirler. */
  color: white;

  /* Arka plan rengini belirler. Bu özellik, butonun arka plan rengini belirler. */
  background-color: green;

  /* Kenar çizgisini kaldırır. Bu özellik, butonun etrafındaki varsayılan kenar çizgisini kaldırır. */
  border: none;

  /* Butonu blok öğesi yapar. Bu özellik, butonun genişliğini içerdiği metne göre değil, içinde bulunduğu konteynıra göre ayarlar. Bu, marjların otomatik olarak ayarlanabilmesi için gereklidir. */
  display: block;

  /* Üst marjı 3rem, sağ ve sol marjları otomatik, alt marjı 0 olarak ayarlar. Bu özellik, butonun marjlarını belirler. 'auto' değeri, tarayıcının marjları otomatik olarak ayarlamasını sağlar. Bu, butonun yatay eksende sayfanın tam ortasına gelmesini sağlar. */
  margin: 3rem auto 0;
}

Kodları yazdıktan sonra butonumuz hazır olacaktır. Sayfanın tam ortasında ilk div ögemizin 3 rem aşağısında yeşil bir buton göreceksiniz. Şimdi kullanıcının fare imleci ile bu butonun üzerine geldiğini düşünelim. Bu durumda transform scale ile butonu büyütebiliriz. Bunun için tek yapmamız gereken yine harici CSS dosyamızda aşağıdaki kodu kullanmak.

/* Butonun üzerine gelindiğinde uygulanacak stil */
button:hover {
  /* Butonun boyutunu artırır. Bu özellik, butonun ölçeklendirilmesini sağlar. Değer 1'den büyük olduğunda, butonun boyutu artar. Bu durumda, butonun boyutu normal boyutunun %120'si olur. */
  transform: scale(1.2);
/* Fare imleci ile butonun üzerine gelindiğinde fare imlecini tıklama işareti ile değiştirir. */
  cursor: pointer;
}

Fare imleci ile butonun üzerine geldiğimizde artık butonun boyutunun daha büyük olduğunu göreceksiniz. Son olarak bir de kullanıcının butona tıklaması durumunda butonun içeri doğru göçmesini sağlayalım. Bunun için aşağıdaki kodu kullanabiliriz.

/* Burada da üsttekine benzer şekilde butonun boyutunu transform scale ile manipüle ettik. Buton, üzerine tıklandığında hacmi küçülecek şekilde yapılandırıldı. */
button:active{
  transform: scale(0.9)
}

Artık butonumuz üzerine fare imleci ile gelindiğinde ve tıklandığında şekil değiştirecek. Elbette transform scale genellikle transition (geçiş efektleri) ile kullanılıyor. Onu da başka bir yazıda ele alacağım. Birden çok özellikten tek yazıda bahsetmek istemedim. Takipte kalın. ✍🏻

Front-end ve web teknolojileriyle alakalı tüm yazılar için blog kategorisini ziyaret edebilirsiniz. Ayrıca blog sayfası altında ilgili front-end teknolojileyle ilgili HTML, CSS, React alt kategorilerini bulabilirsiniz. JavaScript de yakında gelecek.

Burada yazdığımız tüm kodlara bu linkten ulaşabilirsiniz. Bir Codepen hesabı açıp kendi hesabınıza bu çalışmayı fork edip düzenleme yapabilirsiniz. İyi çalışmalar!