03/22/16 | Mys2010 on Codepen

HomeArchives for 03/22/16

Text Shadow dan Tooltip

Memasang kode Text Shadow dan Tooltip
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

body {background-image: url(http://orig05.deviantart.net/e28f/f/2012/057/7/b/dark_wood_texture_by_drsela-d4r0ger.jpg);color:red;height:100%;overflow:hidden;}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden}

.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}

.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
  width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWFzFsPjPC4nesKOSPCUWZJPVVr1NJqzf-rHuH6Ev13x0LQXDoALj_nQbAzR9BBNaeJ4YVpei8Xb99wPFvU50FGaliJOmCgn0N8jun3vwqxRXc3IO1YK-M4UnBZu5CK_rsJB_eiAKD1k/s1600-r/Mari-belajar-mys2010.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}

.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}

.small {font-size:14px; display:block; margin-top:10px; }
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080}

.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}

/*shadow*/
p {
  margin: 55px auto 0 auto;
  font-size:150px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px rgba(0,0,0,1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 3px 8px rgba(255,255,255,.2);

}

.illuminated
{
    color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: Aqua;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} /* GRADIEND end */

<p class="illuminated" id="lbl">
Myscript2010</p>
<div id="tooltip-image">
<div id="tooltip-image">
<div class="container">
<a class="buttonLogo" 
expr:href="data:blog.homepageUrl"></a>
<div class="name">
Myscript2010
<span class="small">Cibeber Cimahi</span> 
</div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLd904FR7TGg2PjSfTLxV-lG75Ijksy73gOgv4AZQiewbIua8_HEjr_ru1VmALqyqHZqgCvY9i7sp8kCkidIGQQXApUJDWN5bx7hGaXT__iV3if5riTOdo2bm6HHeRQ2eS3A6TKaRSm4/s1600-r/Mys2010.jpg" alt="Sule" class="pic">
</div>
<div class="photo">
<img src="https://sites.google.com/site/zudantaufiq/logo-bng-glass.png" alt="Mys2010" class="pic">
</div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi"> 
Mari Belajar</font>
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="https://sites.google.com/site/fileblogfor/code/Logo-Hover-Mys2010.css"title="Myscript2010s"><b><font size="2" color="aqua"face="arial">GET IN THE CODE</a></b>
</div>
</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<script>
function flicker()
{
  $("#lbl").removeClass("illuminated");
  setTimeout(function()
  {
    $("#lbl").addClass("illuminated");
  },50);
}

function triggerFlicker()
{
  //var times = Math.floor(Math.random()*4);
  //for(var i=0; i<times; i++)
  //{
    setTimeout(flicker,/*i**/100);
  //}
  setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);
</script>

Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan

Sources by. All Sources
Edited by. Mys2010 on Codepen

DEMOSHOW

Category: Text Shadow dan Tooltip

Slide Show Auto CSS3 A3

Memasang Slide Show auto CSS3 A 3 menggunakan animation linear infinite yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya Login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode ]]></b:skin>
dan klik simpan selesai

