Ana Sayfa

Web'de Göz Yanılsamaları: CSS ile Optik İllüzyonlar

1 dk okuma

Makale, CSS kullanarak nasıl optik illüzyonlar oluşturulabileceğini ve bu illüzyonların web tasarımında nasıl uygulanabileceğini detaylı bir şekilde inceliyor. Yazar, çeşitli göz yanılsamalarını interaktif demolarla açıklıyor ve her birinin arkasındaki CSS tekniklerini gösteriyor. Okuyucular, farelerini demoların üzerine getirerek veya animasyonları durdurarak efektleri deneyimleyebiliyorlar. Bu sayede, CSS'in sadece görsel öğeleri düzenlemekle kalmayıp, aynı zamanda insan algısını manipüle edebilecek yaratıcı efektler oluşturma potansiyeli gözler önüne seriliyor.

İncelenen illüzyonlardan ilki Poggendorff İllüzyonu. Bu yanılsamada, dikey bir çubukla kesilen çapraz bir çizgi, aslında sürekli olmasına rağmen hizasız görünür. Yazar, bu efekti ::before ve ::after sözde elemanları ile veya iki CSS gradyanı kullanarak daha karmaşık versiyonlarını nasıl oluşturduğunu açıklıyor. Münsterberg Poggendorff Arch gibi varyasyonlar da ele alınıyor. İkinci olarak, "İndüklenmiş Gradyanlar" ele alınıyor. Bu bölümde, aslında düz renk olan gri çubukların, bir gradyanın üzerine yerleştirildiğinde kendilerinin de gradyan içeriyormuş gibi görünmesi anlatılıyor. Beynimizin nasıl aldatıldığını gösteren bu illüzyon, gerçek gradyanın sadece arka planda olduğunu vurguluyor.

Makale ayrıca, aynı renkteki bölgelerin farklı kontrasttaki alanlarla çevrelendiğinde farklı görünmesine neden olan Cornsweet İllüzyonu'nu ve White's İllüzyonu'nu da açıklıyor. Cornsweet'te, aynı gri tonunun, beyaza yakın olduğunda daha açık, siyaha yakın olduğunda ise daha koyu görünmesi gösteriliyor. White's İllüzyonu'nda ise, siyah-beyaz bir ızgarada aynı gri tonundaki iki sütunun, çevrelerindeki siyah veya beyaz alanlara göre farklı koyulukta algılanması inceleniyor. Yazar, bu demoyu oluştururken mix-blend-mode kullandığını belirtiyor ve bu tekniklerin web'de görsel algıyı nasıl etkileyebileceğine dair ilginç örnekler sunuyor.

İçgörü

Bu makale, CSS'in sadece tasarım aracı olmanın ötesinde, optik algıyı manipüle ederek kullanıcı deneyimini zenginleştirebilecek yaratıcı ve şaşırtıcı görsel efektler sunma potansiyelini gösteriyor.

Kaynak