Januari 2014

Membuat efek kertas terselip dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs6iiCwbk5lNWuyEYDJAhNc0_r8gRU6GkTpkBUy84NqHx_OCVdm946M3_l1XnFQEui0E_cUaSdHr6HhW-nIhSqDKfPJPwauy_GnSU06k5-rP_tQtSdtOObEVWotavI5aE4wjjUpGdwaxv/s1600/thumb-efek-kertas-terselip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs6iiCwbk5lNWuyEYDJAhNc0_r8gRU6GkTpkBUy84NqHx_OCVdm946M3_l1XnFQEui0E_cUaSdHr6HhW-nIhSqDKfPJPwauy_GnSU06k5-rP_tQtSdtOObEVWotavI5aE4wjjUpGdwaxv/s1600/thumb-efek-kertas-terselip.jpg" width="200" /></a></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
 </div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-Element Before dan After yang sebelumnya telah anda pelajari dalam tutorial berjudul “Mengenal lebih dalam CSS Pseudo Element” dan beberapa kasus yang pernah dibahas, seperti pada tutorial “Membuat CSS Tooltip”</div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Kembali ke pembahasan utama, kali ini kita akan membuat sebuah efek kertas yang terselip ke dalam lubang. Berikut ini adalah screenshot dari efek yang kita bicarakan jika anda masih belum memiliki gambarannya.</div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 13px; margin: 20px 0px; padding: 20px; text-align: center;">
<img alt="Efek Kertas Terselip Preview" src="https://lh3.googleusercontent.com/-jPUTJyZxX6Y/UdDNZAQmCaI/AAAAAAAACIw/HHLEfSPtnXY/s800/01-07-2013%25207-28-40.png" style="margin: 0px; max-width: 100%; padding: 0px;" /></div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 13px; margin: 20px 0px; padding: 20px; text-align: center;">
<a class="button" href="https://dl.dropboxusercontent.com/u/26808427/cdn/ariona/demo/tucked-paper/index.html" style="background-color: #32beff; background-position: initial initial; background-repeat: initial initial; color: black; display: inline-block; margin: 0px; padding: 10px 20px; text-decoration: none;" target="_blank" title="Demonstrasi Efek Kertas Terselip">Demonstrasi</a></div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Markup HTML</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Untuk markup HTMLnya sederhana saja, kita hanya membutuhkan sebuah div sebagai objek kertas, saya beri kelas kertas pada div tersebut. Saya juga tambahkan sedikit random/dummy text pada kertas tersebut.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><div class="kertas">
 <h1>Lorem Ipsum Dolor Sit Amet</h1>
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut at consectetur officia et accusamus inventore dolor cupiditate tempore fuga alias aliquam quo dolorum voluptatem tenetur ipsum corporis commodi vitae! Iusto!
 
