Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Sabtu, Juni 08, 2013

Hello,kali ini saya akan berbagi Widget CSS Dropdown Menu,yaitu Menu dengan css yang sederhana yang dilengkapi dengan fungsi Dropdown dan Sub menu .Penggunaanya sangat praktis dan mudah untuk dimodifikasi.Contohnya kalian bisa melihat langsung dibawah ini.Ohh,saya ingatkan sebelum mencoba widget ini,ada baiknya membackup/download template kamu agar tidak terjadi sesuatu yang diinginkan.

DEMO :


Untuk memasang menu seperti diatas,pertama login ke account blogger kamu,lalu pilih menu template,pilih edit html, lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS
#menujohanes{
width: 100%; /* panjang menu */
margin: auto; /* posisi menu auto */
background: #fafafa; /* warna background */
height: 49px; /*tinggi menu*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid #ddd;
text-transform: uppercase; /* Huruf besar */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index: 99;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; /* panjang menu */
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover{
background:#557FFF; /* warna background ketika diarahkan*/
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}
#menujohanes ul li a:hover {
color:#fafafa;} /* warna text ketika diarahkan */
#menujohanes ul li a{
color: #666; /* warna text */
padding: 0 10px;
line-height:25px;
font-size:11px; /* ukuran text */
display:block;
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
#menujohanes ul li ul li{float: none;position: relative;}
#menujohanes ul li ul{
position: absolute;
top:49px;
left:0;
display: none;
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
width:150px;
border-radius: 0px 0px 5px 5px;
background: #fff;}
#menujohanes ul li:hover > ul{display: block;}
#menujohanes ul li ul li a{line-height:25px;}
#menujohanes ul li ul li ul{
position: absolute;
top:0; left:150px;
display: none;
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px;
width:150px;
background: #fff;}
#menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}


Selanjutnya,copy-paste HTML dibawah ini diantara kode <body>...</body> tergantung anda ingin meletakan posisi menu ini.

HTML
<div id="menujohanes">
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Date A Live</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Devil Survivor2</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Google plus</a></li>
</ul>
</li>
<li><a href="#">Multi sub</a>
<ul>
<li><a href="#">Episode 1</a>
<ul>
<li><a href="#">Episode 2</a>
<ul>
<li><a href="#">Episode 3</a></li>
<li><a href="#">Episode 4</a></li>
</ul>
</li>
<li><a href="#">Episode 5</a></li>
</ul>
</li>
<li><a href="#">Episode 6</a></li>
<li><a href="#">Episode 7</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Email</a></li>
</ul></div>

*Ganti tanda pagar dengan url link,dan namae link'a

Setelah selesai, simpan,dan lihat hasinya.jika sudah berhasil,tahap selanjutnya adalah mengatur isi menu dan link url pada menu anda.


Setting HTML

1. Normal menu.

<li><a href="#">Anime</a></li>
;


2. Drop down menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>


3. Sub menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a>
<ul>
<li><a href="#">Episode 1</a></li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>

4. Multi Sub menu.

<li><a href="#">Download</a>
<ul>
<li><a href="#">Naruto</a><ul>
<li><a href="#">Anime</a><ul>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
<li><a href="#">Episode 2</a></li>
<li><a href="#">Episode 3</a></li>
</ul>
</li>
</ul>
</li>






Selamat mencoba dan semoga bermanfaat,terima kasih.

Senin, Februari 18, 2013
Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi".nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).
Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

Screenshot



CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>


#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}




HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>


Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>







1. Pengaturan posisi notifikasi.

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

Atas,kanan.
right: 10px;
top: 10px;


Bawah,kanan.
right: 10px;
bottom: 10px;


Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.
top:atas
bottom:bawah
right:kanan
left:kiri


Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)




Untuk setting lainya seperti background(menggunakan rgba color) baca disini, border-radius baca disini dan contohnya disini ,dan selebihnya dapat anda lihat pada comment css yang saya sertakan diatas.





Baiklah,Sekian penjelasan saya mengenai Notifikasi sederhana dengan CSS3 yang saya buat sendiri,semoga bermanfaat minna-san~ arigatou gozaimasu~ :v


Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html
,

Sabtu, Februari 02, 2013

