Pages

Item Blur Effect With CSS3 and Jquery

type='html'>Setelah Saya pikir pikir ini cocok untuk Saya Postingin karena alasan yang tidak bisa saya jelaskan wkwkwk, ini  saya dapatkan di suatu website yang tutorialnya keren keren, ye mungkin kalian sudah tau ya, langsung lihat screenshot dibawah ya
  
                             

biar lebih jelas ni saya kasi demo


Kerangka




Template Cyber-JM V2


01 April 2012

Pada hari minggu tepatnya tanggal 1 April 2012 saya mau bagi template Cyber-JM yang kedua, tadinya mau bagi template pertama ane, karena backup terlalu banyak jadi pusing,





Tooltip keren (Link,Gambar, Akronim)


30 Maret 2012

oke jadi ke inget sama cyber jm yang dulu yang pake tooltip ke semua(link,title,gambar) pas udah inget langsung coba lagi di template lain ternyata bisa, lansung di share, lihat screenshot berikut.. preet





On Mouse over Alert


29 Maret 2012

On mouseover alert berfungsi untuk menampilkan pesan pada saat pengunjung blog menggerakkan cursor di atas gambar. Bentuk KODE yang digunakan adalah sebuah javascript yang sangat sederhana





Text-Shadow Dengan Efek Hover


28 Maret 2012

Text-shadow dengan efek hoverLangsung aja Sekarang mari kita mulai pembahasan CSS3 Text-shadow dengan efek hover silahkan arahkan kursor ke kalimat di bawah:





Membuat Menu Melayang Dengan Efek Fade Out


27 Maret 2012

Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe





Modifikasi tampilan blogroll


26 Maret 2012

Sudah beberapa hari ini saya nggak posting, lagi sibuk dengan dunia nyata, oke dari pada mikirin ntu lebih baik modif tu tampilan blogroll sobat, hehehe.ni saya kasi blogroll ini mengikuti u






Javascript Popup Window Dengan Animasi


22 Maret 2012

udah berapa hari ya saya gak posting.. hehe soalnya saya gak ada bahan dan sekarang baru dapat oke udah pernah kan klik button yang nantinya keluar popup





CSS

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* General Demo Style */
body{
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #ddd url(../images/noisy_blue.jpg) repeat top left;
font-weight: 400;
font-size: 15px;
color: #333;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 30px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
}
.container > header:after{
content: '';
height: 1px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.7);
}
h1{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size: 50px;
line-height: 50px;
position: relative;
font-weight: 400;
color: #111;
text-shadow: 0px 0px 1px rgba(0,0,0,0.7);
    padding: 0px 0px 5px 0px;
margin: 0px 20px;
    text-align: center;
}
h1 span{
color: #ffd252;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
h2{
font-size: 16px;
font-style: italic;
padding: 0px 0px 15px 0px;
}
/* Header Style */
.header{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.header a:hover{
color: #fff;
}
.header span.right{
float: right;
}
.header span.right a{
float: none;
display: inline;
}
p.demos{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align:center;
display: block;
line-height: 30px;
padding: 20px 0px;
}
p.demos a{
    display: inline-block;
width: 60px;
height: 60px;
background: #222;
margin: 0px 4px;
color: #fff;
line-height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
font-size: 16px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
p.demos a:hover{
opacity: 0.7;
}
p.demos a.current-demo,
p.demos a.current-demo:hover{
background: #ffd252;
}
.ib-container{
position: relative;
width: 800px;
margin: 30px auto;
display: block;
}
.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}
.ib-container article{
display: block;
width: 140px;
height: 220px;
background: #fff;
cursor: pointer;
float: left;
border: 10px solid #fff;
text-align: left;
text-transform: none;
margin: 15px;
z-index: 1;
-webkit-backface-visibility: hidden;
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 1px 3px 10px rgba(0,0,0,0.2);
-webkit-transition:
opacity 0.4s linear,
-webkit-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-moz-transition:
opacity 0.4s linear,
-moz-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-o-transition:
opacity 0.4s linear,
-o-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-ms-transition:
opacity 0.4s linear,
-ms-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}
.ib-container h3 a{
font-size: 16px;
font-weight: 400;
color: #000;
color: rgba(0, 0, 0, 1);
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
opacity: 0.8;
}
.ib-container article header span{
font-size: 10px;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
padding: 10px 0;
display: block;
color: #FFD252;
color: rgba(255, 210, 82, 1);
text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
text-transform: uppercase;
opacity: 0.8;
}
.ib-container article p{
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 13px;
color: #333;
color: rgba(51, 51, 51, 1);
text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
opacity: 0.8;
}
.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
-webkit-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-moz-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-o-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-ms-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
}
/* Hover Style for all the items: blur, scale down*/
.ib-container article.blur{
box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.7;
}
.ib-container article.blur h3 a{
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.ib-container article.blur header span{
text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
color: rgba(255, 210, 82, 0);
opacity: 0.5;
}
.ib-container article.blur  p{
text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
color: rgba(51, 51, 51, 0);
opacity: 0.5;
}
/* Hover Style for single item: scale up */
.ib-container article.active{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 11px 15px 10px rgba(0,0,0,0.4);
z-index: 100; opacity: 1;
}
.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
opacity; 1;
}
Javascript