Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, HTML5 ve CSS3 eğitim setinin 49. dersi olup, bir eğitmen tarafından sunulan bir eğitim içeriğidir.
- Videoda butonlara CSS atama konusu detaylı olarak anlatılmaktadır. Eğitmen, link butonları, input butonları ve true submit butonları için CSS özellikleri uygulayarak butonların görünümünü nasıl değiştirebileceğimizi göstermektedir. Butonlara renk, kenarlık, iç dolgu, font boyutu, yuvarlak kenarlık, gölgelendirme, genişlik ve responsive tasarım gibi özellikler nasıl eklenebileceği adım adım gösterilmektedir. Ayrıca, butonlara hover efekti, transition, opacity ve cursor gibi özellikler de eklenerek butonların kullanıcı deneyimini nasıl geliştirebileceğimiz anlatılmaktadır.
- 00:09Butonlara CSS Atama
- HTML5 ve CSS3 eğitim setinin 49. dersinde butonlara CSS atama gösterilecek.
- Link, buton ve input türü butonlar CSS ile düzenlenecek.
- Butonlara "buton" adında bir sınıf verilerek arka plan rengi, kenarlıklar ve diğer özellikleri ayarlanacak.
- 01:01Buton Stil Ayarları
- Butonlara arka plan rengi, kenarlıklar ve metin rengi ayarlanarak daha iyi bir görüntü elde edilecek.
- Butonlara iç dolgu verilerek ve metin merkezde toplanarak daha düzenli bir görünüm sağlanacak.
- Linklerin altı çizili olmaması için "text-decoration: none" özelliği kullanılacak.
- 02:49Buton Düzenlemeleri
- Butonlar arasında boşluk bırakmak için marjin değerleri atanacak.
- Butonlara tıklanabilir hissi vermek için "cursor: pointer" özelliği kullanılacak.
- Butonlara ortak bir font boyutu (16 piksel) verilerek daha düzenli bir görünüm sağlanacak.
- 04:16Farklı Buton Sınıfları
- Beş farklı buton sınıfı (kırmızı, yeşil, sarı, mavi ve siyah) oluşturulacak.
- Her butona farklı bir sınıf atanarak farklı görünümler elde edilecek.
- Font boyutu gibi özellikler için "size" sınıfı kullanılarak tekrarlanan değerler için kolaylık sağlanacak.
- 07:04Buton Özellikleri
- Butonlara kenarlık yuvarlaklığı vermek için "radius" sınıfı kullanılacak.
- Butonlara arka plan rengi ve metin rengi ayarlanarak farklı görünümler elde edilecek.
- Hover efekti ile butonlara üzerine geldiğinde farklı renk ve görünüm verilebilir.
- 10:39Buton Gölgelendirme ve Boyutlandırma
- Butonlara gölgelendirme vermek için "box-shadow" özelliği kullanılacak.
- Butonlara genişlik vermek için "width" özelliği kullanılacak.
- Butonların responsive olması için genişlik değerleri yüzdelik olarak yazılmalı, piksel cinsinden yazıldığında ekran boyutuna göre ayarlanmayacak.
- 14:36Disabled Butonlar
- Disabled butonlar tıklanamaz ve kullanıcıya bu durum hissettirilmelidir.
- Disabled butonlara opacity değeri düşürülerek tıklanamayacağı hissi verilebilir.
- Disabled butonlara cursor özelliği ile "not allowed" işareti verilebilir.