.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 10px; left: 0px; width: 100%; text-align: right; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 160px; padding: 0 30px; line-height: 120px; color: rgba(169,3,41, 0.8); } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBN7t_90gNwTiPdyd70-UCTaBbjUK2Up8qmDFlBFL2agw_8UD9JZZAzobAajO15r-blV1PKyuzSAFJjkf03qyNo7kxXCWz5AGGdLtBVdrcgeuzgvFJiDuset3vtEDbLYUMmWmnDOdM7-7/s1600/Sunset+Wallpapers.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRDZe72L80fiagNKl__VXX7MAa6Fsm5tRibOTu8_iRF1U8zi6L4PoPCWlFGylKbcCONiOL6Pzc2zwbDee8dMcCp_FSDvQigpSjXOHC1yeuG-fdi1IEVeLaClI93UvBOaEk9PUC4iRIrtD/s1600/Sunset+Wallpapers+%25286%2529.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUAU2yt3PYtgEd7fJbQpbGM1h_AW7gvwLIUaGXmFknSY2aBfutRmYbplFT-BCnB5seVlEDEpn_zImhmYFPPQK_mjJLPfQVwPgdaX8L42KE6X3Z8ck9NjzZex8VX73nTsQ_QYioiHPN5-l/s1600-r/Mys2010b.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzrvXaRTDlyZMJeG5E_8DEfaxeHXhdoVx2ZohzhMnmUH0E0ExDQi8J6qynN_xZ_c70cXklhrMLebojvZX5uzjQLq3-0-H2ZqzsHu7oLDlLCcK6-2rl_o18IzGh4kimG3CC74OO9EvMYlU/s1600-r/Landscapes-3-Mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPc4FY2rhLuSL4DSdULcyqcUA8Mw1PQdRgJlJm9KZbATNeAnimC8UQ5uFkYsCRFYpQrbZbCJ4m5GT-F41DLI8COwoKOidatH64QKhYH5yrx6q-QcvRXe9XOUhzcLU-4bdZwkZ2GnbMlOO/s1600-r/Mys2010a.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfGnPjavOHHryXplUNKlOKD5SeMpeF1jZNs0VJudZVOLWNPgh4kCFLgILGOy30Kt9Ye-VQRhHBbjSmD9iAllFVVPfLYIhysHYDfaKiE_rmTz-5FFuAFlLh3p-IgtZIX8GLBlBDubABLQ/s1600-r/Landscapes-5-Mys2010.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -webkit-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -moz-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -o-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; -ms-transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateX(200px); } 8% { opacity: 1; -webkit-transform: translateX(0px); } 17% { opacity: 1; -webkit-transform: translateX(0px); } 19% { opacity: 0; -webkit-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateX(200px); } 8% { opacity: 1; -moz-transform: translateX(0px); } 17% { opacity: 1; -moz-transform: translateX(0px); } 19% { opacity: 0; -moz-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateX(200px); } 8% { opacity: 1; -o-transform: translateX(0px); } 17% { opacity: 1; -o-transform: translateX(0px); } 19% { opacity: 0; -o-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateX(200px); } 8% { opacity: 1; -ms-transform: translateX(0px); } 17% { opacity: 1; -ms-transform: translateX(0px); } 19% { opacity: 0; -ms-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% {      opacity: 0;      -ms-transform: translateX(200px); } 8% {      opacity: 1;      -ms-transform: translateX(0px); } 17% {      opacity: 1;      -ms-transform: translateX(0px); } 19% {      opacity: 0;      -ms-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% {      opacity: 0;      transform: translateX(200px); } 8% {      opacity: 1;      transform: translateX(0px); } 17% {      opacity: 1;      transform: translateX(0px); } 19% {      opacity: 0;      transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-Slide li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-Slide li div h3 { font-size: 60px } } @media screen and (max-width: 600px) { .my-Slide li div h3 { font-size: 50px } }

Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h3>Myscript2010 </h3> </div> </li> <li><span>Gambar 02</span><div> <h3>Belajar Webblog </h3> </div> </li> <li><span>Gambar 03</span><div> <h3>Full Screen </h3> </div> </li> <li><span>Gambar 04</span><div> <h3>Desainer </h3> </div> </li> <li><span>Gambar 05</span><div> <h3>Copyright:2015 </h3> </div> </li> <li><span>Gambar 06</span><div> <h3>Cibeber Cimahi </h3> </div> </li> </ul>

Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template

Sumber by. Tympanus
Edited by. Myscript2010

DEMO SHOW

Category: Slide Show Auto CSS3 A2

Slide Show Auto CSS3 A2

Memasang Slide Show Auto CSS 3 A 2
dengan efek zoom teks yang menampilkan gambar di webblog
secara otomatis tampil bergantian dengan efek zoom teks. Berikut cara penerapannya :

Login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> dan klik simpan selesai

.my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; color: rgba(169,3,41, 0.8); } .my-slideshow li:nth-child(1) span { background-image: url(https://wallpaperscraft.com/image/randis_albion_art_girl_sword_feathers_bird_94348_1920x1080.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://wallpaperscraft.com/image/dragon_fantasy_art_feathers_98978_1920x1080.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://wallpaperscraft.com/image/dragon_cave_light_art_94937_1920x1080.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://wallpaperscraft.com/image/art_nick_deligaris_dragon_rider_mountain_castle_tower_94138_1920x1080.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://wallpaperscraft.com/image/unicorn_wood_stars_autumn_bird_4771_1920x1200.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://wallpaperscraft.com/image/unicorn_fight_battle_dragon_3312_1920x1200.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1); } 25% { opacity: 0; -webkit-transform: scale(1.1); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1); } 25% { opacity: 0; -moz-transform: scale(1.1); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1); } 25% { opacity: 0; -o-transform: scale(1.1); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1); } 25% { opacity: 0; -ms-transform: scale(1.1); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1); } 25% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateY(200px); } 8% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateY(200px); } 8% { opacity: 1; -moz-transform: translateY(0px); } 17% { opacity: 1; -moz-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -moz-transform: scale(10); } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateY(200px); } 8% { opacity: 1; -o-transform: translateY(0px); } 17% { opacity: 1; -o-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -o-transform: scale(10); } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateY(200px); } 8% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0; transform: translateY(200px); } 8% { opacity: 1; transform: translateY(0px); } 17% { opacity: 1; transform: scale(1); } 19% { opacity: 0 } 25% { opacity: 0; transform: scale(10); } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 100px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 50px } }

Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h3>Myscript2010 </h3> </div> </li> <li><span>Gambar 02</span><div> <h3>Belajar Webblog </h3> </div> </li> <li><span>Gambar 03</span><div> <h3>Full Screen </h3> </div> </li> <li><span>Gambar 04</span><div> <h3>Desainer </h3> </div> </li> <li><span>Gambar 05</span><div> <h3>Copyright:2015 </h3> </div> </li> <li><span>Gambar 06</span><div> <h3>Cibeber Cimahi </h3> </div> </li> </ul>

Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template

Sumber by. Tympanus
Edited by. Myscript2010

DEMO SHOW

Category: Slide Show Auto CSS3 A2

Slide Show auto CSS3 A1

Memasang Slide Show auto CSS 3 A 1 menggunakan kode CSS dan HTML yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya : . Login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> dan klik simpan selesai

.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuo0b_MA0K37HZUHNhH4OA8g9bpzzxJeiEFcptmlFSWbQpB00f7nVE53fFJnIkDUSHzMU4rjZrIQooVNftqkw2hPS-4kkyp2pPuMzrYwYdvnyejT-9NrmXm0KwJ8gjvGTGnBEVP5h2lIcX/s1600-r/spMys2010a1.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKVncapa1cTzVzVP4KeqV2tf_8nW2EYSrA8rJxaEImhNhJHWEK9MzoNIDMlzzXzRJbk0TDfclaI1I3M57NALGF_zVvG-cc7ab1DhJQwUWQwNoFP1fqO1mrZSP1XICcPyBsNmcOxwuJZ3I/s1600-r/spMys2010s3.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KTHiFAozIQehEIEY0UFC-EJ1ik_i2IsIqDPcxYHhf_ZFqpLqBCN2Y4wkPR6ir-WYlHfjZKs3DDpy9KcpCaX0fXGSPaOMI04MpZOcTXv1HWfLl7oxR7G5n1vd9xoDtAWzozWplpMd2ej0/s1600-r/spMys2010s2.jpg ); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ6RFG8jWGzAwk8TL3I3NFPozwl3mNow_NtBeGZkYyL2akTx0aNoqmOChUifWs2F8yxrSkq-ib9FMd5y5wUa62yp9ZAeiIYRys6tDhyIJ5hyRzyvtyC2B-6IWzDiCPcXCoxvH6g3qS9uM/s1600-r/01mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhBZzIHczVoeiCqeIUuGsk08EWUU8UHAmlA5wqEkkwtCCp_Ly_KFo8JlCL_p9WYRncfsFS5OwoVbHU9Q-2xRQRB9i0Y0qCgPs9lHV7bxQ0o3aLGeNQP2o3YUYVDoRJVnjcPj7lXyU38fG/s1600-r/03mys2010.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPuJ8q7CnqVUULvruU1k-ty6ncCLUKTR0lB5Yx5nj4oIbinmOoiu7SYLTX2hm8lie19Ma8dO2g9b2Q1Q6WzLZLU9isB-qFVX_nPqR4XRV_4ficCnNMxg7gN1sLPh3xJ72egoOpoafTr0U/s1600-r/sp.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 80px } }

Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h4> Your Text </h4> </div> </li> <li><span>Gambar 02</span><div> <h4> Your Text </h4> </div> </li> <li><span>Gambar 03</span><div> <h4> Your Text </h4> </div> </li> <li><span>Gambar 04</span><div> <h4> Your Text </h4> </div> </li> <li><span>Gambar 05</span><div> <h4> Your Text </h4> </div> </li> <li><span>Gambar 06</span><div> <h4> </h4> </div> </li> </ul>

Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template

