Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emre Sabuncu tarafından sunulan bir CSS3 eğitim dersidir. Emre, CSS3 derslerinden biri olan "background origin" özelliğini anlatmaktadır.
- Videoda, background origin özelliğinin ne işe yaradığı ve nasıl kullanılacağı adım adım gösterilmektedir. Emre, bir div etiketi oluşturarak başlayıp, arka plan rengi, resim ekleme, background repeat, background position ve background size gibi temel CSS özellikleri kullanarak bir örnek oluşturur. Ardından background origin özelliğinin padding, border ve content box değerleriyle nasıl çalıştığını gösterir ve birden fazla resim kullanırken bu özelliğin nasıl kullanılacağını örneklerle açıklar. Video, tarayıcı desteği hakkında bilgi vererek sonlanır.
- CSS Background Origin Özellikleri
- Videoda CSS'de background origin (arka plan başlangıç noktası) özelliği anlatılacak.
- Örnek için bir div oluşturulup, body etiketine arka plan rengi veriliyor.
- Div'e genişlik 1000 piksel, yükseklik 500 piksel olarak ayarlanıyor.
- 01:20Arka Plan Özellikleri
- Div'e arka plan resmi ekleniyor ve kendini tekrar etmesini engellemek için background-repeat: no-repeat kullanılıyor.
- Background-position: left-top ve background-size: 500 piksel olarak ayarlanıyor.
- Div'e 100 piksellik, kırmızı renkli tek çizgi kenarlık ekleniyor.
- 03:04Background Origin Kullanımı
- Background origin özelliği, arka plan resminin nasıl davranacağını belirler.
- Default değer padding-box'tır, bu durumda arka plan resmi kenarların altına girmez.
- Background origin: border-box olarak ayarlandığında, arka plan resmi kenarların altına girer.
- 05:05Content Box ve Padding Box Farkları
- Padding box, iç boşluk olarak çalışır ve kutunun iç boşluğuna göre hareket eder.
- Content box, arka plan resminin başlangıç yerini ve özelliklerini belirler.
- Birden fazla resim kullanıldığında, background origin özelliği her resim için ayrı ayrı ayarlanabilir.