Hai minna-san,hari ini saya mau sharing tentang Content Slider CSS3 yang sama dengan di template Fansuber Otaku,karena ternyata banyak yang membutuhkan slider ini.

Oia,Slider ini Sebenarnya hasil Editan saya,aslinya kamu bisa lihat di web ini :Iamceege.com. Apa sih bedanya? yang berbeda yang pasti stylenya,teruama pada judul slide,kecepatan animasi,jumlah photo yang ditampilkan,dan penambahan deskripsi pada slider,serta penambahan efek filter blur pada animasi.dan sebenarnya juga untuk pemasangan slider ini sudah pernah saya post pada banner lider,kalau yang itu cuma dibuat khusus agar cocok dengan banner.kelebihan dari slider ini yaitu ringan,tidak memerlukan javascript ataupun jquery,animasi dapat kita atur sendiri,dan cssnya mudah untuk disetting.






CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#slider3 {
width: 610px;
height: 298px;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #ddd;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin:auto;
margin-bottom: 30px;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover ul, #slider3:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#slider3 img {-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;}
#slider3 img:hover {filter: saturate(1.2);
-webkit-filter: saturate(1.2);
-moz-filter: saturate(1.2);
-o-filter: saturate(1.2);
-ms-filter: saturate(1.2);}
#pause1 {
width: 610px;
height: 255px;
position: absolute;
top: 45px;
opacity: 0;
pointer-events: none;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lRomfmrlsUw4pxbOxHwRQzNYJu6rcHezIO4YC9Ik7qQFzvvndM3go8sOkpAK1BAYeGeePaPmxKQqZZxfVmvcxANQqAwgPnx5L-1f_DEwmK6LS4eIi5NgIImsd4M2Ib-RQ5z2E22juVmu/s1600/paused+copy.png") no-repeat;
left: 560px;

}

#overlay1 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade1 35s infinite;
-webkit-animation:overlay-fade1 35s infinite;
}
#slider3 ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation1 35s infinite;
-webkit-animation:slide-animation1 35s infinite;
position:relative;
left:0px;
}
#slider3 li {
display:inline;
width:610px;
height:235px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span:hover {background: #7776B2;}
#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE;
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}

#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa;
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-moz-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-webkit-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}/* Blog johanes djogzs.blogspot.com */
@-moz-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;
font-weight:normal;
text-shadow:1px 1px 1px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */
#slider3 ul li .baka h3 {
font-size:13px;
line-height:25px;
color:#222;
font-weight:normal;
}/* Blog johanes djogzs.blogspot.com */



HTML

Sedangkan untuk Kode Html ini diletakan diantara kode <body> ... </body> tergantung dimana anda ingin meletakanya dimana.



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider3'>
<div id='mask1'>
<ul><li>
<span><h2>Tamako Market</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyLI2OKOf83RrnqDFr2RmGVMFfJGTWA0ElfUgXlUz2piLvK1tgpUefkxfR5HP-79inbybBvnYcEdWSMIXw2DkX1rspRGfc37i8046Vlgaks6l_YUZSKH3jlXsvep4397if2hfeTThlcRPB/s1600/4.jpg'/></a>
<div class='baka'><h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town&#39;s bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<span><h2>Vividred Operation</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxV1kxFPendOOrDiQuy_OtqBdacvC_UlsQ6f1YKSLUwkhLOex7vaxr1TYCDDX-BrIaBpClduq6yea8I2nr2ma_CZUUFdUmwOECjIleMAgg7Mb7nsIFMNTcBYjX3Zpigo_KB3a6a0ebe0p/s1600/3.jpg'/></a>
<div class='baka'><h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (&#31034;&#29694;&#12456;&#12531;&#12472;&#12531; Jigen Enjin?), which solved an energy crisis five years prior.</h3></div>
</li>
<li>
<span><h2>Ore no Kanojo to Osananajimi ga Shuraba Sugiru</h2></span>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhr0E2EWGqSvUm-LDbpya3cU2CtP4VsQNCcINLfaGgxKlNNny9pSWa3wy8rc2eNt5myxYAjJeqnbVj2qi4v0fo7S8ExXjobn9-Rpz31OOsRGvjy3k605XguPb9-5EWJx6wjhZ3eZ4VZnT/s1600/Untitled-1.jpg'/></a>
<div class='baka'><h3>Eita Kid&#333; enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div>
</li>
<li>
<span><h2>Maoyuu Maou Yuusha</h2></span><a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XofgjDE2HBypJgEgT4DjZAO-ywhBAbRKSnHcOCrrw5Fovr6c8bB2zgDi9R48o2mlJb0OnOSPRJFs_hWId_2qS3fU9vrQuJkP1GnzfLjnUiSY7TvujvWNeG3t7skX8o71d8gAzuinYhXW/s1600/2.jpg'/></a>
<div class='baka'><h3>The story is set in a world embroiled by war between Humans and Demons. The Humans&#39; greatest hero invades the Demon King&#39;s castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div id='overlay1'>
</div><div id='pause1'>
</div></div></b:if>


Text bewarna Orange : Judul Slider
Text bewarna merah : Alamat situs/Link/url web
Text bewarna ungu : Url Gambar
Text bewarna biru : Deskripsi






Setting CSS Judul slider.


#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE; (warna background dapat diganti.)
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}



