 |
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
Custom Font Dengan Google Web Font Dan Penggunaanya
24 Maret 2012
sebenarnya ini udah lama tapi karena banyak request ya share dah.. langsung aja tampa memperpanjang waktu langsung aja ikuti tutor di bawah ini oke
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