Sumber by. Tympanus
Edited by. Myscript2010

DEMO SHOW

Category: Slide Show auto CSS 3

POPULAR

Frame Everyday Illusion

Exiting Hyperspace Starwars Pure CSS

keyframes Animations

Audio Player Mp3 Modification

Scroll Back to top

Audio Player Mp3

Contact Us

HTML5 Audio Player

Dark Forest with audio

Blog Archive

► 2017 (58)

► December (1)

► Dec 25 (1)

► November (2)

► Nov 19 (1)

► Nov 09 (1)

► October (1)

► Oct 27 (1)

► September (4)

► Sep 23 (4)

► August (2)

► Aug 30 (1)

► Aug 11 (1)

► July (3)

► Jul 30 (1)

► Jul 29 (1)

► Jul 19 (1)

► June (5)

► Jun 27 (1)

► Jun 24 (1)

► Jun 22 (1)

► Jun 11 (1)

► Jun 10 (1)

► May (8)

► May 27 (1)

► May 23 (2)

► May 19 (1)

► May 15 (1)

► May 14 (1)

► May 11 (1)

► May 08 (1)

► April (17)

► Apr 22 (1)

► Apr 21 (1)

► Apr 16 (1)

► Apr 14 (1)

► Apr 13 (1)

► Apr 12 (1)