Setting CSS deskripsi Slider


#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa; (warna background dapat diganti)
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}






Oia,aya mau menambahkan lagi,apabila kamu ingin mengubah ukuran lider ini,kamu haru setting sendiri secara manual.
Slider ini sudah saya atur dengan ukuran standart 610px,jadi artinya seluruh content pada slider ini selebar 610px,termasuk pergerakan animasi dan ukuran gambar pada slider ini sendiri,jadi bila anda ingin mengganti ukuran slider ini,misalkan 650px,berarti seluruh css lebarnya juga harus 650px agar susunanya rapih dan efek animasinya juga tepat,terumama untuk css animasi keyframenya,


saya ambil contoh dari postingan banner slider,karena sebelunya sudah dijelaskan.

(contoh pada css banner slider)
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagaimana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.

perhitungan diatassama saja dengan content slider ini,hanya saja nilainya berbeda karena ukuranya lebih lebar content slider ini.




Sekian penjelasan saya tentang Content slider CSS3, Semoga bermanfaat ^^
#meskipun senin depan ujian,kegiatan blogging susah untuk dihentikan~xD
http://205.196.121.10/4784bn9qrucg/tqd877okjqgdc77/%5BUn%5Dcertain+happiness.mp3

Jumat, Januari 25, 2013

Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^

Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya :

HTML

<div class='nama-filter'>
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr5NFvu3059rwF1UsQfo4rg6rYIq8ups6ujUIIXlFQLrt15WPO59KMn-DXc93G4mjiCdCpC725kroZx2NCVoAcmQVvZOUUBC1LcMjMuOlIB8SviygBhLG2u4L7EOgO-mDjY9u9hCYJy0/s400/30059960.jpg" width="283" />
</div>

nama-filter diganti dengan css name yang ada di contoh dibawah,misalkan saya pilih efek blur,HTML class-nya menjadi <div class='blur'> (tanpa tanda titik)

#class html dan css name harus sama agar trik ini WORK!


#CSS Diletakan diatas kode ]]</b:skin>

#HTML Diletakan diantara <body> isi html </body>


Oia sebelumnya Saya sarankan Gunakan CSS ini hanya untuk keperluan saja,mungkin kita tahu beberapa orang lebih sering menggunakan browser google chrome dengan versi terbaru(rekomendasi) ,oleh karena itu gunakan css yang memang untuk chrome (-webkit)

#ada kemungkinan mozilla belum mendukung css3 filter ini





Blur
Semakin Besar Nilai blur yang diberikan,maka efek blur pada gambar akan semakin pudar.

Sebelum                                                                         Sesudah



CSS


.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}






Brightness
Semakin Besar Nilai Brightness atau kecerahan yang diberikan,maka gambar akan semakin terang.
dan sebaliknya juga diberi nilai dibawah 0 atau minus 1 gambar akan semakin gelap.
antara (-1.0 s/d 1.0)

Sebelum                                                                         Sesudah



CSS


.Brightness {
filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
}





Saturation
Semakin Besar Nilai Saturation atau ketajaman warna yang diberikan pada gambar,maka warna pada gambar akan semakin terang/cerah.

Sebelum                                                                         Sesudah



CSS


.Saturation {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
}