</div></pre>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
CSS</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Pertama-tama kita beri style terlebih dahulu kertas yang akan kita selipkan nantinya beserta background dari bodynya.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">body{
 background:#d8d8d8;
}
.kertas{
 background:white;
 width:400px;
 margin:20px auto;
 padding:20px;
 position:relative;
 font-family:cambria,serif;
 box-shadow:0 1px 10px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Selanjutnya adalah efek utama yang akan kita buat, Tekniknya sangat sederhana, kita buat tambahkan pseudo element pada class kertas, yang akan menjadi efek lubang untuk menyelipkan kertas.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:#d8d8d8;
 content:"";
 width:100px;
 height:50px;
 position:absolute;
 top:-25px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
style tersebut akan membuat sebuah box yang akan kita gunakan untuk menutupi ujung-ujung kertas dan pada style selanjutnya kita akan mengatur rotasi dari tiap ujung.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before{
 left:-50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.kertas::after{
 right:-50px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Silahkan simpan pekerjaan anda dan perhatikan apa yang ditampilkan dalam browser.</div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Efek Selotip</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan <a href="https://www.google.com/search?q=selotip&tbm=isch&tbo=u&source=univ&sa=X&ei=A8XQUbvTJcTlrAfpxYGgAQ&ved=0CEYQsAQ" style="color: #ef8700; margin: 0px; padding: 0px; text-decoration: none;" title="Selotip">selotip</a> di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:rgba(255,255,255,.5);
 content:"";
 width:100px;
 height:25px;
 position:absolute;
 top:-10px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dalam contoh di atas saya memberikan warna transparan dengan system rgba, anda bisa menggunakan background-image dan membuat gambar selotip yang lebih realistis.</div>

Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-...

Baca selengkapnya »

03.01 +

Free Download Flat UI Pro Personal License PSD & HTML

Masholeh || Free Download Flat UI Pro Personal License PSD & HTML  
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Fix8MYZPdz-icJyxTqUnbXsUcAux5Mg4iwYq7mzbam5NDyGhvr6E1LS_C4oCUPIhR9LlYugNkFpmWIx7OXABQiqj0qOCE1QTNFwNt0FDoOxPb5s4y0RC-aUa8eFurdNK00APyXV_sM4/s1600/Flat+UI+pro.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Fix8MYZPdz-icJyxTqUnbXsUcAux5Mg4iwYq7mzbam5NDyGhvr6E1LS_C4oCUPIhR9LlYugNkFpmWIx7OXABQiqj0qOCE1QTNFwNt0FDoOxPb5s4y0RC-aUa8eFurdNK00APyXV_sM4/s400/Flat+UI+pro.png" style="border: 1px solid rgb(219, 219, 219); height: 150px; max-width: 100%; padding: 4px; width: 220px;" title="" width="400" /></a></div>
 
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
<div style="text-align: justify;">
Bootstrap, the popular front-end framework which hailed from Twitter, continues to grow as a quick way for developers to get an attractive site up and running in little time. It’s a great starting point, but Bootstrap is often left completely un-customized, and its popularity has left the framework’s distinct design looking default and monotonous.</div>
<div style="text-align: justify;">
To bring some variety to this space, Designmodo, the team behind Dribbbleboard and this slick IMDB concept, is launching Flat UI, a free HTML user interface kit based on Bootstrap. The kit packs PSD files of buttons, inputs, selects, checkboxes, tags, menus, progress bars, sliders and navigation elements, as well as color swatches and SVG glyphs.</div>
</blockquote>
 Bootstrap, kerangka populer front-end yang berasal dari Twitter, terus berkembang sebagai cara cepat bagi pengembang untuk mendapatkan situs Facebook yang menarik dan berjalan dalam waktu sedikit. Ini adalah titik awal yang bagus, tapi Bootstrap sering tersisa benar-benar tidak disesuaikan, dan popularitasnya telah meninggalkan desain yang berbeda kerangka yang mencari default dan monoton. Untuk membawa beberapa variasi untuk ruang ini, Designmodo, tim di belakang Dribbbleboard dan konsep IMDB licin ini, meluncurkan FLAT UI, gratis kit antarmuka pengguna HTML berdasarkan Bootstrap. Kit bungkus file PSD tombol, input, memilih, checkbox, tag, menu, progress bar, slider dan elemen navigasi, serta swatch warna dan mesin terbang SVG. 
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmT8Dd9K9NOpTIeP6dkCisit28R5ccogoRV8devZouxrT7dN_h_33_CKLJp-g7XRHalxFUNvz6CHWG5N2AENNq4p6tyRFTPfpVaD7q0W3oop75usNknbXlc0ZLqFthZWQ30K8lgkSJR7A/s1600/flat+UI.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmT8Dd9K9NOpTIeP6dkCisit28R5ccogoRV8devZouxrT7dN_h_33_CKLJp-g7XRHalxFUNvz6CHWG5N2AENNq4p6tyRFTPfpVaD7q0W3oop75usNknbXlc0ZLqFthZWQ30K8lgkSJR7A/s320/flat+UI.png" style="border: 1px solid rgb(219, 219, 219); height: 150px; max-width: 100%; padding: 4px; width: 220px;" title="" width="320" /></a></div>
 
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
This time i want to share Flat UI PSD & HTML from Designmodo.com . Its very interesting for web designer and very easy to use especially for prototyping </blockquote>
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
 You can see at designmodo.com website , for complete details about <a href="http://designmodo.com/flat/" style="color: #999999; text-decoration: none;">Flat UI Pro</a></blockquote>
 Kali ini saya ingin berbagi Flat UI PSD & HTML dari Designmodo.com. Yang sangat menarik bagi desainer web dan sangat mudah digunakan terutama untuk prototyping Anda dapat melihat di website designmodo.com, untuk rincian lengkap tentang <a href="http://designmodo.com/flat/" style="color: #999999; text-decoration: none;">Flat UI Pro</a> 
<div style="background-color: white; color: #666a76; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: center; widows: 3;">
<a href="https://www.dropbox.com/s/w0xcf5jn34mt7lg/Flat-UI-PSD-HTML-Personal-License.zip" style="color: #53a1b8; text-decoration: none;" title="Download Flat UI Pro"><img alt="Download" class="aligncenter size-medium wp-image-49" height="117" src="http://ramazeta.com/wp-content/uploads/2013/09/toolbar-download-300x117.png" style="border-bottom-left-radius: 0.201em; border-bottom-right-radius: 0.201em; border-top-left-radius: 0.201em; border-top-right-radius: 0.201em; border: 0px; box-sizing: border-box; display: block; height: auto; margin: 0px auto 1.777em; max-width: 100%; padding: 4px; width: 220px;" width="300" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: right; widows: 3;">
Sumber : http://ramazeta.com/flat-ui-personal-license-psd-html/</div>

Masholeh || Free Download Flat UI Pro Personal License PSD & HTML Bootstrap, the popular front-end framework which hailed from Tw...

Baca selengkapnya »

21.20 +

Blogger

CSS

Javascript

Membuat efek kertas terselip dengan CSS

Free Download Flat UI Pro Personal License PSD & HTML

Entri Populer

Arsip Blog