Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web sitesi tasarımı ve CSS kullanımı eğitim içeriğidir. Eğitmen, Frontend Mentor tarafından sunulan bir web sitesi projesini adım adım göstermektedir.
- Video, grid ve flexbox kullanarak basit bir web sitesi tasarımı sürecini kapsamaktadır. Eğitim, temel yapılandırma ve reset CSS ile başlayıp, header, main alan, sidebar ve bottom news bölümlerinin HTML ve CSS ile oluşturulması, mobil tasarım için media breakpoint kullanımı ve son olarak hamburger menüsünün JavaScript ile nasıl oluşturulacağı konularını içermektedir.
- Eğitim boyunca CSS seçicileri, flexbox özellikleri, responsive tasarım teknikleri ve CSS kodlarının optimize edilmesi gibi konular detaylı olarak anlatılmaktadır. Ayrıca, web geliştirme için temel CSS ayarları, renk ve yazı tipi seçimi, padding, margin gibi özelliklerin kullanımı ve accessibility konularına da değinilmektedir.
- Web Sitesi Projesi Tanıtımı
- Videoda bir lending web sitesi olmasa da benzer bir web sitesi yapımı gösterilecek.
- Web sitesi temel olarak zor değil ancak layout olarak kompleks ve iç içe divler kullanmadan yapılması zor bir proje.
- Proje gri renklerle tasarlanmış ve GitHub linki ile kod paylaşımı yapılacak.
- 00:46Proje Hazırlığı
- Proje hızlıca açılıp sadece tuz eklendi ve life soru ile ayağa kaldırıldı.
- Tasarım genel olarak header ve main alanından oluşuyor.
- Layout için minimum div sayısı kullanılarak grid ile b layout yapılması öneriliyor.
- 01:45HTML ve CSS Hazırlığı
- Index.html dosyası açıldı ve front-end mentorun koyduğu style ve ışınlar kaldırıldı.
- Meta etiketi eklenerek viewport ayarları yapıldı.
- CSS ve custom CSS dosyaları eklendi.
- 02:50Reset CSS ve Font Ayarları
- Mail web'in reset CSS'si kopyalanıp projeye eklendi.
- Butonlar için default özellikler kaldırıldı, transparent yapıldı, outline kapatıldı ve pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer pointer
- 06:49Konteyner Yapısı Oluşturma
- Header ve main alan oluşturulacak, ancak önce konteyner yapısı oluşturulması gerekiyor.
- CSS'de "container" isimli bir class oluşturuluyor ve maksimum genişlik 1024 piksel, genişlik 9600 piksel olarak ayarlanıyor.
- Konteynerin margin left ve margin right'e auto değerleri verilerek, mobil cihazlarda sağdan soldan boşluk oluşması engelleniyor.
- 07:48Header İçeriği Oluşturma
- Header'ın içerisinde logo ve beş menü linki bulunuyor.
- Logo için "logo" isimli bir klasör oluşturuluyor ve altına "logo" dosyası ekleniyor.
- Menü linkleri için "a" etiketleri kullanılarak "home", "new", "popular", "trending" ve "categories" linkleri oluşturuluyor.
- 09:26Header Stil Ayarları
- Header için "display flex", "align-items center" ve "justify-content space-between" özellikleri kullanılarak dikeyde ortalama ve aradaki boşluk ayarlanıyor.
- Menü linklerinin altındaki çizikler "text-decoration none" özelliği ile kaldırılıyor.
- Menü linkleri arasında 36 piksel boşluk bırakılıyor ve menü linklerinin rengi "dark blue" olarak ayarlanıyor.
- 12:33Main Alanı Oluşturma
- Header'ın altına "main" alanı oluşturuluyor ve üç section ekleniyor: "featured news", "news sidebar" ve "news bottom".
- Main alanı için "display grid" ve "grid-template-columns" özellikleri kullanılarak üç bölüme bölünüyor.
- Grid yapısı kullanılarak sayfa düzeni oluşturuluyor, ancak flex yapısı da alternatif olarak kullanılabilir.
- 16:49Featured New Bölümü Oluşturma
- Featured new alanı için bir div oluşturuluyor ve içine bir image tag ekleniyor.
- Featured new body div'i oluşturuluyor ve içinde h1 başlık, description alanı ve read more butonu yer alıyor.
- Description alanı için bir div oluşturuluyor ve içine paragraf ekleniyor.
- 18:06CSS Stil Uygulamaları
- Main alanına marjin top 72 piksel verilerek boşluk oluşturuluyor.
- Featured new ve news body div'leri üçe bölünüyor ve flexbox kullanılarak yan yana yerleştiriliyor.
- Global olarak line height 1.5 olarak ayarlanıyor ve başlık için line height 36 piksel olarak belirleniyor.
- 21:09Renk ve Metin Ayarları
- Description için dark blue renk kullanılıyor.
- Read more butonu için padding top 12 piksel, padding bottom 24 piksel ve background color soft red olarak ayarlanıyor.
- Butonun text transform uppercase ve letter spacing 1.75 piksel olarak belirleniyor.
- 24:46News Sidebar Bölümü
- News sidebar için bir div oluşturuluyor ve içinde title ve üç adet new item div'i yer alıyor.
- Her new item div'i içinde h4 başlık ve description alanı bulunuyor.
- News sidebar için background color dark blue, text color white ve font size 24 piksel olarak ayarlanıyor.
- 27:17CSS Stil Ayarları
- New item altındaki font ve margin değerleri ayarlanıyor, aracın bakımları için 4 piksel değer veriliyor.
- Paragrafların yazı tipi boyutu 12-14 piksel arasında ayarlanıyor.
- Silik görünen kısımlara opacity efekti uygulanıyor, opacity değeri 75 olarak belirleniyor.
- 28:01Border ve Padding Ayarları
- New item'lara border bottom 1 piksel solid ve gri renk (99) değeri veriliyor.
- Last child olmayan new item'lara border bottom verilerek daha temiz bir CSS yapısı oluşturuluyor.
- Padding değerleri 16 piksel olarak ayarlanıyor, ancak padding top değeri sadece first child olmayanlara veriliyor.
- 30:39HTML Dizilimi ve Flexbox
- HTML diziliminde first child kullanımı, elementin bulunduğu dizideki konumuna göre değişiyor.
- Items rapper tarzı bir div kullanılarak first child sorunu çözülebilir.
- İçeriklerin flex özelliği sayesinde yarı yarıya ayrıldığı ve içerik miktarına göre ittirildiği belirtiliyor.
- 32:18CSS Flexbox Kullanımı
- İki div'i yarı yarıya ayırmak için flexbox özellikleri kullanılabilir.
- Flexbox özellikleri için "flex" ve "justify-content: space-between" değerleri kullanılır.
- Div'lerin eşit boyuta sahip olması için "flex: 1" değeri verilir.
- 33:02Haber İçeriği Oluşturma
- Haber içeriği için "new bottom item", "new image" ve "new body" gibi CSS sınıfları oluşturulur.
- Haber başlıkları için "h3" etiketleri ve paragraflar kullanılır.
- Haber içerikleri için "new body number" ve "new body description" gibi sınıflar oluşturulur.
- 37:25CSS Stil Uygulamaları
- Haber başlıkları için font boyutu 800 piksel ve kalınlık ayarlanır.
- Paragraflar için font boyutu 12 piksel ve renk ayarlanır.
- Div'ler arasında boşluk bırakmak için "gap: 12px" değeri kullanılır.
- 39:29Mobil Tasarım
- Mobil tasarım için media breakpoint oluşturulur.
- Belirli bir piksel değerinde div'lerin alt alta sıralanması sağlanır.
- Grid yapısı mobil görünümde alt alta gelir.
- 40:04Grid Template Kullanımı ve Media Breakpoint
- Grid template air yazısı ve grid aia'lar command olarak alınarak mobil tasarımda kolonlar istenen sıraya oturtulmuştur.
- Media breakpoint kullanarak minimum 500 piksel genişliğinde olduğunda grid template yazısının alt alta yazılması sağlanabilir.
- CSS'leri normal tutup, breakpoint ekleyerek tek bir CSS yazarak istenen sonuç elde edilebilir, bu da override etmek yerine daha iyi bir yöntemdir.
- 42:47Media Breakpoint Uygulaması
- Mobile design için maxwty (maximum width) breakpoint oluşturulup, body'nin flex özelliği kaldırılarak 500 pikselden küçük olduğunda normal block element olarak alt alta yazılması sağlanmıştır.
- Fikri new description kısmına marjin top 12 piksel verilerek aradaki boşluk ayarlanmıştır.
- News bottom kısmına flex direction kullanılarak kolonlar istenilen şekilde yerleştirilmiş ve flex 1 değeri verilerek eşit şekilde yayılmıştır.
- 45:51Hamburger Menü Tasarımı
- Hamburger menü tasarımı için önce bir structure çıkarmak daha iyi olmaktadır.
- Hamburger menü normal klasik bir konumda olup, basıldığında sağdan sola açılmaktadır.
- Menüde çarpı konumu bulunmakta ve basıldığında kapanmaktadır.
- 46:22Hamburger Menü Tasarımı
- Hamburger menü için bir div oluşturulacak ve bu div epsolu bir element olarak tasarlanacak.
- Menü, 500 piksel genişliğinde olduğunda gizlenecek ve "desktop now" sınıfı ile kontrol edilecek.
- Hamburger menü için bir ikon eklenecek ve "hamburger menü open" sınıfı ile mobil cihazlarda görünmesi sağlanacak.
- 49:01Menü Yapısı
- Hamburger menü için "hamburger menü rapper" adında bir div oluşturulacak ve içine "mobile now" div'i yerleştirilecek.
- Menü için "overlay" adında bir div eklenecek ve bu div menü rapper'ın önüne alınacak.
- Menü rapper'a "position: absolute", "top: 0, "right: 0, "width: 100, "height: 100" özellikleri verilecek.
- 51:02Menü Tasarımı
- Menü rapper'ın altındaki nav'a "display: flex", "flex-direction: column" özellikleri verilecek.
- Nav elemanlarına "gap: 24px", "margin-top: 72px", "margin-bottom: 24px" ve "color: dark blue" özellikleri eklenecek.
- Close ikonuna "margin-left: auto", "margin-top: 12px", "margin-right: 12px" ve "margin-bottom: 24px" özellikleri verilecek.
- 52:28Overlay Ekleme
- Overlay, menü rapper'ın önüne alınarak yan yana yerleştirilecek.
- Menü rapper'a "flex: 3", overlay'e "flex: 1" özellikleri verilecek.
- Overlay'e "background-color: #000x000x000x0", "opacity: 0,30" özellikleri eklenecek ve menü rapper'ın rengi kapatılacak.
- 54:14Hamburger Menü Tasarımı
- Hamburger menü rapper'ı normalde left %100 olarak ayarlanacak ve kullanıcı menüye basıldığında left değeri değiştirilecek.
- Open class'ı oluşturulup left değeri sıfırlanacak, böylece menü açılacak.
- JavaScript dosyası oluşturulup, hamburger menü open button'a click olayı eklenecek.
- 56:18Menü Açma ve Kapatma İşlemi
- Hamburger menü open button'a click olduğunda, hamburger menü rapper'a "open" class'ı eklenecek.
- Hamburger menü close button'a click olduğunda, hamburger menü rapper'dan "open" class'ı çıkarılacak.
- Menü açıldığında ve kapatıldığında smooth bir geçiş için CSS'de transition özelliği kullanılacak.
- 57:51CSS Düzenlemeleri
- Hamburger menü rapper'ın display özelliği max-width 500 piksel olduğunda flex olarak ayarlanmalı, normalde display none olmalı.
- Header'ın display özelliği de display none olarak ayarlanmalı.
- Opacity özelliği transition kabul ettiği için, display flex olarak tutup opacity'sini sıfır yapıp sonra %100 yapmak daha doğru bir yöntem.