CSS3 ile üzerine gelince önyüzünü arkayüzüne dönen resim kodu - Printable Version +- Hakkalyakin Board (https://hakkalyakin.com) +-- Forum: GENEL KÜLTÜR BİLGİLERİ (https://hakkalyakin.com/forumdisplay.php?fid=10) +--- Forum: GENEL KÜLTÜR BiLGiLERi MAiN (https://hakkalyakin.com/forumdisplay.php?fid=229) +---- Forum: Webmaster Bilgileri (https://hakkalyakin.com/forumdisplay.php?fid=232) +---- Thread: CSS3 ile üzerine gelince önyüzünü arkayüzüne dönen resim kodu (/showthread.php?tid=4383) |
CSS3 ile üzerine gelince önyüzünü arkayüzüne dönen resim kodu - RasitTunca - 11-24-2018 CSS3 ile üzerine gelince önyüzünü arkayüzüne dönen resim kodu Bu yapı için iki adet görsel hazırlayacağız. Örnekte bir adet resim bir adet yazı alanı oluşturduk. Yazı alanını border-radius ile aynı görselmiş gibi yuvarlak hale getirdik. Bu iki çerçeveyi de absolute şekilde pozisyonlayarak z-index ile hiyerarşik olarak sıraladık. Döndürülecek öğeleri, tetikleyici isimli ayrı bir çerçeve içerisine alarak tasarıma uyarladık. HTML kodlarımız ile başlayalım. HTML Kodları Yukarıda da bahsettiğimiz gibi birbirini kapsayan iki adet çerçevemiz mevcut. Ayrıca onyuz ve arkayuz şekilde isimlendirilmiş yüzeylerimizde tasarım içerisinde yerini alıyor. Bu dizilimde HTML kodları şu şekli alıyor: Code: <div class="dondurulecekler"> Sırada bu kodları şekillendirmek var. Code: .dondurulecekler { Bu kadar. |