Posts

Navigasi Button Untuk SlideShow

Image
Hari ini kami ingin berbagi beberapa inspirasi untuk navigasi navigasi dengan Anda. Ada begitu banyak cara kreatif untuk menunjukkan elemen kecil yang merupakan bagian penting dari banyak situs web saat ini. Anda dapat menemukannya di tayangan slide konten, sebagai bagian dari navigasi halaman, galeri foto dan banyak lagi. Indikator ini sebagian besar digambarkan sebagai panah yang menunjuk ke kiri dan kanan. Tentu saja ada panah yang mengarah ke atas dan ke bawah juga. Tapi hari ini kita ingin fokus pada yang lateral dan menciptakan beberapa efek hover yang menarik yang dalam beberapa kasus meningkatkan elemen, atau menunjukkan preview konten yang akan datang. Efek ini untuk inspirasi Anda. Harap dicatat bahwa mereka hanya akan bekerja di browser modern. Perhatikan juga bahwa kita menggunakan status elemen hover untuk menunjukkan efek yang bukan merupakan solusi untuk perangkat sentuh. Gambar yang digunakan dalam demo tersebut adalah oleh Joanna Kustra, Idleformat dan Andrey Yako

Transisi On Scroll Layout

Image
Blueprint ini adalah template untuk tata letak efek gulir. Kami memiliki beberapa permintaan tentang bagaimana mencapai efek elemen pemikat ini begitu mereka berada di area pandang dan memutuskan untuk membuat Cetak Biru untuk itu. Ia bekerja dengan menambahkan sebuah kelas untuk menghidupkan kedua sisi bagian. Ada contoh efek yang ditetapkan dan juga beberapa kueri media untuk menangani layar yang lebih kecil. Pada perangkat yang mendukung sentuhan, kami tidak akan menerapkan efek apa pun karena logika pengguliran pada perangkat sentuh. Silakan baca lebih lanjut tentang masalah ini di artikel ini oleh TJ VanToll: onscroll Event Issues on Mobile Browsers. Kredit sumber: iPad PSD Flat Mockup oleh Pixeden. HTML < div id = "cbp-so-scroller" class = "cbp-so-scroller" > < section class = "cbp-so-section" > < article class = "cbp-so-side cbp-so-side-left" > < h2 > Lemon drops </ h2 > < p >

Personal Layout Unik

Image
Blueprint ini adalah tata letak dengan dua sisi, terkadang terlihat pada situs portofolio pasangan dan pasangan. Idenya adalah untuk menunjukkan pandangan dua sisi awal dan saat mengklik sisi, keseluruhan halaman berpindah ke arah masing-masing. Halaman individu dari orang yang dipilih ditampilkan. Blueprint hadir dengan beberapa contoh kueri media dan demo kedua dimana timbangan timpang menghilang. Ini akan bekerja di browser modern (dari IE9 di). HTML < div class = "container" > < div id = "splitlayout" class = "splitlayout" > < div class = "intro" > < div class = "side side-left" > < div class = "intro-content" > < div class = "profile" > < img src = "img/profile1.jpg" alt = "profile1" > </ div > < h1 > < span > Toby Blue </ span > < span > Web Designer </ span > </