Hue-Rotate
Untuk Hue-Rotate,nilai yang diatur menggunakan derajat yang sesuai terhadap arah jarum jam prinsip roda warna sejauh 360 derajat.


Roda Warna

Sebelum                                                                         Sesudah



CSS


.Hue-Rotate {
filter: hue-rotate(170deg);
-webkit-filter: hue-rotate(170deg);
-moz-filter: hue-rotate(170deg);
-o-filter: hue-rotate(170deg);
-ms-filter: hue-rotate(170deg);
}





Contrast
Semakin Besar Nilai Kontras yang diberikan pada gambar,maka tingkat kontras pada gambar akan semakin tinggi, dan begitu juga sebaliknya.

Sebelum                                                                         Sesudah



CSS


.Contrast {
filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
}





Grayscale
Semakin Besar Nilai grayscale yang diberikan pada gambar,maka gambar akan semakin berubah warna menjadi abu-abu/gray.


Sebelum                                                                         Sesudah



CSS


.Grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}





Sepia
Efek photo filter Sepia akan semakin sempurna jika diberikan nilai 100%.

Sebelum                                                                         Sesudah



CSS


.Sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}



Invert
Filter ini untuk membalikan warna yang ada pada gambar dengan batasan 0% - 100%

Sebelum                                                                         Sesudah



CSS


.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}




Transparency
Untuk efek transparant pastinya sudah tidak asing bukan,transparant juga dapat dikategorikan sebagai photo filter.

Sebelum                                                                         Sesudah



CSS


.Transparency {
opacity:0.5;
filter:alpha(opacity=40);
}


Nah,apakah dalam satu gambar efeknya bisa kita satukan ,tentu saja bisa,kita bisa mengkombinasikan efek" filter seperti halnya filter pada photoshop,dan inilah hasil contoh nexperiment yang saya buat :

Hasil:

CSS


.jomixed {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
filter: contrast(122%);
-webkit-filter: contrast(122%);
-moz-filter: contrast(122%);
-o-filter: contrast(122%);
-ms-filter: contrast(122%);
filter: hue-rotate(325deg);
-webkit-filter: hue-rotate(325deg);
-moz-filter: hue-rotate(325deg);
-o-filter: hue-rotate(325deg);
-ms-filter: hue-rotate(325deg);
}




Nah,setelah itu apa lagi yang dapat kita gunakan dengan css3 filter ini?
dengan css filter kita juga bisa buat sebagai hover efek dan animasi infinity ataupun animasi yang menggunakan keyframe.

misalkan untuk efek animasi hover,yg kita perlukan adalah css transition,misalkan kita beri nilai timing 0.5 detik.

CSS


-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;

Silakan anda coba arahkan kursor anda pada gambar dibawah ini.

HASIL :

Contoh 1

CSS


.blur-animasi {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;}
.blur-animasi:hover {
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}

Contoh 2


CSS


.blur-animasi1 {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.blur-animasi1:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}





Dan cara diatas juga sama untuk css filter lainya,mudah bukan? sekian penjelasan saya tentang >CSS3 Filters,Arigatou gozaimasu minna-san~ ja mata ne~ ^^/



Artwork by :絵 | mia@ミア [pixiv]



Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html




Selasa, Januari 22, 2013


Hello sobat,pada kesempatan kali ini,saya akan berbagi trik cara memasang Efek loading page dengan CSS3 Animasi hasil modifikasi saya sendiri full menggunakan CSS3 dan dan css3 keyframe animation dengan menggunakan timing yang tepat~xD

ScreenShot:

Awal mula membuat trik ini saya mendapat ide dari banner slider/photo slider yang dulu saya post.jadi saya punya ide untuk menggunakan efek loadingnya saja dan dibuat melayang pada blog kita pada tiap halamanya,ya sudah,saya hapus gambar slidenya,dan dibuat lebih simple dan menyisakan css loadernya saja.efek loadernya sendiri saya atur timing standart'a selama 15 detik dan efek fade-out/efek menghilangkan slider setelah waktu habis,dan jadilah PAGE LOADER palsu~xD. LOL

Mengapa saya sebut palsu?

karena menggunakan trik ini bukan benar" loading konten yang ada di blog kita,tetapi hanya membuat pengunjung bertahan selama kurang lebih dari 15 detik~xDD.

