Implementasi dasar API Google Custom Search untuk menampilkan hasil pencarian pada halaman yang sama tanpa harus memuat ulang halaman, dengan HTML formulir yang dibuat secara terpisah dari hasil penelusuran. Selengkapnya bisa dilihat pada kode sumber.
Referensi: Custom Search Element Control API · Google Custom Search
Labels: Eksperimen, JavaScript, Lanjutan, Tautan
Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password Overlay Test</title>
<style>
.body {
padding:10% 0;
text-align:center;
}
.overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:black;
color:white;
padding:10% 0;
text-align:center;
}
</style>
</head>
<body>
<div id="protect-body" class="body">Content goes here…</div>
<div id="protect-overlay" class="overlay">
<form action="#">
<input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
</form>
</div>
<script>
// https://developer.mozilla.org/En/DOM/Window.btoa
// https://developer.mozilla.org/en/DOM/window.atob
// to get the obfuscated text, use `console.log(btoa('your text goes here'))`
// `aSBsb3ZlIHlvdQ==` => `i love you`
(function() {
var o = document.getElementById('protect-overlay');
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
o.style.display = "none"; // passed!
} else {
alert('Wrong password!');
}
return false;
};
})();
</script>
</body>
</html>Kata kunci: i love you
Labels: Eksperimen, JavaScript, Potongan
<form class="fake-link" action="//example.org" method="get" target="_blank">
<input name="aff" type="hidden" value="1234567">
<button type="submit">affiliate link</button>
</form>.fake-link,
.fake-link button {
margin:0;
padding:0;
width:auto;
height:auto;
background:none;
border:none;
font:inherit;
text-transform:none;
display:inline;
}
.fake-link button {
color:blue;
cursor:pointer;
}
.fake-link button::-moz-focus-inner {
margin:0;
padding:0;
border:none;
outline:none;
}
.fake-link button:focus,
.fake-link button:hover {text-decoration:underline}
.fake-link button:active {color:red}Labels: Eksperimen, Masalah, Potongan
Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan tetapi mengubah tipe kursor pada scrollbar tidak mungkin bisa dilakukan karena scrollbar tidak termasuk ke dalam elemen HTML (pengecualian jika kita menggunakan manipulasi seperti JavaScript Custom Scrollbar, karena setiap item penggulung dibuat menggunakan elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak bisa dimanipulasi:
::-webkit-scrollbar-thumb {
cursor:pointer; /* tidak bekerja! :( */
}Satu cara sederhana yang bisa kita lakukan untuk mengubah tipe kursor pada scrollbar adalah dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, kemudian mengembalikan tipe kursor ke keadaan semula pada bagian dalam. Di sini kita membutuhkan elemen pembungkus ekstra:
<div class="scrollable-area">
<div class="scrollable-area-content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>.scrollable-area {cursor:pointer}
.scrollable-area-content {cursor:auto}Contoh lain, mengubah tipe kursor menjadi n-resize pada scrollbar vertikal dengan tampilan kustom (buka halaman demo menggunakan peramban Google Chrome atau Safari):
Labels: CSS, Eksperimen
.chat-box {
font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
color:#333;
width:200px; /* Chatbox width */
border:1px solid #344150;
border-bottom:none;
background-color:white;
position:fixed;
right:10px;
bottom:0;
z-index:9999;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.chat-box > input[type="checkbox"] {
display:block;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:26px;
z-index:4;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.chat-box > label {
display:block;
height:24px;
line-height:24px;
background-color:#344150;
color:white;
font-weight:bold;
padding:0 1em 1px;
}
.chat-box > label:before {content:attr(data-collapsed)}
.chat-box .chat-box-content {
/* padding:10px; */
display:none;
}
/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}
/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}<div class="chat-box">
<input type="checkbox">
<label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
<div class="chat-box-content">
<!-- Kode buku tamu dsb... -->
</div>
</div>Labels: CSS, Eksperimen, Potongan
Eksperimen membuat infinite scroll dengan JSON Blogger. Sebuah sistem yang akan memperbaharui jumlah item posting setiap kali pengguna mencapai batas akhir layar ketika pengguna sedang menggulung halaman. Metode ini sebenarnya sudah pernah Saya tuliskan di sini. Saya mengganti kondisional batas akhir yang tadinya berupa perbandingan antara tinggi kontainer dengan batas akhir gulungan area seperti ini:
container.onscroll = function() {
if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) {
myFunction();
}
};Menjadi berdasarkan perbandingan antara tinggi layar dengan batas akhir gulungan layar seperti ini:
window.onscroll = function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1 || navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
if (document.documentElement.scrollHeight == (document.body.scrollTop + document.documentElement.clientHeight)) {
myFunction();
}
} else {
if (document.documentElement.scrollHeight == (document.documentElement.scrollTop + document.documentElement.clientHeight)) {
myFunction();
}
}
};Selengkapnya mengenai potongan kode untuk mengecek batas akhir gulungan layar bisa Anda baca di sini.
Silakan dipelajari dan dimodifikasi sesuka hati Anda dengan mengikuti persetujuan yang Saya tuliskan di dalam kode sumbernya. Eksperimen ini akan diperbaharui jika memang ada yang perlu diperbaharui. Begitu.
Labels: Blogger, Eksperimen, JavaScript, JSON
Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan seperti pada grup Google.
Elemen ini bisa Anda gunakan untuk memberikan sugesti atau pilihan kata kunci secara tidak langsung tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna agar mereka menuliskan kata kunci seperti ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada menu drop-down, maka para pengguna akan segera mengerti gambaran formulir tersebut saat mereka menampilkan menu:
<div class="input-text-wrap">
<form action="//your_site_name.com/search" method="get">
<input class="text-input" type="text" name="q" autocomplete="off">
<span class="down-arrow"></span>
<input class="submit-button" type="submit" value="Search">
<ul>
<li>Wallpaper 3D</li>
<li>Anime</li>
<li>Manga</li>
<li>Comics List</li>
<li>Characters</li>
<li>Animepedia</li>
</ul>
</form>
</div>/*
@credit: http://www.dte.web.id, https://plus.google.com/108949996304093815163/about
font-family: Segoe,"Segoe UI",Arial,Sans-Serif
font-size: 12px
line-height: 30px
border-color: #8E8E74, black
color: #333, #666, black
background-color: white, #FFEAD3, #EDD8BF, #E0CBB2
*/
/* outer */
.input-text-wrap {
text-align:left;
display:inline-block;
background-color:white;
border:1px solid #8E8E74;
height:30px;
position:relative;
font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
-webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}
/* focused `.input-text-wrap` */
.input-text-wrap.focused {
-webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
border-color:black;
}
/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
font:inherit;
color:inherit;
vertical-align:top;
}
.input-text-wrap input {display:inline-block}
.input-text-wrap .text-input,
.input-text-wrap .submit-button {
height:30px;
line-height:30px;
font-weight:bold;
margin:0 20px 0 5px;
outline:none;
}
/* the text input */
.input-text-wrap .text-input {
width:160px; /* set the text input width here */
}
/* the submit button */
.input-text-wrap .submit-button {
width:70px;
padding:0 0 2px;
margin:0 0;
background-color:#FFEAD3;
border-left:1px solid #8E8E74;
color:#666;
cursor:pointer;
-webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
-moz-box-shadow:0 0 2px rgba(0,0,0,.4);
box-shadow:0 0 2px rgba(0,0,0,.4);
position:relative;
}
.input-text-wrap .submit-button:hover {
background-color:#EDD8BF;
color:black;
}
/* the drop-down menu */
.input-text-wrap ul {
position:absolute;
top:100%;
right:-1px;
left:-1px;
z-index:99;
background-color:white;
border:1px solid black;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
display:none;
}
/* drop-down menu item */
.input-text-wrap li {
line-height:26px;
padding:0 10px;
cursor:pointer;
}
.input-text-wrap li:hover {
background-color:#E0CBB2;
color:black;
}
/* the down arrow before the submit button */
.input-text-wrap .down-arrow {
display:block;
width:20px;
height:30px;
position:absolute;
top:0;
right:70px;
cursor:pointer;
}
.input-text-wrap .down-arrow:hover,
.input-text-wrap .down-arrow.active {
background-color:white;
-webkit-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
box-shadow:-1px 1px 2px rgba(0,0,0,.4);
z-index:2;
}
.input-text-wrap .down-arrow:active,
.input-text-wrap .down-arrow.active {
-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
box-shadow:-1px 1px 1px rgba(0,0,0,.2);
}
/* create the down-arrow triangle with pseudo-element and border hack */
.input-text-wrap .down-arrow:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-top-color:#666;
position:absolute;
top:14px;
left:50%;
margin-left:-4px;
}(function($) {
var $inputWrap = $('.input-text-wrap'),
$arrow = $inputWrap.find('.down-arrow');
// Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
$(document).on("click", function() {
$inputWrap.find('ul').hide();
$arrow.removeClass('active');
});
$arrow.on("click", function(e) {
// Remove all the `focused` class and hide all visible drop-down menu
$inputWrap.removeClass('focused').find('ul:visible').hide();
// Remove al the `active` down arrow
$arrow.removeClass('active');
// Toggle the `.down-arrow` active class
$(this).toggleClass('active')
// Add a `focused` class to the `.input-text-wrap`
.closest('.input-text-wrap').addClass('focused')
// Show or hide the dropdown `ul`
.find('ul').toggle()
// When we click the `li`...
.find('li').on("click", function() {
// Set the input text value to the clicked `li`'s text
$(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
// and trigger the focus event to it
.trigger("focus");
// After that, hide the visible dropdown menu
$(this).parent().hide();
});
// Prevent event bubbling!
e.stopPropagation();
});
// When the text input focused...
$inputWrap.find('.text-input').on("focus", function() {
// Add a `focused` class to the `.input-text-wrap`
$(this).closest('.input-text-wrap').addClass('focused');
// When the text input loses the focus...
}).on("blur", function(e) {
// Remove the `focused` class from `.input-text-wrap`
$(this).closest('.input-text-wrap').removeClass('focused');
});
})(jQuery);Labels: Eksperimen, HTML, JavaScript, jQuery
Peramban Google Chrome minimalis yang terbuat dari CSS3:
<div class="chrome-window">
<h1>Window Title</h1>
<div class="right-buttons">
<a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
<a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
<a title="Close" class="close-btn" href="#close">Close</a>
</div>
<div class="window-header">
<input type="text" onfocus="this.select();" spellcheck="false" value="chrome://chrome">
</div>
<div class="window-inner">
Contents...
</div>
</div>/* Window */
.chrome-window {
background-color:#3B68B5;
background-image:-webkit-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
background-image:-moz-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
background-image:-ms-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
background-image:-o-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
background-image:linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
width:600px;
border:1px solid;
border-color:#595959 #444 #444 #494949;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
position:absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-150px;
overflow:hidden;
font:normal normal 12px Segoe,"Segoe UI",Arial,Sans-Serif;
color:#222;
z-index:999;
}
/* Window title */
.chrome-window h1 {
font:inherit;
font-weight:bold;
color:white;
margin:0 0;
padding:4px 0 4px 10px;
}
/* Window address bar */
.window-header {
margin:0 2px;
padding:1px 0;
border:1px solid #2E518C;
border-bottom-color:#AAAAAB;
background-color:white;
position:relative;
}
.window-header:before {
content:"";
display:block;
width:10px;
height:13px;
background-color:#eee;
border:1px solid #949495;
border-bottom-color:#838384;
-webkit-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
-moz-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
position:absolute;
top:6px;
left:8px;
}
.window-header input {
width:592px;
display:block;
margin:0 auto;
padding:4px 4px 5px 24px;
font:inherit;
color:inherit;
border:1px solid #B4BCC7;
outline:none;
background-color:white;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* Window body */
.window-inner {
height:200px;
border:1px solid #2E518C;
border-top:none;
margin:0 2px 2px;
background-color:white;
-webkit-box-shadow:inset 0 0 0 1px #DFDFDF;
-moz-box-shadow:inset 0 0 0 1px #DFDFDF;
box-shadow:inset 0 0 0 1px #DFDFDF;
padding:4px;
word-wrap:break-word;
overflow:auto;
cursor:text;
}
/* Buttons */
.right-buttons {
position:absolute;
top:-1px;
right:4px;
font:0/0 a;
text-shadow:none;
}
.right-buttons a {
display:block;
float:left;
margin:0 0 0 -1px;
width:26px;
height:16px;
border:1px solid #345181;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
text-decoration:none;
position:relative;
cursor:default;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
.right-buttons a:after {
content:"";
display:block;
position:absolute;
}
.right-buttons .minimize-btn {
-webkit-border-radius:0 0 0 3px;
-moz-border-radius:0 0 0 3px;
border-radius:0 0 0 3px;
}
.right-buttons .minimize-btn:after {
right:7px;
bottom:4px;
left:7px;
height:3px;
background-color:#BCCFEF;
border:1px solid #233656;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.right-buttons .maximize-btn:after {
top:4px;
right:8px;
bottom:4px;
left:8px;
border:2px solid #BCCFEF;
-webkit-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
-moz-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.right-buttons .close-btn {
-webkit-border-radius:0 0 3px 0;
-moz-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}
.right-buttons .close-btn {
width:42px;
}
.right-buttons .close-btn:after {
content:"x";
font:normal normal 14px/13px Verdana,Arial,Sans-Serif;
color:#BCCFEF;
text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
}
.right-buttons a:hover {
background-color:#8BAEE4;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
}
.right-buttons a.close-btn:hover {
background-color:#DA4D4B;
}
.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}Labels: CSS, Eksperimen
Eksperimen membuat slideshow berdasarkan framework yang Saya buat di sini, untuk menciptakan slideshow dengan efek seperti Nivo Slider. Slideshow ini menggunakan konsep yang mirip dengan Nivo Slider, yaitu mengambil URL gambar untuk dijadikan sebagai latar slice. Efek bergelombang timbul dari .delay() animasi yang Saya set dengan nilai berurutan pada setiap slice:
<figure id="slider">
<div class="container">
<img src="image/slide-1.jpg" alt="Deskripsi slide 1">
<img src="image/slide-2.jpg" alt="Deskripsi slide 2">
<img src="image/slide-3.jpg" alt="Deskripsi slide 3">
<img src="image/slide-4.jpg" alt="Deskripsi slide 4">
</div>
<figcaption></figcaption>
<nav id="slider-nav"></nav>
</figure>/* Slider */
#slider {
display:block;
border:4px solid #000;
width:400px; /* slider width */
height:250px; /* slider height */
margin:0 auto;
background:white url('img/loading.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
/* For caption */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* hide the caption with this way :) */
left:0;
z-index:99;
}
#slider img {
display:block;
margin:0 0;
width:400px; /* slide width */
height:250px; /* slide height */
position:absolute;
top:0;
left:0;
}
/* Navigation */
#slider-nav {
display:block;
position:absolute;
top:10px;
right:10px;
margin:0 0;
padding:0 0;
z-index:99;
}
#slider-nav a {
display:block;
float:left;
width:10px;
height:10px;
background-color:#111;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
#slider-nav .active {
background-color:#2589B4;
}
/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}/**
* NIVO SLIDER LIKE EFFECT SLIDESHOW BY TAUFIK NURROHMAN
* URL: https://plus.google.com/108949996304093815163/about
* Based on this slideshow framework: http://www.dte.web.id/2012/09/simple-useful-jquery-slideshow.html
*/
(function($) {
// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
var config = {
slices: 10, // number of slices
speed: 600, // slideshow speed
easing: null, // easing type
interval: 3000 // slideshow interval
};
// ==================================================================================
// Some variables...
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
autoSlide = null,
$first = $slide.first();
// Auto append navigation item based on the slides length
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
// Set the slices size
var slice_w = $slider.width() / config.slices,
slice_h = $slider.height();
// Build the slices
for (var i = 0; i < config.slices; i++) {
$('<div class="slice" />').css({
'position':'absolute',
'width':slice_w,
'height':slice_h,
'left':slice_w*i,
'z-index':4,
'background-color':'transparent',
'background-repeat':'no-repeat',
'background-position':'-' + slice_w*i + 'px 0'
}).appendTo($slider);
}
// Catch the slices, and also set the different position between odd and even slices
var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
$sliceEven = $slider.find('.slice:even').css('top',0);
// Click to switch!
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index(),
text = $slide.eq(pos).attr('alt'),
bg = $slide.eq(pos).attr('src');
$slide.hide().eq(pos).trigger("load").show();
// Do the caption and slices animation here!
$caption.stop().animate({bottom:'-100px'}, config.speed/2);
$sliceOdd.each(function(i) {
$(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'bottom':0,
'opacity':1
});
});
});
$sliceEven.each(function(i) {
$(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'top':0,
'opacity':1
});
});
}).promise().done(function() {
$caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, config.interval);
return false;
}).first().addClass('active');
// Init slideshow
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);
// Navigation clicker
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
}
// Run the slideshow on page load...
$(window).on("load", function() {
// remove the 'loading background-image' of '#slider'
$slider.css('background-image','none');
// Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
$container.show();
$caption.show();
$nav.css('opacity',1);
// Another init slideshow
$slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');
// Then, start the interval...
autoSlide = setInterval(slideShow, config.interval);
});
})(jQuery);| Opsi | Keterangan |
|---|---|
| slices | Jumlah potingan slide. |
| speed | Kecepatan slideshow. |
| easing | Tipe easing animasi. |
| interval | Interval slideshow. |
Labels: Eksperimen, Gambar, JavaScript, jQuery, Lanjutan, Potongan
Sebuah menu media sosial yang terbuat dari (hampir) murni CSS3. Di sini Saya menggunakan kombinasi CSS3 Gradien dan Box Shadow untuk menciptakan efek realistis. Pada dasarnya, tombol panah di sisi kanan adalah pseudo elemen dari elemen <label> yang kemudian Saya tutupi dengan elemen checkbox.
Setelah itu, Saya menyembunyikan wujudnya dengan CSS transparasi.
Jadi, ketika Anda mengeklik tombol drop down di bagian kanan, maka yang terjadi sebenarnya adalah Anda sedang mengeklik elemen checkbox transparan yang berada di atas elemen palsu (pseudo elemen) dari <label>:
<div class="glossy-selectbox">
<input type="checkbox">
<label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
<ul>
<li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
<li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="social-google" href="#" target="_blank">Google+</a></li>
</ul>
</div>/*
* Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing
* Author: Taufik Nurrohman
* URL: https://plus.google.com/108949996304093815163/about
*/
.glossy-selectbox {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
/* CSS3 Browser */
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
/* IE only */
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.glossy-selectbox:before,
.glossy-selectbox:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
right:5px;
z-index:4;
}
.glossy-selectbox:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.glossy-selectbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.glossy-selectbox label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.glossy-selectbox label:before {
content:attr(data-default);
}
.glossy-selectbox label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:hover + label {
color:white;
}
.glossy-selectbox input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.glossy-selectbox ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.glossy-selectbox li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.glossy-selectbox a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-right:1px solid #111;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.glossy-selectbox a:nth-child(even) {
border-right-width:0;
}
.glossy-selectbox a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.glossy-selectbox a:hover:before {
background-position:50% 100%;
}
.glossy-selectbox .social-rss:before {background-image:url('img/social_rss.png');}
.glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');}
.glossy-selectbox .social-twitter:before {background-image:url('img/social_twitter.png');}
.glossy-selectbox .social-google:before {background-image:url('img/social_google.png');}
.glossy-selectbox a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.glossy-selectbox input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.glossy-selectbox input:checked + label:before {
content:attr(data-focus);
}
.glossy-selectbox input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.glossy-selectbox input:checked ~ ul {
visibility:visible;
opacity:1;
}Labels: CSS, Eksperimen
span {
display:inline-block;
position:relative;
background-color:white;
width:70px;
height:70px;
margin:0 5px;
-webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
text-align:center;
color:#888;
cursor:default;
}
span:hover {
top:5px;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
box-shadow:0 2px 2px rgba(0,0,0,.2);
}
span:active {
top:6px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2);
}Labels: CSS, Desain, Eksperimen, Potongan
Terinspirasi dari karya UmbrUI oleh Simurai. Yang ini adalah versi cross browser:
<span class="toggle">
<input type="checkbox">
<label data-off="✖" data-on="✔"></label>
</span>
<span class="toggle">
<input type="checkbox">
<label data-off="◼" data-on="▶"></label>
</span>
<span class="toggle">
<input type="checkbox">
<label data-off="Stop" data-on="Play"></label>
</span>.toggle {
position:relative;
display:inline-block;
width:40px;
height:60px;
background-color:#bbb;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
text-align:center;
}
.toggle input {
width:100%;
height:100%;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
cursor:pointer;
opacity:0;
}
.toggle label {
display:block;
position:absolute;
top:1px;
right:1px;
bottom:1px;
left:1px;
background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font:normal 11px Arial,Sans-Serif;
color:#666;
text-shadow:0 1px 0 white;
cursor:text;
}
.toggle label:before {
content:attr(data-off);
position:absolute;
top:6px;
right:0;
left:0;
z-index:4;
}
.toggle label:after {
content:attr(data-on);
position:absolute;
right:0;
bottom:11px;
left:0;
color:#666;
text-shadow:0 -1px 0 #eee;
}
.toggle input:checked + label {
background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}
.toggle input:checked:hover + label {
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}
.toggle input:checked + label:before {
z-index:1;
top:11px;
}
.toggle input:checked + label:after {
bottom:9px;
color:#aaa;
text-shadow:none;
z-index:4;
}Labels: CSS, Eksperimen
<span class="checkbox">
<input type="checkbox">
<label data-on="ON" data-off="OFF"></label>
</span>.checkbox {
display:inline-block;
position:relative;
text-align:left;
width:60px;
height:30px;
background-color:#222;
overflow:hidden;
-webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.checkbox input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
margin:0 0;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
z-index:2;
}
.checkbox label {
background-color:#3c3c3c;
background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:inline-block;
width:40px;
text-align:center;
font:bold 11px/28px Arial,Sans-Serif;
color:#999;
text-shadow:0 -1px 0 rgba(0,0,0,0.7);
-webkit-transition:margin-left 0.2s ease-in-out;
-moz-transition:margin-left 0.2s ease-in-out;
-ms-transition:margin-left 0.2s ease-in-out;
-o-transition:margin-left 0.2s ease-in-out;
transition:margin-left 0.2s ease-in-out;
margin:1px;
}
.checkbox label:before {
content:attr(data-off);
}
.checkbox input:checked + label {
margin-left:19px;
background-color:#034B78;
color:white;
}
.checkbox input:checked + label:before {
content:attr(data-on);
}Labels: CSS, Desain, Eksperimen
body:before {
content:"";
display:block;
width:5px;
height:5px;
background-color:transparent;
-webkit-box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
-moz-box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
}Labels: CSS, Eksperimen
HAAAAAHHHHHHHHH!!!! Mulai iseng lagi…
// Pure jQuery Syntax Highlighter by Taufik Nurrohman
// Still an experimental :)
// https://plus.google.com/108949996304093815163/about
$(function() {
$('pre').each(function() {
var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
rep1 = new RegExp(list + " ", "ig"),
rep2 = new RegExp(list + "( ?)<span", "ig"),
$this = $(this);
$this.html($this.html()
.replace(/(<br>|\n)$/ig, "")
.replace(/(\t)/g, " ")
.replace(/"/ig, "\"")
.replace(/'|'/ig, "\'")
.replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
.replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
.replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
.replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
.replace(/(\d+(?!(.*<)))/g, "<span class='num'>$1</span>")
.replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
.replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
.replace(/<(.*?)>/g, "<span class='tag'><$1></span>")
.replace(/<!--([\s\S]*?)-->/gm, "<span class='comment'><!--$1--></span>")
.replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
.replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
.replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
.replace(rep1, "<span class='keyword'>$1</span> ")
.replace(rep2, "<span class='keyword'>$1</span>$2<span")
.replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
.replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
.replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
.replace(/!important/ig, "<mark class='important'>!important</mark>")
.replace(/<!(doctype)(.*)>/ig, "<span class='doctype'><!$1$2></span>")
.replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
.replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
.replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap();
$this.append('<div class="the-num"></div>');
// Insert the line number
var num = $this.html().split(/\n|<br>/).length,
count = 0;
for (var i = 0; i < num; i++) {
count = count + 1;
$this.find('.the-num').append(count + '.<br/>');
}
$this.css('padding-left', $this.find('.the-num').outerWidth()+14);
});
});pre {
background-color:white;
color:#069;
padding:0em 1em;
overflow:auto;
white-space:pre;
word-wrap:normal;
font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
position:relative;
margin:0 0 1em;
}
pre .the-num {
position:absolute;
top:0;
bottom:0;
left:0;
padding:0 1em;
color:#999;
background-color:#eee;
border-right:2px solid #ccc;
}
pre .bracket {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector {color:blue;}
pre .attribute,
pre .regexp {color:darkorange;}
pre .str {color:green;}
pre .tag .str {color:brown;}
pre .keyword {color:darkred;}
pre .comment {font-style:italic;color:#999;}
pre .num,
pre .hex {color:darkviolet;}
pre .name,
pre .important,
pre .array {color:red;}
pre .important {background-color:yellow;}
pre .doctype {color:magenta;}Labels: Eksperimen, JavaScript, jQuery, Potongan, Regex
/**
* Simple jQuery Accordion Plugin
* Author: Taufik Nurrohman
* Date: 8 June 2012
* https://plus.google.com/108949996304093815163/about
*/
(function($) {
$.fn.accordion = function(settings) {
settings = jQuery.extend({
active: 1,
sUpSpeed: 400,
sDownSpeed: 400,
sUpEasing: null,
sDownEasing: null
}, settings);
return this.each(function() {
var $this = $(this),
$item = $this.children('div[data-header]'),
activePanel = settings.active - 1;
$item.each(function() {
$(this).hide().before('<h2 class="accordion-header">' + $(this).data('header') + '</h2>');
});
$this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
$this.find('.accordion-header').on("click", function() {
$this.children('h2').removeClass('active');
$item.slideUp(settings.sUpSpeed, settings.sUpEasing);
$(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
});
});
};
})(jQuery);Cara menggunakannya sama dengan plugin jQuery UI Accordion. Hanya saja Saya mencoba menyederhanakan kerangka dan opsinya untuk kebutuhan skala kecil.
Pertama-tama buat kerangka HTML seperti ini:
<div id="accordion">
<div data-header="Accordion Title 1">Content 1</div>
<div data-header="Accordion Title 2">Content 2</div>
<div data-header="Accordion Title 3">Content 3</div>
<div data-header="Accordion Title 4">Content 4</div>
</div>Setiap nama header akordion disimpan di dalam atribut data-header. Plugin di atas nantinya akan memindahkan/menyalin nilai atribut tersebut untuk disisipkan ke dalam elemen <h2> yang akan diciptakan secara otomatis.
Berikutnya adalah kode CSS dasar untuk menciptakan dimensi akordion seperlunya. Silakan dimodifikasi sendiri:
#accordion {
width:300px;
background-color:green;
border:2px solid black;
}
#accordion h2.accordion-header {
cursor:pointer;
background-color:black;
font:bold 12px Arial,Sans-Serif;
color:white;
padding:10px 15px;
margin:0px 0px;
}
#accordion h2.active {
background-color:yellow;
color:black;
}
#accordion div[data-header] {
padding:10px;
}Seleksi elemen induk pada kerangka yang Anda buat lalu terapkan plugin .accordion():
$(function() {
$('#accordion').accordion();
});Ada lima buah opsi yang Saya buat untuk pengaturan tingkat lanjut:
$(function() {
$('#accordion').accordion({
active: 1,
sUpSpeed: 400,
sDownSpeed: 400,
sUpEasing: null,
sDownEasing: null
});
});| Opsi | Keterangan |
|---|---|
| active | Digunakan untuk menentukan panel yang akan terbuka saat pertama kali. Nilai 1 memiliki arti bahwa panel pertama akan terbuka |
| sUpSpeed | Digunakan untuk menentukan kecepatan penutupan panel |
| sUpSpeed | Digunakan untuk menentukan kecepatan pembukaan panel |
| sUpEasing | Digunakan untuk menentukan tipe easing panel saat panel menutup (misal: "easeOutBounce") |
| sDownEasing | Digunakan untuk menentukan tipe easing panel saat panel membuka. |
Labels: Eksperimen, JavaScript, jQuery, Potongan
Desain elemen halaman berupa navigasi angka yang terispirasi dari tokoh kartun Flying Squirrel. Bentuk setiap item navigasi menggambarkan bahwa mereka adalah kacang-kacang pohon yang sangat disukai oleh tupai terbang ini. Memang tidak mirip, tapi cukup mewakili:
<div id="blog-pager">
<a class="prev" href="#">«</a>
<a class="num" href="#">1</a>
<a class="num active" href="#">2</a>
<a class="num" href="#">3</a>
<a class="num" href="#">4</a>
<a class="next" href="#">»</a>
</div>#blog-pager {
text-align:center;
line-height:36px;
}
#blog-pager a {
font:bold 16px Georgia,Serif;
color:#711F05;
text-decoration:none;
margin:0px auto 10px;
background-color:white;
padding:10px 15px;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
-webkit-border-radius:40% 0% 40% 40%;
-moz-border-radius:40% 0% 40% 40%;
border-radius:40% 0% 40% 40%;
position:relative;
-webkit-transition:all 0.26s ease-in-out;
-moz-transition:all 0.26s ease-in-out;
-ms-transition:all 0.26s ease-in-out;
-o-transition:all 0.26s ease-in-out;
transition:all 0.26s ease-in-out;
}
#blog-pager a:before,
#blog-pager a.active:after {
content:"";
width:0px;
height:0px;
border:10px solid transparent;
border-color:#B62B00 #B62B00 transparent transparent;
position:absolute;
top:0px;
right:0px;
}
#blog-pager a.active:before,
#blog-pager a.active:after {
border-width:6px;
top:4px;
right:4px;
}
#blog-pager a.active:after {
top:auto;
right:auto;
bottom:4px;
left:4px;
border-color:transparent transparent #B62B00 #B62B00;
}
#blog-pager a:hover,
#blog-pager a.active {
color:white;
background-color:#711F05;
}
#blog-pager a.active {
-webkit-border-radius:40% 0% 40% 0%;
-moz-border-radius:40% 0% 40% 0%;
border-radius:40% 0% 40% 0%;
}
#blog-pager a:active {
background-color:#333;
}Labels: CSS, Desain, Eksperimen, Potongan
Saya sudah sangat sering melihat beberapa eksperimen tentang slideshow dengan CSS3 yang memanfaatkan selektor :target untuk mengakses setiap slide. Sehingga jika salah satu tombol navigasi diklik, maka salah satu slide dengan ID yang sesuai dengan #hash pada URL akan ditampilkan:
#css3-slider img {
display:none;
}
#css3-slider img:target {
display:block;
}Namun sayangnya CSS :target akan membuat halaman meloncat. Ini adalah sikap normal konsep fragment identifier halaman » Tentang CSS :target
Ada satu cara lain untuk mengakses setiap slide tanpa menyebabkan loncatan halaman, yaitu dengan menggunakan hack elemen input bertipe checkbox atau radio. Mereka bisa dimanfaatkan karena mereka memiliki selektor pseudo-class :checked. Dan tentunya, elemen input tidak akan menyebabkan loncatan halaman seperti halnya tautan. Sedangkan untuk mengakses setiap slide, kita akan menggunakan selektor + atau ~ untuk mengakses elemen yang terletak tepat di sebelah elemen yang ditandai/dicentang (:checked).
Beginilah konsep yang Saya gunakan: Kita menggunakan elemen <label> untuk mengeksekusi elemen <input type="radio">, sehingga kita bisa mengatur tampilannya dan bisa melupakan radio yang tidak pernah bisa diubah tampilannya menggunakan CSS (Setidaknya untuk saat ini. Masa depan, siapa yang tahu?)
Kita menggunakan radio hanya sebagai penyimpan aksi checked atau unchecked untuk mengakses setiap slide secara bergantian:
#css3-slider img {
display:none;
}
#css3-slider input:checked + img {
display:block;
}<input type="radio" name="num" id="s1" />
<label for="s1">1</label>
<img src="slide1.png" />Berikut ini adalah versi lengkap dari konsep yang Saya nyatakan di atas untuk mengatasi masalah loncatan halaman karena CSS :target. Setelah ini Anda tidak lagi memerlukan CSS :target, yang Anda perlukan hanya radio. Agak sulit untuk dijelaskan secara tertulis, Anda hanya bisa mengetahui cara kerjanya dengan cara mempelajari kode di bawah ini setelah Anda mengerti tentang Adjacent Sibling Selectors:
<ul id='css3-slider'>
<li>
<input type='radio' id='s1' name='num' checked='true' />
<label for='s1'>1</label>
<a href='/'>
<img src='slide-1.jpg' />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type='radio' id='s2' name='num' />
<label for='s2'>2</label>
<a href='/'>
<img src='slide-2.jpg' />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type='radio' id='s3' name='num' />
<label for='s3'>3</label>
<a href='/'>
<img src='slide-3.jpg' />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type='radio' id='s4' name='num' />
<label for='s4'>4</label>
<a href='/'>
<img src='slide-4.jpg' />
<span>Stay relaxed</span>
</a>
</li>
<li>
<input type='radio' id='s5' name='num' />
<label for='s5'>5</label>
<a href='/'>
<img src='slide-5.jpg' />
<span>And you will forever be relaxed</span>
</a>
</li>
</ul>/*
* Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
* 26 April 2012
* http://dte-feed.blogspot.com
*/
/* General */
#css3-slider {
margin:30px auto;
padding:0px 0px;
width:448px;
height:286px;
position:relative;
}
#css3-slider li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
/* Navigation */
#css3-slider li input + label {
position:absolute;
bottom:5px;
left:10px;
z-index:999;
font:bold 11px/16px Arial,Sans-Serif;
background-color:black;
color:white;
padding:0px 0px;
width:16px;
text-align:center;
cursor:pointer;
}
#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}
/* Images */
#css3-slider li img {
border:none;
outline:none;
position:absolute;
top:50%;
left:50%;
width:0px;
height:0px;
visibility:hidden;
opacity:0;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
/* Captions */
#css3-slider a {
text-decoration:none !important;
}
#css3-slider li a span {
display:block;
position:absolute;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.8);
font:normal 11px/26px Arial,Sans-Serif;
color:white;
padding:0px 10px;
text-align:right;
opacity:0;
viibility:hidden;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
/* Active navigation */
#css3-slider li input:checked + label {
background-color:#39f;
color:white;
}
/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
top:0%;
left:0%;
width:448px;
height:286px;
visibility:visible;
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-ms-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
opacity:1;
z-index:99;
}
/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
opacity:1;
z-index:100;
}
/* Hide the radio */
#css3-slider input {
display:none;
}Slideshow ini bekerja pada semua peramban yang memiliki prefiks CSS3 yang tercantum di atas (FF, Opera, Chrome, Safari dan IE). Masih tetap bisa bekerja pada IE9 dengan fallback yang baik (slide berpindah tanpa efek transisi). Tampilan terbaik pada Opera 11.62
Labels: CSS, Eksperimen, Gambar, Masalah
<a href="#" class="ff green">Firefox Beta</a>
<a href="#" class="ff red">Take Action Now!</a>
<a href="#" class="ff blue">Sign me up »</a>.ff {
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
display:inline-block;
vertical-align:middle;
margin:2px;
font:italic 14px/32px Georgia,Serif;
text-align:center;
color:white;
text-decoration:none;
text-shadow:0px 1px 0px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
padding:0px 15px 3px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.ff.green {background-color:#82C43A;}
.ff.red {background-color:#F5494C;}
.ff.blue {background-color:#659AE0;}
.ff:hover {
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}
.ff:active {
position:relative;
top:2px;
-webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
}Labels: CSS, Eksperimen, Potongan
<a class='lego red' href='#'>Lego Button</a>
<a class='lego green' href='#'>Lego Button</a>
<a class='lego blue' href='#'>Lego Button</a>
<a class='lego yellow' href='#'>Lego Button</a>/* RED (DEFAULT COLOR) */
.lego {
margin:0px auto 10px;
cursor:pointer;
background-color:#B2050A;
width:110px;
display:block;
font:10px/57px Arial,Sans-Serif;
color:rgba(0,0,0,0.4);
text-shadow:0px 1px 0px rgba(255,255,255,0.1);
text-transform:uppercase;
text-decoration:none;
text-align:center;
position:relative;
-webkit-box-shadow:
0px 1px 0px 0px #880408,
0px 3px 0px -1px #880408,
0px 5px 0px -2px #880408,
0px 6px 7px rgba(0,0,0,0.9);
-moz-box-shadow:
0px 1px 0px 0px #880408,
0px 3px 0px -1px #880408,
0px 5px 0px -2px #880408,
0px 6px 7px rgba(0,0,0,0.9);
box-shadow:
0px 1px 0px 0px #880408,
0px 3px 0px -1px #880408,
0px 5px 0px -2px #880408,
0px 6px 7px rgba(0,0,0,0.9);
}
.lego:before {
content:"";
width:15px;
height:15px;
background-color:#CB0D12;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
position:absolute;
top:7px;
left:8px;
-webkit-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
}
/* GREEN */
.lego.green {
background-color:#36AA34;
-webkit-box-shadow:
0px 1px 0px 0px #217E21,
0px 3px 0px -1px #217E21,
0px 5px 0px -2px #217E21,
0px 6px 7px rgba(0,0,0,0.9);
-moz-box-shadow:
0px 1px 0px 0px #217E21,
0px 3px 0px -1px #217E21,
0px 5px 0px -2px #217E21,
0px 6px 7px rgba(0,0,0,0.9);
box-shadow:
0px 1px 0px 0px #217E21,
0px 3px 0px -1px #217E21,
0px 5px 0px -2px #217E21,
0px 6px 7px rgba(0,0,0,0.9);
}
.lego.green:before {
background-color:#3BB439;
-webkit-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
}
/* BLUE */
.lego.blue {
background-color:#3676B7;
-webkit-box-shadow:
0px 1px 0px 0px #2764A2,
0px 3px 0px -1px #2764A2,
0px 5px 0px -2px #2764A2,
0px 6px 7px rgba(0,0,0,0.9);
-moz-box-shadow:
0px 1px 0px 0px #2764A2,
0px 3px 0px -1px #2764A2,
0px 5px 0px -2px #2764A2,
0px 6px 7px rgba(0,0,0,0.9);
box-shadow:
0px 1px 0px 0px #2764A2,
0px 3px 0px -1px #2764A2,
0px 5px 0px -2px #2764A2,
0px 6px 7px rgba(0,0,0,0.9);
}
.lego.blue:before {
background-color:#3683CE;
-webkit-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
}
/* YELLOW */
.lego.yellow {
background-color:#EACB00;
-webkit-box-shadow:
0px 1px 0px 0px #D1A503,
0px 3px 0px -1px #D1A503,
0px 5px 0px -2px #D1A503,
0px 6px 7px rgba(0,0,0,0.9);
-moz-box-shadow:
0px 1px 0px 0px #D1A503,
0px 3px 0px -1px #D1A503,
0px 5px 0px -2px #D1A503,
0px 6px 7px rgba(0,0,0,0.9);
box-shadow:
0px 1px 0px 0px #D1A503,
0px 3px 0px -1px #D1A503,
0px 5px 0px -2px #D1A503,
0px 6px 7px rgba(0,0,0,0.9);
}
.lego.yellow:before {
background-color:#F2D305;
-webkit-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
box-shadow:
0px 1px 2px rgba(0,0,0,0.4),
20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
}
.lego:active {
top:3px;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}Labels: CSS, Eksperimen, Potongan
Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.
