CSS VİSİBİLİTY NEDİR?

Visibility özelliği, iki farklı işleve sahiptir. Bir tablonun satırları ve sütunları gizler ve aynı zamanda diğer HTML elemanların görünür olup olmadığını belirler. Bu görünmezliği, elementin kendisini görünmez yaparken, websayfa üzerinde kapladığı alanı boş alan olarak göstererek gerçekleştirir.

Visibility: Aşağıda belirtilmiş dört değeri alır.

Üç adet kutumuz olsun aşağıdaki gibi; İkinci kutuyu visibility ve display özelliği ile görünmez yapalım ne gibi sonuçlar üretecek.

css visibility

Şimdi ikinci kutuyu visibility:hidden özelliği ile görünmez yapalım.


kutu2{visibility:hidden}
  
css visibility

CSS Display ve Visibility Farkı Nedir ?


display: none Bir elemanı gizler ve sayfada yer teşkil etmez diğer elemanlar gizlenen eleman yokmuş gibi sayfada yer teşkil eder.

Şimdi ikinci kutuyu display:none özelliği ile görünmez yapalım.

css visibility

CSS VİSİBİLİTY VE DİSPLAY ÖZELLİKLERİN SEO'YA ETKİSİ (GİZLİ METİN)


Css visibility ve display özelliğini JavaScript yardımıyla Animasyon yapma, Animasyonlu menü ve Tab menüler yapma şeklinde kullanabilirsiniz.

Gizli metin ve bağlantılar : Arama motorlarına sunduğunuz bilgiler kullanıcılara sunduğunuz bilgilerden farklı olduğundan, içeriğinizde metin veya bağlantı gizlemeniz sitenizin güvenilir olmadığının düşünülmesine neden olabilir. Bu sizin sitenizin Google dizininden çıkarılmasına yol açabilir ve arama sonuçlarında websiteniz görünmez. Metin (örnek: aşırı anahtar kelimeler) gizlemek için kullanılabilecek çeşitli yöntemlerden bazıları şunlardır:

Sitenizi gizli metin veya bağlantı içerip içermediğini tespit etmek için incelerken sitenize gelen ziyaretçilerin kolayca göremeyeceği öğeleri arayın. Ziyaretçiler yerine yalnızca arama motorları için hazırlanmış metin veya bağlantılar var mı?

Arama motorlarının erişemeyeceği bir öğeyi ( Javascript, resim veya Flash dosyaları gibi ) açıklamak için metin kullanıyorsanız ekran okuyucu, mobil tarayıcı veya eklenti içermeyen tarayıcı kullanan ya da bağlantı hızı düşük olan ziyaretçilerin de bu içeriği göremeyeceğini unutmayın. Bu öğeler için açıklayıcı metin kullanmanız, sitenizin daha erişilebilir olmasını sağlayacaktır. Sitenizi erişilebilir hale getirmek için yararlanabileceğiniz ipuçlarından bazıları şunlardır:

Resimler : Açıklayıcı metin sağlamak için alt özelliğini kullanın. Ayrıca, resmin çevresinde ziyaretçilerin okuyabileceği bir başlık ve açıklayıcı metin kullanmanızı öneririz. Javascript : Javascript içeriğinin aynısını bir noscript etiketine yerleştirin. Bu yöntemi kullanırsanız, içeriğin, Javascript’tekinin aynısı olduğundan ve tarayıcılarında Javascript etkin olmayan ziyaretçilere de bu içeriğin gösterildiğinden emin olmalısınız. Videolar : Video hakkında HTML biçimindeki açıklayıcı metni ekleyin. Videonun yazıya dönüştürülmüş kopyasını da ekleyebilirsiniz. Google Gizli metin ve bağlantı kalite yönergeleri için TIKLAYINIZ.


murat ayaz 06/04/2020

div içindeki yazıyı görünmez yapmak istiyorum çünkü div ve sütunda tamamen gözüküyor sadece hover çıkınca gözüksün istiyorum formül önerinizi istiyorum yardımınızı rica ederim

yönetici 08/04/2020

Murat, şu konuya bak. En altta dislay:none bölümü

Şafak 02/11/2020

Teşekkür ederim. display: none işimi halletti meşhur forumda saatlerce bu konuya cevapta bulamadım cevapta alamadım. ☺

Sude 29/12/2020

Merhaba, ilk girişte yazının gözükmemesini hover olunca gözükmesini istiyorum yardım eder misiniz? Şimdiden teşekkürler

yönetici 30/12/2020

Display konusunu incele.

p{display:none}
p:hover{display:block}


        

Vedat Emre Gündüz 03/02/2021

Selamlar, Ben bir navigation oluştursam mobilde de bunu gizleyip buton'a tıklayınca göstersem google link gizledin der mi? yoksa Burda ki bahsettikleriniz içerikten alakasız bağlantılara yönlendirmeye çalışırsam mı geçerli?

yönetici 05/02/2021

Vedat, site içi linkleri gizleyip, göstermek sorun olmaz, site dışı linkleride az ve işe yaramayan sitelere link verme? Menü gizlemek için display:none kullanılır. yukarı aramadan "css display" diye aratma yap.

nevdar akkurt 21/11/2022

merhabalar. ben kendim bir menü kodladım, bootstrap ya da diğer hazır kütüphanelerden hiçbirini kullanmadan. çoğu yer istediğim gibi oldu ancak; sağ tarafa koyduğum login ve sepet kısmının yazıları uzun olduğu için onları gizlemek istiyorum. fontawesome' dan ikonlar koydum ve kullanıcı örneğin login olmak istediğinde bu ikonun üzerine gelince giriş yapın yazısı çıksın ekranda istiyorum. yazıları display: none ile gizledim ve hover efektine de display: block verdim ama yine de ikonlar üzerine gelince yazı çıkmıyor.

yönetici 24/11/2022

En basit olarak resim özelliğine title verirsen ikon üzerine gelirsen bilgi çıkar.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

9903

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.