Oia,sebelumnya saya ingatkan,untuk memasang loader page ini,lebih baik diterapkan pada blog yang beban-nya belum terlalu berat,karena menggunakan trik ini akan menambah sedikit beban pada blog anda,dan itu juga tergantung pada konten" pada blog anda,dan jangan lupa untuk selalu membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan~

mau dicoba? ikuti langkah' dibawah ini :




CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#sliderloadingwrapper {width:100%;height:100%;
position:fixed;z-index: 999999999999999999999999999999;
background: rgba(95, 130, 187, 0.2);top: 0px;
left: 0px;-webkit-animation: fadeOut 15s linear forwards;
-moz-animation: fadeOut 15s linear forwards;
-o-animation: fadeOut 15s linear forwards;
-ms-animation: fadeOut 15s linear forwards;
animation: fadeOut 15s linear forwards;}
/* Blog johanes djogzs.blogspot.com */
#sliderloader {
width: 500px;
height: 85px;
overflow: hidden;
background-color: #8CA5CE;
border: 1px solid #5F82BB;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-bottom: 1px solid #222;
margin: auto;
margin-top: 200px;}
#progressbg {
width:460px;
margin:auto;
height:5px;
background-color:#ddd;
top:65px;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#johanesloader {
width:1px;
height:5px;
background-color:#ffd000;
-moz-animation:johanesloader 70s infinite;
-webkit-animation:johanesloader 70s infinite;
position:relative;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li a {
display:block;
text-decoration:none;}
#sliderloader li span {
display: block;
width: 460px;
padding: 10px 20px;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
float: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;letter-spacing: 1px;
font-weight:normal;
text-shadow:1px 1px 2px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */

@-webkit-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-moz-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-o-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-ms-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px;}
90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; transform: translateY(0px);top:0px;}
99% { opacity: 0; transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px; }
}







HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

<div id='sliderloadingwrapper'><div id='sliderloader'>
<ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
<div id='progressbg'><div id='johanesloader'>
</div></div></div></div>




Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)
#sliderloadingwrapper{

yang diganti :
background: rgba(95, 130, 187, 0.2);

dan

#sliderloader {

yang diganti :
background-color: #8CA5CE;



Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
Isi HTML
</b:if>

untuk lebih lengkapnya,bisa dibaca disini


#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.


Selamat mencoba,semoga bermanfaat,Arigatou gozaimasu minna-san~ xD



Note:


Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html


,

Sabtu, Januari 19, 2013

Hello sobat,sudah cukup puaskah dengan template" yang baru saja saya buat kemarin?
nah kali ini saya akan menunjukan beberapa Analisa saya tentang dasar-dasar CSS Clip property yang mungkin menjadi kategori tingkat menengah-lanjut dari sekian banyak css property yang diketahui,karena masih sangat jarang css ini digunakan penerapanya,tetapi kalau kita akali,mungkin sangat bermanfaat.

Apakah itu CSS Clip property,dan apakah fungsinya?
Awalnya juga saya kurang mengerti tentang css ini,tetapi setelah melihat hasil contoh penggunaanya,ternyata dapat memotong gambar,atau kalau menurut saya sebagai masking pada gambar karena gambar bukan benar-benar dipotong tetapi hanya menampilkan sebagian gambar yang dapat diatur berapa pixel gambar dipotong dari sisi atas,bawah,kanan dan kiri.
penggunaan css ini mendukung pada semua browser dengan versi terbaru.






Seperti apakah perintah CSSnya ,contohnya seperti dibawah ini :

clip: rect(50px, 450px, 250px, 200px);

Yang berarti :

clip: rect(Atas, kanan, bawah, kiri);

Apa maksudnya saya artikan atas,kanan bawah dan kiri?
sebenarnya cara kerjanya sama dengan padding,tetapi difungsikan pada css clip property.yaitu batas jarak pada suatu objek.

Menggunakan css Clip property akan bekerja dengan syarat posisi objek/element harus absolute.jika tidak,maka css tidak akan bekerja.dan terkadang jika salah satu atau 2 padding css clip yang bernilai 0,maka gambar tidak akan tampil.

CSS
Position:absolute;

CONTOH :

Gambar awal tanpa css clip Property.




