CSS Kullanarak HTML Elementlerini Gizlemek

Bildiği gibi HTML elemanlarına görünüm özellikleri eklemek için CSS kullanıyoruz.CSS bizim HTML yapımızı yani sayfamızı görsel olarak güçlendirmemiz için geliştirilmiş stil şablonudur.CSS’i çoğunlukla HMTL etiketlerine farklı görsel özellik kazdırmak için kullansak da bazen var olan bir etiketi belirli bir süre için veya koşul için gizlememiz gerektiğinde de kullanabilir.Bunun için CSS ‘de 3 tane özellik vardır.Şimdi sizlere bunları göstereceğim.

Display,Visibility,Opacity

CSS ile elemanları gizlemek için bu 3 özellikten birisi kullanabilirsiniz.Aslında bu 3 özelliğinin esas amaçları biraz farklı olsa da, ortak yönleri elemanları gizlemek için de kullanılır.Dilerseniz önce nasıl kullanıldıklarına ve sonuçlarına bakalım sonra aralarında ki farklılığa değinelim.

Aşağıda 3 tane resmimiz bulunmakta ve ortadaki mutsuz olan kutucu gizleyeceğiz.
hidden_images

Display:none
HTML elemenalarının görsel özelliğini ayarlamaya yarayan display özelliği (detay için yazımı okuyabilirsiniz), none parametresi ile elemanları ortadan kaldırmaya-gizlemeye yaramaktadır.Ortadaki mutsuz kutucuğa CSS’de display:none özelliği verdiğimiz zaman HTML kısmında sanki hiç öyle bir eleman yokmuş gibi ortadan kaybolur ve sonraki kutu onun yerini alır.Bu kısım önemli çünkü visibility ile arasındaki farkı burası oluşturmaktadır.Bu özelliği alan bir eleman sanki hiç yokmuş gibi bir hal alacaktır.

display_none

Visibility:hidden
HTML elemanlarının görünür mü yoksa görünmez mi olacağını ayarlamak için kullanılan en temel CSS özellik visibility özelliğidir.Visibility özelliğinin hidden parametresi ile html yapısında mevcut bir şeyi gizleyebiliyoruz.Aşağıdaki mutsuz kutumuza visibility:hidden verdiğimiz de kutucuk ortadan kalkacak fakat bu defa ondan sonra gelen kutu onun yerine geçmeyecek.Çünkü visibility hidden uygulanan bir eleman gizlenir fakat halen yer kaplamaya devam eder.Display özelliğinden farkı burasıdır.
visibility_hidden

Opacity
Opacity özelliği html elemenlarını saydamlaştırmaya yarayan bir özelliktir.0 ile 1 arasında değer alır ve 0 alan bir eleman tamamen saydamlaşır ve ortadan kaybolur.Daha çok hover mantığı için kullanılsa da elemanları gizlemek için de kullnılabilir.Opacity özelliği, visibility gibi ortadan kaybettiği elemanı tamamen yok saymaz, html de halen mevcut boşluğunu korur.

visibility_hidden

Yazının Özeti
Bir web sayfasında olan her hangi HTML elemanı, CSS kullanarak 3 farklı şekilde ortadan kaybedebilirsiniz.Display:none elemanı gizler ve yerine ondan sonra gelen diğer eleman geçer.visibility:hidden yine aynı şekilde elemanı direk gizler fakat html şablonda boşluğunu korur.Ondan sonra gelen bir eleman onun yerine geçemez.Opacity: 0 elemanların görünüm özelliğini saydamlaştırır.0 değeri aldığında eleman tamamen gizlenir.Fakat halen boşluğu kalır.Ondan sonra gelen eleman yerini dolduramaz.

Resim kaynak

Bunları da beğenebilirsin