Cara membuat efek page fold dengan css

CSS

Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah ini, yaitu hasil efek dari menggunakan pseudo-elemen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Tidak rumit untuk membuat efek kotak seperti diatas, Setiap elemen akan bisa menerapkan dan tidak ada kebutuhan untuk markup tambahan karena Ini hanya sebuah kotak berwarna sederhana. Browser tanpa dukungan untuk pseudo-elemen, seperti IE6 dan IE7, pun mampu menampilkan ini.

Jika anda sudah membuat/mempunyai kotak warna untuk kontent tulisan tertentu, anda hanya perlu menambahkan position: relative untuk posisi pseudo-element pada css. Misalkan seperti berikut:

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-8.catatan {
   position:relative;
   width:90%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
}

Untuk efek yang lipatan

Efek lipatan dibuat dari pseudo-element yang diposisikan di sudut atas kotak. pseudo-element tidak memiliki lebar atau tinggi namun diberi batasan tebal dan variasi lipatan pada sudut sangat bervasiasi.

Dalam contoh ini, batas atas dan kanan diatur ke warna yang sesuai dengan warna latar belakang orange tua. Batas kiri dan bawah kemudian diberi warna yang sedikit lebih gelap atau lebih terang dari warna latar belakang.

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-9.catatan:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#658E15 #fff;
}

Kode css adalah semua yang dibutuhkan untuk membuat efek sederhana untuk efek sudut yang dilipat. untuk browser firefox anda memerlukan tambahan beberapa css agar efek ini muncul, karena firefox tidak mendukung untuk posisi pseudo-elemen. ini agar efek ini juga tampil lebih rapi di firefox berikut ini tambahannya:

.catatan:before {
   ... css efek lipatan ...
   display:block;
   width:0;
}

Menambahkan bayangan halus

Munculnya efek lipatan dapat sedikit ditingkatkan dengan menambahkan box-shadow (untuk browser yang mendukungnya) pada pseudo-element. Mengatur overflow: hidden pada catatan kotak yang diberi efek akan membantu menyembunyikan bagian-bagian dari bayangan yang akan mengganggu efek lipatan sudut. perhatikan css dibawah ini:

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-6.catatan:before {
   ... css efek lipatan ...
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Sudut membulat { Rounded corners }

Hal ini juga relatif sederhana untuk membuat efek dengan sudut membulat jika diinginkan. lihat css dibawah ini:

1code-line:5-12code-line:5-23code-line:5-34code-line:5-45code-line:5-56code-line:5-67code-line:5-78code-line:5-89code-line:5-910code-line:5-1011code-line:5-1112code-line:5-1213code-line:5-13.catatan.bulatan:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   background:#658E15;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
   display:block; width:0;
}

Kode akhir

Berikut ini adalah semua CSS yang dibutuhkan untuk membuat efek lipatan sudut yang sederhana dengan bayangan halus dari elemen HTML tunggal. Untuk memasukkan varian dengan sudut membulat pada objek element "catatan" dapat dilakukan dengan modifikasi seperti yang telah saya jelaskan sebelumnya. berikut cssnya:

1code-line:6-12code-line:6-23code-line:6-34code-line:6-45code-line:6-56code-line:6-67code-line:6-78code-line:6-89code-line:6-910code-line:6-1011code-line:6-1112code-line:6-1213code-line:6-1314code-line:6-1415code-line:6-1516code-line:6-1617code-line:6-1718code-line:6-1819code-line:6-1920code-line:6-2021code-line:6-2122code-line:6-2223code-line:6-2324code-line:6-2425code-line:6-2526code-line:6-2627code-line:6-2728code-line:6-2829code-line:6-2930code-line:6-3031code-line:6-3132code-line:6-3233code-line:6-3334code-line:6-3435code-line:6-3536code-line:6-3637code-line:6-3738code-line:6-38.catatan {
   position:relative;
   width:90%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}

.catatan:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#fff #fff #658E15 #658E15;
   background:#658E15;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0; /* Firefox 3.0 damage limitation */
}

.catatan.bulatan {
   -webkit-border-radius:5px 0 5px 5px;
   -moz-border-radius:5px 0 5px 5px;
   border-radius:5px 0 5px 5px;
}

.catatan.bulatan:before {
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
}

Dan untuk menerapkannya dalam HTML cukup gunakam kode berikut:

<div class="catatan">
    <p>Tek anda disini</p>
</div>

untuk yang memiliki sudut bulatan gunakan kode dibawah ini:

<div class="catatan bulatan">
    <p>Teks anda disini</p>
</div>

Silahkan anda ubah css diatas sesuka anda, jika semuanya belum sesuai keinginan.

Begitu saja dan semoga bermanfaat....

Artikel Terkait

  • Membuat thumbnail hanya tampil di homepage
    Untuk sahabat yang belum tahu bagaimana menerapkan trik dan cara ini mungkin sering punya pertanyaan, kok bisa ya ketika di halaman beranda/depan/homepage blog image/gambarnya muncul tetapi ketika di halaman posting kok hilang...?, mungkin ini bukan bahasan baru lagi, hanya saja saya menulis ini untuk sobat yang ingin tahu trik dan caranya. ji…
  • Judul posting responsive
    Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-hei…
  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…
  • Membuat posting di homepage warna warni
    salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasika…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…

5 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...