Sesudah menggunakan css clip Property.



CSS
clip: rect(50px, 450px, 250px, 200px);
position: absolute;


HTML
<div class="joclip">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" /></a></div>

Berdasarkan Contoh gambar diatas yang menggunakan css clip property,sebenarnya hampir mirip dengan fungsi autoreadmore yang bisa mengatur ukuran foto pada posting,tetapi bedanya dengan css ini,kita dapt mengatur sisi gambar yang mana yang akan dipotong,tetapi tergantung dari ukuran foto itu juga,pada contoh gambar diatas berukuran 608px x 346px yang berarti gambar yang akan dipotong harus ada batasnya juga,misalkan kita memasang foto dengan ukuran kecil 300px,tetapi nilai css clipnya kita beri yang besar lebih dari 300px,maka gambar tersebut tidak akan ada yang dipotong.


Oia,karena posisi objek diatas absolute,artinya posisi objek itu bebas dan dapat menutupi objek dibelakangnya,tetapi karena saya tahu posisi membuat objek ini posisinya bebas,maka saya menambahkan html diluar gambar ini dengan posisi relative.

Dan susunan htmlnya menjadi seperti dibawah ini.

HTML
<div class="joclipwarp">
<div class="joclip">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" /></a></div>
</div>


CSS joclip warp,sebagai pembatas ruang joclip,sehingga objek tidak akan keluar batas terhadap css ini.
.joclipwarp {
position: relative;
width: 636px;
min-height:400px;
height: auto;
border: 1px dashed #ddd;
}



nah,bagaimana kalau kita coba rubah nilainya menjadi :
clip: rect(200px, 0, 0, 400px);

Hasilnya:



Ta-da,hasilnya tidak ada~
karena itu saya katakan sebelumnya,jika ada salah 1 atau 2 nilai padding yang 0,maka gambar tidak muncul.

Ayo kita coba tes lagi menjadi clip: rect(40px, 260px, 150px, 80px);

dan hasilnya :



Nah,berdasarkan Hasil diatas,bisa saya gambarkan bagaimana bisa seperti itu,berikut hasil analisa saya :


Benarkah? mungkin hasil diatas bisa berbeda dengan refrensi web lain,tapi hasil diatas adalah hasil berdasarkan percobaan~

Untuk meyakinkan analisa saya,silakan anda menggunakan tools developer atau dengan klik kanan pada objek gambar diatas,lalu pilih inspect element pada html joclip3 dan css .joclip3 gambar tersebut,dan coba ubah nilainya,lalu perhatikan sisi mana yang akan mengecil atau memanjang.

Setelah saya coba mengganti" nilainya,ternyata memang benar,tetapi ada kala jika nilai padding pada bagian kiri lebih besar daripada padding kanan,maka gambar akan benar-benar hilang seperti pada contoh pertama tadi.begitu juga dengan padding atas dan bawah.

Hasil contoh :



yah,bisa saya simpulkan bahwa menggunakan css ini kita tidak bisa asal menebak berapa nilai padding pada css clip property,karena bisa saya gambar malah tidak muncul.dan saya rasa bagian padding yang sangat penting terletak pada bagian bawah dan kanan saja,mengapa?karena ketika saya mengganti nilainya menjadi seperti ini

clip: rect(0px, 640px, 360px, 0px);

Yang terjadi adalah gambar jadi full dan tidak terpotong,contoh bisa dilihat pada demo selanjutnya.


Nah,itu tadi baru dasarnya untuk pemotongan gambar,bagaimana kalau kita modifikasi dengan menambahkan hover efek?

hasilnya bisa dilihat dibawah ini:

CSS
.joclip1 {
position: absolute;
clip: rect(50px, 450px, 250px, 200px);
-webkit-transition: all 1s ease;
display: block;
}
.joclip1:hover {
clip: rect(0px, 640px, 360px, 0px);
}

HTML
<div class="joclip1">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8SDWPUihHo1DaWjbWUcTyIu8S6vYrb_XK9vOf6mduco6UKCElC5zQh8IGPnyvyJ8KuNshVBVuxVLrqEY8AAAYxUUw47rGG7daPZ5y1R8L6g4YiqnfBgrU0E_UsRu3j2WWzZgdQ-LeObH/s1600/tamako-market.jpg" /></a></div>