► Apr 09 (3)

► Apr 07 (2)

► Apr 05 (5)

► Apr 02 (1)

► March (1)

► Mar 19 (1)

► February (4)

► Feb 26 (1)

► Feb 18 (1)

► Feb 10 (1)

► Feb 05 (1)

► January (10)

► Jan 28 (1)

► Jan 20 (2)

► Jan 07 (3)

► Jan 06 (2)

► Jan 05 (1)

► Jan 04 (1)

▼ 2016 (193)

► December (22)

► Dec 31 (3)

► Dec 29 (1)

► Dec 28 (2)

► Dec 25 (1)

► Dec 22 (1)

► Dec 19 (1)

► Dec 16 (2)

► Dec 11 (1)

► Dec 10 (3)

► Dec 07 (1)

► Dec 05 (1)

► Dec 04 (1)

► Dec 03 (3)

► Dec 02 (1)

► November (2)

► Nov 28 (1)

► Nov 26 (1)

► September (15)

► Sep 24 (1)

► Sep 17 (1)

► Sep 11 (5)

► Sep 10 (1)

► Sep 06 (2)

► Sep 05 (2)

► Sep 03 (1)

► Sep 02 (1)

► Sep 01 (1)

► August (20)

► Aug 27 (3)

► Aug 26 (1)

► Aug 25 (1)

► Aug 23 (1)

► Aug 22 (2)

► Aug 15 (1)

► Aug 14 (2)

► Aug 13 (1)

► Aug 07 (1)

► Aug 06 (3)

► Aug 05 (1)

► Aug 03 (2)

► Aug 02 (1)

► July (24)

► Jul 29 (1)

► Jul 28 (2)

► Jul 26 (1)

► Jul 25 (2)

► Jul 22 (3)

► Jul 20 (1)

► Jul 19 (1)

► Jul 18 (1)

► Jul 17 (3)

► Jul 16 (1)

► Jul 12 (1)

► Jul 09 (1)

► Jul 07 (1)

► Jul 06 (2)

► Jul 04 (2)

► Jul 01 (1)

► June (8)

► Jun 29 (1)

► Jun 19 (1)

► Jun 18 (2)

► Jun 07 (1)

► Jun 06 (1)

► Jun 05 (1)

► Jun 04 (1)

► May (19)

► May 31 (2)

► May 30 (1)

► May 28 (1)

► May 24 (5)

► May 19 (1)

► May 16 (1)

► May 14 (2)

► May 11 (1)

► May 07 (1)

► May 06 (2)

► May 04 (1)

► May 01 (1)

► April (27)

► Apr 25 (1)

► Apr 24 (1)

► Apr 23 (3)

► Apr 22 (1)

► Apr 20 (1)

► Apr 19 (1)

► Apr 17 (1)

► Apr 16 (2)

► Apr 15 (3)

► Apr 14 (1)

► Apr 09 (2)

► Apr 07 (2)

► Apr 06 (3)

► Apr 04 (1)

► Apr 02 (1)

► Apr 01 (3)

▼ March (15)

► Mar 31 (1)

► Mar 30 (1)

► Mar 24 (1)

▼ Mar 22 (4)

Text Shadow dan Tooltip

Slide Show Auto CSS3 A3

Slide Show Auto CSS3 A2

Slide Show auto CSS3 A1

► Mar 10 (1)

► Mar 08 (1)

► Mar 06 (1)

► Mar 05 (1)

► Mar 03 (3)

► Mar 02 (1)

► February (22)

► Feb 28 (1)

► Feb 26 (1)

► Feb 23 (2)

► Feb 19 (1)

► Feb 18 (1)

► Feb 16 (2)

► Feb 15 (2)

► Feb 14 (3)

► Feb 13 (2)

► Feb 11 (1)

► Feb 07 (3)

► Feb 06 (1)

► Feb 04 (1)

► Feb 03 (1)

► January (19)

► Jan 30 (1)

► Jan 29 (2)

► Jan 28 (2)

► Jan 27 (1)

► Jan 25 (1)

► Jan 24 (4)

► Jan 17 (1)

► Jan 16 (3)

► Jan 15 (4)