G\u00f6rsel dosyalar\u0131 kullanmadan, sadece HTML ve CSS kullanarak t\u00fcten s\u0131cak bir ramen kasesi \u00e7izmeyi hi\u00e7 denediniz mi? Gece yar\u0131s\u0131 ac\u0131kt\u0131\u011f\u0131n\u0131zda zihninizde beliren o duman\u0131 \u00fcst\u00fcnde t\u00fcten s\u0131cak ramen kasesi, web geli\u015ftiricileri i\u00e7in b\u00fcy\u00fcleyici bir tasar\u0131m projesine d\u00f6n\u00fc\u015febilir. Photoshop veya Illustrator gibi geleneksel grafik tasar\u0131m ara\u00e7lar\u0131na ba\u011f\u0131ml\u0131 kalmadan, yaln\u0131zca kod yazarak etkileyici g\u00f6rseller olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. Nitekim “Pure CSS Art” (Saf CSS Sanat\u0131), son y\u0131llarda geli\u015ftiricilerin yarat\u0131c\u0131l\u0131klar\u0131n\u0131 ve teknik becerilerini sergilemelerinin en pop\u00fcler yollar\u0131ndan biri haline geldi. Bu makalede, kod tuvalinizi haz\u0131rlayarak gece yar\u0131s\u0131 ramen sahnesini nas\u0131l in\u015fa edece\u011finizi detaylar\u0131yla ele alaca\u011f\u0131z.<\/p>\n
CSS sanat\u0131, web taray\u0131c\u0131s\u0131n\u0131 bir tuval ve CSS (Cascading Style Sheets – Basamakl\u0131 Stil \u015eablonlar\u0131) kodlar\u0131n\u0131 ise bir f\u0131r\u00e7a gibi kullanarak tamamen kod tabanl\u0131 g\u00f6rseller olu\u015fturma tekni\u011fidir. Harici bir PNG, JPEG veya SVG dosyas\u0131 y\u00fcklemek yerine, HTML elementlerini bi\u00e7imlendirerek do\u011frudan taray\u0131c\u0131 \u00fczerinde \u00e7izim yapars\u0131n\u0131z. Bu y\u00f6ntem, \u00f6n y\u00fcz (front-end) geli\u015ftiricilerinin CSS derinli\u011fini anlamas\u0131 a\u00e7\u0131s\u0131ndan muazzam bir pratik imkan\u0131 sunar.<\/p>\n
Peki ama neden haz\u0131r bir g\u00f6rsel y\u00fcklemek varken HTML ve CSS ile \u00e7izim yapmay\u0131 tercih ediyoruz? \u0130lk olarak, CSS ile olu\u015fturulan g\u00f6rseller tamamen vekt\u00f6rel bir yap\u0131ya sahiptir. Bu durum, g\u00f6rselin her ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcnde ve piksel yo\u011funlu\u011funda (Retina ekranlar dahil) en ufak bir bulan\u0131kl\u0131k ya\u015fanmadan net bir \u015fekilde i\u015flenmesini sa\u011flar. \u0130kincisi, harici g\u00f6rsel dosyalar\u0131n\u0131n olu\u015fturdu\u011fu HTTP istekleri ortadan kalkt\u0131\u011f\u0131 i\u00e7in sayfa y\u00fcklenme s\u00fcreleri ciddi oranda d\u00fc\u015fer. Bunun yan\u0131 s\u0131ra, kod ile \u00e7izilen bir nesnenin her bir par\u00e7as\u0131na JavaScript veya CSS animasyonlar\u0131 ile kolayca m\u00fcdahale edebilirsiniz.<\/p>\n
Gece yar\u0131s\u0131 ramen sahnesi (Ramen After Dark) konsepti, \u0131\u015f\u0131k ve g\u00f6lge oyunlar\u0131n\u0131, organik k\u0131vr\u0131mlar\u0131 ve hareketli animasyonlar\u0131 bir arada bar\u0131nd\u0131rd\u0131\u011f\u0131 i\u00e7in m\u00fckemmel bir \u00f6\u011frenme senaryosudur. S\u0131cak bir \u00e7orban\u0131n \u00fczerindeki duman hareketi, yumurtan\u0131n dairesel formu ve kasenin derinlik hissi, CSS yeteneklerinizi s\u0131n\u0131rlar\u0131na kadar zorlaman\u0131z\u0131 sa\u011flar. Dolay\u0131s\u0131yla, bu \u00e7al\u0131\u015fma sadece bir g\u00f6rsel olu\u015fturma s\u00fcreci de\u011fil, ayn\u0131 zamanda CSS kodlama mant\u0131\u011f\u0131n\u0131 derinden kavrama yolculu\u011fudur.<\/p>\n
Etkileyici bir CSS sahnesi olu\u015fturman\u0131n ilk ad\u0131m\u0131, semantik ve d\u00fczenli bir HTML yap\u0131s\u0131 kurgulamakt\u0131r. T\u0131pk\u0131 ger\u00e7ek bir yeme\u011fi haz\u0131rlarken malzemeleri s\u0131rayla tezgaha dizdi\u011fimiz gibi, HTML taraf\u0131nda da nesnelerimizi mant\u0131ksal bir hiyerar\u015fi i\u00e7inde katmanlara ay\u0131rmal\u0131y\u0131z. Karma\u015f\u0131k bir ramen kasesini k\u00fc\u00e7\u00fck ve y\u00f6netilebilir par\u00e7alara b\u00f6lmek i\u015fimizi kolayla\u015ft\u0131racakt\u0131r.<\/p>\n
Sahnemizi tasarlarken en d\u0131\u015fta bir kapsay\u0131c\u0131 (container) kullan\u0131r\u0131z. Bu kapsay\u0131c\u0131n\u0131n i\u00e7inde kase (bowl), \u00e7orba (soup), eri\u015fteler (noodles), yumurta (egg), naruto (bal\u0131k keki) ve en \u00fcstte y\u00fckselen buhar (steam) katmanlar\u0131 yer al\u0131r. Katman s\u0131ralamas\u0131 son derece kritik bir konudur; \u00e7\u00fcnk\u00fc HTML \u00fczerindeki element s\u0131ras\u0131, CSS ile A\u015fa\u011f\u0131da ramen sahnemiz i\u00e7in haz\u0131rlad\u0131\u011f\u0131m\u0131z temel HTML yap\u0131s\u0131n\u0131 inceleyebilirsiniz:<\/p>\n Bu yap\u0131y\u0131 kurduktan sonra her bir eleman\u0131n tuval \u00fczerindeki konumunu belirlemek i\u00e7in CSS konumland\u0131rma (positioning) kurallar\u0131n\u0131 uygular\u0131z. Ana kapsay\u0131c\u0131ya Bir objeye \u00fc\u00e7 boyutlu (3D) ger\u00e7ek\u00e7ilik kazand\u0131ran en \u00f6nemli unsur do\u011fru uygulanan \u0131\u015f\u0131k ve g\u00f6lgedir. D\u00fcz bir ikizkenar yamuk veya yar\u0131m daire, derinlik efektleri eklenmedi\u011fi s\u00fcrece g\u00f6ze yapay g\u00f6r\u00fcnecektir. Ramen kasesini \u00e7izerken Kasenin alt k\u0131sm\u0131n\u0131 daha dar, \u00fcst k\u0131sm\u0131n\u0131 ise geni\u015f bir oval \u015feklinde tasarlamak gerekir. Bunu sa\u011flamak i\u00e7in Derinlik hissini peki\u015ftirmek i\u00e7in a\u015fa\u011f\u0131daki CSS tekniklerine odaklanmal\u0131y\u0131z:<\/p>\n Nitekim \u0131\u015f\u0131\u011f\u0131n sa\u011f \u00fcst k\u00f6\u015feden geldi\u011fini varsayarsak, kasenin sol alt taraf\u0131na daha yo\u011fun bir g\u00f6lge d\u00fc\u015fmesi gerekir. Bu detaylar, basit bir CSS kutusunu lezzetli bir yemek ill\u00fcstrasyonuna d\u00f6n\u00fc\u015ft\u00fcren temel p\u00fcf noktalar\u0131d\u0131r.<\/p>\n Ramen sahnesinin en i\u015ftah a\u00e7\u0131c\u0131 unsurlar\u0131 \u015f\u00fcphesiz ki yar\u0131m ha\u015flanm\u0131\u015f yumurta ve k\u0131vr\u0131ml\u0131 eri\u015fte (noodle) taneleridir. Geometrik olmayan, do\u011fadaki organik \u015fekilleri CSS ile \u00e7izmek ilk ba\u015fta zor g\u00f6r\u00fcnebilir. Ancak Bir ramen yumurtas\u0131n\u0131n ak\u0131 tam d\u00fczg\u00fcn bir daire de\u011fildir. Bu nedenle yumurta beyaz\u0131n\u0131 olu\u015fturan Eri\u015ftelerin o dalgal\u0131 ve rastgele duru\u015funu olu\u015fturmak i\u00e7in ise iki farkl\u0131 yakla\u015f\u0131m mevcuttur. \u0130lk y\u00f6ntem Ayr\u0131ca taze ye\u015fil so\u011fan halkalar\u0131n\u0131 \u00e7izerken S\u0131cak bir ramen kasesini tamamlayan ve “gece yar\u0131s\u0131 konseptine” o huzurlu, samimi havay\u0131 katan en \u00f6nemli detay kaseden yukar\u0131 do\u011fru s\u00fcz\u00fclen buhard\u0131r. Statik bir resim g\u00fczel g\u00f6r\u00fcnebilir fakat hareketli bir CSS animasyonu sahneye adeta can verir. Bu a\u015famada CSS3 ile hayat\u0131m\u0131za giren Buhar efektini olu\u015ftururken \u00f6ncelikle \u015feffaf ve beyaz tonlarda dar uzun A\u015fa\u011f\u0131daki kod blo\u011fu, ger\u00e7ek\u00e7i bir duman y\u00fckselme animasyonunun mant\u0131\u011f\u0131n\u0131 g\u00f6stermektedir:<\/p>\n Buradaki en kritik ipucu, birden fazla duman eleman\u0131na farkl\u0131 Teorik ve sanatsal boyutun \u00f6tesinde, bu tekni\u011fin ger\u00e7ek d\u00fcnya projelerindeki performans kar\u015f\u0131l\u0131\u011f\u0131n\u0131 incelemek son derece ayd\u0131nlat\u0131c\u0131 olacakt\u0131r. \u0130stanbul merkezli bir Uzak Do\u011fu restoran zinciri olan “Tokyo Night Bite”, mobil \u00f6ncelikli yeni sipari\u015f web sitesinde ana sayfa y\u00fcklenme s\u00fcrelerini d\u00fc\u015f\u00fcrmek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 art\u0131rmak i\u00e7in bir teknik d\u00f6n\u00fc\u015f\u00fcm ba\u015flatt\u0131.<\/p>\n \u015eirketin \u00f6nceki web sitesinde, ana sayfada yer alan animasyonlu ramen ill\u00fcstrasyonu y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir GIF ve buna ba\u011fl\u0131 PNG katmanlar\u0131ndan olu\u015fuyordu. Bu durum mobil kullan\u0131c\u0131larda ciddi sayfa a\u00e7\u0131l\u0131\u015f gecikmelerine neden oluyordu. Geli\u015ftirici ekibi, bu g\u00f6rselleri tamamen Pure CSS ve hafif SVG bile\u015fenleri ile yeniden kodlama karar\u0131 ald\u0131.<\/p>\n A\u015fa\u011f\u0131daki performans kar\u015f\u0131la\u015ft\u0131rma tablosu, d\u00f6n\u00fc\u015f\u00fcm \u00f6ncesi ve sonras\u0131 elde edilen verileri somut bir \u015fekilde ortaya koymaktad\u0131r:<\/p>\n Bu vaka analizinden anla\u015f\u0131laca\u011f\u0131 \u00fczere, Pure CSS \u00e7izimleri sadece estetik bir hobi de\u011fildir. Do\u011fru uyguland\u0131\u011f\u0131nda web sitelerinin Core Web Vitals (Temel Web Web G\u00f6stergeleri) puanlar\u0131n\u0131 tavan yapt\u0131ran, veri tasarrufu sa\u011flayan ve arama motoru optimizasyonuna (SEO) dolayl\u0131 olarak b\u00fcy\u00fck katk\u0131 sunan g\u00fc\u00e7l\u00fc bir performans stratejisidir.<\/p>\n CSS ile \u00e7izim yaparken kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck sorunlardan biri, HTML kodunun a\u015f\u0131r\u0131 dairesel Sanal elemanlar, ekstra HTML etiketi eklemeden mevcut bir elemana iki adet ek \u00e7izim katman\u0131 dahil etmenizi sa\u011flar. \u00d6rne\u011fin, sadece bir Bunun yan\u0131 s\u0131ra, sahnenin renk paletini ve temalar\u0131n\u0131 y\u00f6netmek i\u00e7in CSS De\u011fi\u015fkenlerinden (Custom Properties) faydalanmak harika bir tekniktir. Sitemizin karanl\u0131k mod (dark mode) ve ayd\u0131nl\u0131k mod (light mode) uyumlulu\u011funu sa\u011flamak i\u00e7in ana renk parametrelerini de\u011fi\u015fken olarak tan\u0131mlayabiliriz:<\/p>\n B\u00f6ylece uygulaman\u0131z kullan\u0131c\u0131n\u0131n cihaz sistem temas\u0131na an\u0131nda uyum sa\u011flar. Renkler do\u011frudan stil dosyas\u0131ndan miras al\u0131nd\u0131\u011f\u0131 (inherit) i\u00e7in, taray\u0131c\u0131 arka plan\u0131 ne olursa olsun ramen sahnesi zarafetinden \u00f6d\u00fcn vermeden sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n Web geli\u015ftirme d\u00fcnyas\u0131, kodun sadece mant\u0131ktan ibaret olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda sanatsal bir ifade bi\u00e7imi olabilece\u011fini bizlere her g\u00fcn yeniden kan\u0131tl\u0131yor. Bu rehberde, “Ramen After Dark” konsepti \u00fczerinden HTML hiyerar\u015fisini kurmay\u0131, 1. Pure CSS \u00e7izimleri t\u00fcm taray\u0131c\u0131larda ayn\u0131 g\u00f6r\u00fcn\u00fcr m\u00fc?<\/strong> 2. \u00c7izim yaparken SVG mi yoksa Pure CSS mi tercih edilmelidir?<\/strong> 3. CSS ile \u00e7izim yapmak sayfa performans\u0131n\u0131 olumsuz etkiler mi?<\/strong> 4. Karma\u015f\u0131k CSS \u015fekillerini kolayca \u00e7izmek i\u00e7in hangi ara\u00e7lar kullan\u0131labilir?<\/strong> #CSSSanat\u0131 #WebGeli\u015ftirme #FrontendTasar\u0131m #CSSAnimasyon #WebPerformans\u0131<\/p>\nz-index<\/code> (derinlik ekseni) m\u00fcdahalesi yap\u0131lmad\u0131\u011f\u0131 s\u00fcrece g\u00f6rselin do\u011fal \u00fcst \u00fcste binme s\u0131ras\u0131n\u0131 belirler.<\/p>\n<div class=\"ramen-scene\">\n <div class=\"steam-container\">\n <span class=\"steam steam-1\"><\/span>\n <span class=\"steam steam-2\"><\/span>\n <span class=\"steam steam-3\"><\/span>\n <\/div>\n <div class=\"ramen-bowl\">\n <div class=\"soup\">\n <div class=\"noodle-group\"><\/div>\n <div class=\"egg\">\n <div class=\"yolk\"><\/div>\n <\/div>\n <div class=\"naruto\"><\/div>\n <div class=\"scallion\"><\/div>\n <\/div>\n <\/div>\n <div class=\"table-shadow\"><\/div>\n<\/div><\/code><\/pre>\n<\/div>\nposition: relative<\/code> de\u011ferini vererek i\u00e7indeki t\u00fcm alt elemanlar\u0131 position: absolute<\/code> ile milimetrik olarak yerle\u015ftirebiliriz. B\u00f6ylelikle ramen kasesini olu\u015fturan t\u00fcm par\u00e7alar birbirine g\u00f6re hizalanm\u0131\u015f olur.<\/p>\n\u00c7orba Kasesi ve Derinlik Hissi: box-shadow Kullan\u0131m\u0131<\/h2>\n
border-radius<\/code> (kenar yuvarlatma) ve box-shadow<\/code> (kutusal g\u00f6lge) \u00f6zelliklerini bir arada kullanarak ger\u00e7ek\u00e7i bir kase formu elde ederiz.<\/p>\nborder-radius<\/code> \u00f6zelli\u011finin geli\u015fmi\u015f s\u00f6zdiziminden yararlan\u0131r\u0131z. \u00d6rne\u011fin border-radius: 10% 10% 50% 50% \/ 10% 10% 80% 80%<\/code> gibi bir tan\u0131mlama ile kasenin taban\u0131na ger\u00e7ek\u00e7i bir kavis verebilirsiniz. \u00dcstelik kasenin i\u00e7 k\u0131sm\u0131nda kalan \u00e7orba seviyesini g\u00f6stermek i\u00e7in inset<\/code> (i\u00e7 g\u00f6lge) de\u011ferine sahip box-shadow<\/code> kullanmak hayati \u00f6nem ta\u015f\u0131r.<\/p>\n\n
box-shadow: inset 0 10px 20px rgba(0,0,0,0.5)<\/code> \u015feklinde uygulan\u0131r.<\/li>\nlinear-gradient<\/code> ve radial-gradient<\/code> kullanarak kasenin \u00fczerindeki seramik parlamalar\u0131n\u0131 ve \u0131\u015f\u0131k yans\u0131malar\u0131n\u0131 sim\u00fcle edebiliriz.<\/li>\n<\/ul>\nYumurta ve Eri\u015fteler: border-radius ve clip-path \u0130le \u015eekillendirme<\/h2>\n
clip-path<\/code> (k\u0131rpma yolu) ve asimetrik kenar yuvarlatma teknikleri ile bu organik formlar\u0131 kolayl\u0131kla yakalayabilirsiniz.<\/p>\ndiv<\/code> eleman\u0131na asimetrik k\u00f6\u015fe de\u011ferleri veririz. border-radius: 50% 50% 45% 45% \/ 60% 60% 40% 40%<\/code> tan\u0131m\u0131 yumurtaya do\u011fal bir yumu\u015fakl\u0131k ve hafif oval bir form kazand\u0131r\u0131r. Yumurtan\u0131n sar\u0131s\u0131 ise i\u00e7 k\u0131sma yerle\u015ftirilen daha k\u00fc\u00e7\u00fck bir dairesel elemand\u0131r. Yumurta sar\u0131s\u0131na ekleyece\u011fimiz i\u00e7 radial-gradient<\/code>, kay\u0131s\u0131 k\u0131vam\u0131ndaki o ak\u0131\u015fkan dokuyu kusursuz bir \u015fekilde yans\u0131t\u0131r.<\/p>\nborder<\/code> (kenarl\u0131k) ve border-radius<\/code> kombinasyonlar\u0131 ile ard\u0131\u015f\u0131k yaylar \u00e7izmektir. \u0130kinci ve daha modern y\u00f6ntem ise clip-path<\/code> ile kendi \u00f6zel yolumuzu tan\u0131mlamakt\u0131r. \u00d6rne\u011fin SVG path<\/code> verisini clip-path: path(...)<\/code> \u015feklinde CSS i\u00e7erisine g\u00f6merek karma\u015f\u0131k eri\u015fte k\u0131vr\u0131mlar\u0131 olu\u015fturabiliriz.<\/p>\n\/* Yumurta sar\u0131s\u0131n\u0131n ak\u0131\u015fkan k\u0131vam efekti *\/\n.egg-yolk {\n width: 40px;\n height: 40px;\n position: absolute;\n top: 15px;\n left: 20px;\n border-radius: 50%;\n box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.3);\n}<\/code><\/pre>\n<\/div>\ntransform: rotate()<\/code> ve skew()<\/code> \u00f6zelliklerini kullanarak malzemeleri \u00e7orba y\u00fczeyine rastgele serpi\u015ftirilmi\u015f gibi a\u00e7\u0131l\u0131 bir \u015fekilde yerle\u015ftiririz. B\u00f6ylece simetrik ve yapay duran bir g\u00f6r\u00fcnt\u00fcden ka\u00e7\u0131nm\u0131\u015f oluruz.<\/p>\nT\u00fcten Buhar Efekti: @keyframes \u0130le Ak\u0131c\u0131 CSS Animasyonlar\u0131<\/h2>\n
@keyframes<\/code> (anahtar kareler) yap\u0131s\u0131n\u0131 devreye sokuyoruz.<\/p>\nspan<\/code> elemanlar\u0131 tasarlar\u0131z. Bu elemanlara filter: blur(8px)<\/code> uygulayarak duman\u0131n o bulan\u0131k ve u\u00e7ucu yap\u0131s\u0131n\u0131 taklit ederiz. Ard\u0131ndan @keyframes<\/code> kullanarak duman\u0131n a\u015fa\u011f\u0131dan yukar\u0131ya do\u011fru hareket ederken ayn\u0131 zamanda geni\u015flemesini, saydamla\u015fmas\u0131n\u0131 (opacity) ve hafif\u00e7e sa\u011fa sola sallanmas\u0131n\u0131 sa\u011flar\u0131z.<\/p>\n@keyframes steamRise {\n 0% {\n transform: translateY(0) scaleX(1);\n opacity: 0;\n }\n 30% {\n opacity: 0.5;\n }\n 80% {\n opacity: 0.2;\n }\n 100% {\n transform: translateY(-120px) scaleX(2.5);\n opacity: 0;\n }\n}\n\n.steam {\n position: absolute;\n bottom: 100%;\n width: 15px;\n height: 80px;\n border-radius: 50%;\n filter: blur(10px);\n animation: steamRise 4s infinite ease-out;\n}\n\n.steam-2 {\n animation-delay: 1.5s;\n left: 30px;\n}<\/code><\/pre>\n<\/div>\nanimation-delay<\/code> (animasyon gecikmesi) ve animation-duration<\/code> (animasyon s\u00fcresi) de\u011ferleri vermektir. E\u011fer t\u00fcm dumanlar ayn\u0131 anda y\u00fckselirse yapay bir tekrar olu\u015fur. Fakat gecikmeler sayesinde duman s\u00fcrekli ve do\u011fal bir d\u00f6ng\u00fc halinde t\u00fcterek izleyiciye o s\u0131cak comfort-food (rahatlat\u0131c\u0131 yemek) hissini tam anlam\u0131yla aktar\u0131r.<\/p>\nVaka Analizi: G\u00f6rsel Yerine Pure CSS Kullanman\u0131n Performansa Etkisi<\/h2>\n
\n\n
\n \nPerformans Kriteri<\/th>\n Geleneksel G\u00f6rsel (PNG + GIF)<\/th>\n Pure CSS \u0130ll\u00fcstrasyon<\/th>\n \u0130yile\u015fme Oran\u0131<\/th>\n<\/tr>\n<\/thead>\n \n Toplam Veri Boyutu<\/th>\n 1.8 MB<\/td>\n 12 KB (Gzip ile 3.4 KB)<\/td>\n %99.3 D\u00fc\u015f\u00fc\u015f<\/td>\n<\/tr>\n \n HTTP \u0130stek Say\u0131s\u0131<\/th>\n 6 Adet Dosya \u0130steyi<\/td>\n 0 Adet (Sat\u0131r i\u00e7i CSS)<\/td>\n %100 Tasarruf<\/td>\n<\/tr>\n \n En B\u00fcy\u00fck \u0130\u00e7erikli Boyama (LCP)<\/th>\n 3.2 Saniye<\/td>\n 0.7 Saniye<\/td>\n %78.1 H\u0131zlanma<\/td>\n<\/tr>\n \n Kumanda Etkile\u015fimi (INP)<\/th>\n 180 ms (Kasma var)<\/td>\n 16 ms (Ak\u0131c\u0131 60 FPS)<\/td>\n %91 \u0130yile\u015fme<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \u0130leri D\u00fczey \u0130pu\u00e7lar\u0131: Pseudo-Elements ve CSS De\u011fi\u015fkenleri<\/h2>\n
div<\/code> elemanlar\u0131 ile dolmas\u0131d\u0131r (div soup problemi). Kodun okunabilirli\u011fini korumak ve DOM (Document Object Model – Belge Nesne Modeli) a\u011fac\u0131n\u0131 hafif tutmak i\u00e7in ::before<\/code> ve ::after<\/code> pseudo-elementlerini (sanal elemanlar) etkin bir \u015fekilde kullanmal\u0131y\u0131z.<\/p>\n<div class=\"egg\"><\/div><\/code> etiketi a\u00e7arak; eleman\u0131n kendisiyle yumurta ak\u0131n\u0131, ::before<\/code> ile yumurta sar\u0131s\u0131n\u0131, ::after<\/code> ile de yumurta \u00fczerindeki baharat tanelerini \u00e7izebilirsiniz. Bu y\u00f6ntem kod karma\u015fas\u0131n\u0131 ciddi oranda azalt\u0131r.<\/p>\n:root {\n --soup-base-color: rgba(180, 80, 20, 0.8);\n --bowl-outer-color: inherit;\n --steam-opacity: 0.6;\n}\n\n\/* Gece yar\u0131s\u0131 konseptine \u00f6zel renk m\u00fcdahalesi *\/\n@media (prefers-color-scheme: dark) {\n :root {\n --soup-base-color: rgba(120, 40, 10, 0.9);\n --steam-opacity: 0.8;\n }\n}<\/code><\/pre>\n<\/div>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
box-shadow<\/code> ve border-radius<\/code> ile \u00fc\u00e7 boyutlu derinlik katmay\u0131, @keyframes<\/code> animasyonlar\u0131 ile canl\u0131 buhar efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m inceledik. \u0130ster ki\u015fisel portfolyonuzu renklendirmek ister projelerinizin y\u00fcklenme h\u0131z\u0131n\u0131 art\u0131rmak isteyin, CSS sanat\u0131 \u00f6\u011frenme s\u00fcrecinize b\u00fcy\u00fck bir de\u011fer katacakt\u0131r.<\/p>\nS\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\nEvet, modern web taray\u0131c\u0131lar\u0131n\u0131n (Chrome, Firefox, Safari, Edge) tamam\u0131 HTML5 ve CSS3 standartlar\u0131n\u0131 destekler. border-radius<\/code>, box-shadow<\/code> ve transform<\/code> gibi \u00f6zellikler t\u00fcm g\u00fcncel taray\u0131c\u0131larda birebir ayn\u0131 sonucu verir.<\/p>\n
\n\u00c7ok karma\u015f\u0131k, organik veya ill\u00fcstratif detaylar i\u00e7eren g\u00f6rseller i\u00e7in SVG format\u0131 daha uygundur. Ancak daha basit geometrik \u015fekillerden olu\u015fan, animasyonlu veya do\u011frudan DOM elemanlar\u0131yla etkile\u015fime girecek tasar\u0131mlarda Pure CSS daha hafif ve esnek bir alternatiftir.<\/p>\n
\nAksine, harici g\u00f6rsel dosyalar\u0131n\u0131n olu\u015fturdu\u011fu HTTP isteklerini azaltt\u0131\u011f\u0131 i\u00e7in sayfa y\u00fcklenme s\u00fcresini h\u0131zland\u0131r\u0131r. Ancak y\u00fczlerce karma\u015f\u0131k box-shadow<\/code> veya a\u015f\u0131r\u0131 blur<\/code> filtresi kullanmak d\u00fc\u015f\u00fck donan\u0131ml\u0131 mobil cihazlarda GPU (grafik i\u015flemci) y\u00fck\u00fcn\u00fc art\u0131rabilece\u011fi i\u00e7in performans testleri yap\u0131larak dengeli kullan\u0131lmal\u0131d\u0131r.<\/p>\n
\nKendi kodunuzu yazman\u0131n yan\u0131 s\u0131ra, clip-path<\/code> yollar\u0131n\u0131 g\u00f6rsel olarak olu\u015fturmak i\u00e7in Clippy gibi online ara\u00e7lardan veya CSS box-shadow<\/code> jenerat\u00f6rlerinden faydalanarak \u00e7izim s\u00fcrecinizi h\u0131zland\u0131rabilirsiniz.<\/p>\n