kenapa pada contoh diatas saat dihover,ukuran menjadi full? seperti yang saya katakan tadi diatas,dengan css clip yang saya letakan pada hover efek,serta css transition 1 sekon/detik agar mendapatkan timing animasi yang diinginkan:
clip: rect(0px, 640px, 360px, 0px);

Bagian padding bawah dan kanan paling berpengaruh untuk membuat gambar tidak terpotong atau membuat nilainya lebih besar daripada ukuran gambar.jika kita coba sebaliknya misal 640px, 0px, 0px, 360px ,maka gambar tidak akan muncul yang artinya masking menutupi seluruh gambar.



next level? saya rasa segini dulu hasil analisa saya,karena penjelasanya dapat lebih rumit lagi,sebenarnya karena posisi objek tersebut absolute,saya jadi dapat banyak ide untuk animasi hover efek menggunakan css clip property dengan menambahkan background warna,border,margin,posisi left,top,right,bottom dan dapat di gabung/kaleborasikan dengan fungsi css lainya dengan teknik css lebih lanjut,mungkin bisa menjadi photo gallery,thumbnail,slider dengan full hover effeck,dll. tapi jika anda coba mencari sumber informasi atau refrensi di google,sudah ada banyak yang mengembangkan trik ini,misal :

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

http://www.ibloomstudios.com/articles/misunderstood_css_clip

http://www.w3schools.com/cssref/pr_pos_clip.asp

http://1plusdesign.com/articles/css-clip-property-inline-image-sprites

Demikian penjelasan saya mengenai CSS Clip Property,mungkin agak bingung dengan penjelasan saya,tetapi anda dapat juga melihat tutorial dari web lain mengenai css ini.salah atau benar,tidak masalah,yang terpenting kita dapat belajar sedikit dan memahami cara kerja css ini clip ini,dan menerapkanya pada template" saya selanjutnya.ingin belajar juga? silakan anda praktekan sendiri di rumah~xD
Arigatou Gozaimasu~



, ,

Selasa, November 13, 2012

Banner Slider dengan CSS3,yaitu beberapa gambar/image banner yang dimasukan kedalam 1 slider.jadi fungsi'a sama saja dengan photo slider yang saya dapat dari website : iamceege.saya hanya mengedit CSS dan HTML'a,sehingga ukuranya menjadi pas 468px x 60px.contoh'a bisa kalian lihat sendiri pada blog saya,yui-indo atau gambar dibawah ini.


screenshot


Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.


CSS : diatas code ]]></b:skin>

HTML :letakan diantara kode html/didalam <body> dan </body>
(tergantung kamu mau diletakan dimana.)


HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>




a href='#' (ganti tanda pagar ddengan URL link yang dituju)

title='#' (ganti dengan nama link yang dituju)

'urlgambar' (ganti dengan Url site yang dituju)




CSS


#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}









Oia,untuk slidernya sendiri sudah saya atur agar kecepatan slide'a lebih lambat dari aslinya,yang diatur dengan css keyframe slide-animation.

dan juga menurut saya pemasangan banner ini terbatas,hanya4 buah.kenapa tidak bisa lebih?
sebenarnya bisa,pertama,kamu perhatikan CSS dibawah ini.





@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagai mana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.




Note:-diatas hanya contoh,karena slider'a ini crossbrowser antara mozzilla dan chrome,maka perhatikan awalan depan css moz dan webkit,nilai'a harus sama.





Untuk pengaturan posisi slidernya,menggunakan margin.

margin:0px 0px 0px 0px;

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}



Setting diatas masih default,kamu tinggal mengatur nilai margin left,top,right dan bottomnya.





yahh,sebenarnya trik ini awal"a cuma iseng" untuk blog saya sendiri,tapi karena saya rasa banyak dibutuhkan juga dan bermanfaat untuk mengurangi pemakaian tempat banner,jadi saya share deh :)

oia saya ingatkan sebelumnya,sebelum menggunakan trik banner ini,ada baiknya membackup template agar tidak terjadi sesuatu yang tidak diinginkan,dan selalu ingat tidak menggunakan CSS secara berlebihan agar tidak memberatkan blog kamu.

semoga bermanfaat,arigatou gozaimasu minna~
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.