CSS Web Lovers

Selamat berjumpa lagi kawan, sobat, follower tercintaku :x Seperti biasa mau berbagi hasil ngebloglang nih Beben si ganteng kalem :D Berangkat dari web yang benar-benar menyukai CSS. Trik yg biasa memakai script kebanyakan orang membuat, sama web ini mah bisa dibikin hanya dengan menggunakan CSS b-) Web dengan tampilan bergaya scrolling ini bisa dibikin dgn CSS. No cing-cong, no bacot, no talk anymore kemon lets cek gi dot artikel pilihan setelah bloglang mengacak-ngacak webnya >:) :))

Demo1

Kode CSS untuk trik ini, seperti biasa taruh diatas kode ]]></b:skin>

/* The container for the whole thing */
#trigger {
position: fixed;
bottom: 1px;
left: 1px;
width: 100px;
height: 100px;
}
/* The box that says "Trigger", this hides the popup items */
#trigger .trigger-button {
display: block;
width: 100px;
height: 100px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
position: absolute;
z-index: 5; /* Move the trigger over the stack items to hide the items */
background-color: rgba(0,0,0,.8); /* See through for the example */
color: white;
-webkit-box-shadow: 0 0 3px rgba(50,50,50,.8);
-moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
-o-box-shadow: 0 0 3px rgba(50,50,50,.8);
box-shadow: 0 0 3px rgba(50,50,50,.8);
-moz-box-shadow: 0 0 3px rgba(50,50,50,.8);
-o-box-shadow: 0 0 3px rgba(50,50,50,.8);
box-shadow: 0 0 3px rgba(50,50,50,.8);
text-align: center;
line-height: 100px;
font-size: 20px;
text-shadow: 0 0 3px #999;
cursor: default;
}
#trigger ul {
position: absolute;
bottom: 50px;
padding: 0;
margin: 0;
}
/* The stack items */
#trigger ul li {
/* clear the default styles */
margin: 0;
display: block;
opacity: 0.2; /* Would be 0, 0.2 for the example */
/* place the items below the trigger-button */
position: absolute;
bottom: -51px;
/* The size of the items plus padding to allow for the cursor to move from item to item without closing the stack */
padding: 10px;
width: 80px;
height: 80px;
/* Setup the animation effect */
-webkit-transition: -webkit-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-moz-transition: -moz-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
-o-transition: -o-transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
transition: transform .5s ease-out, opacity .4s ease-out, bottom .5s ease-out;
/* Move the origin far to the right to be the axis to rotate around*/
-webkit-transform-origin: 575px 50px;
-moz-transform-origin: 575px 50px;
-o-transform-origin: 575px 50px;
}
/* Move the stack items up to unhide behind the trigger-button */
#trigger:hover ul li {
bottom: -50px;
}
/* Position the stack items for when open by rotating them upwards */
#trigger:hover ul li:nth-child(1) {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: .9;
}
#trigger:hover ul li:nth-child(2) {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
opacity: .8;
}
#trigger:hover ul li:nth-child(3) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
opacity: .7;
}
#trigger:hover ul li:nth-child(4) {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
opacity: .6;
}
#trigger:hover ul li:nth-child(5) {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
opacity: .5;
}
/* Hide any items after the fifth */
#trigger ul li:nth-child(5) ~ li {
display: none;
}
/* Full opacity for hovering over the stack items */
#trigger:hover ul li:hover {
opacity: 1;
}
/* The button/icons for the stack items */
#trigger ul a {
display: block;
background-color: yellow;
border: solid 2px white;
background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(100%,100%,100%,.2)),color-stop(1, rgba(100%,100%,100%,0)));
line-height: 76px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-align: center;
text-shadow: none;
text-decoration: none;
font-size: 30px;
color: #111;
-webkit-transition: background-color .4s;
-moz-transition: background-color .4s;
-o-transition: background-color .4s;
transition: background-color .4s;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.5);
-o-box-shadow: 0 0 3px rgba(0,0,0,.5);
box-shadow: 0 0 3px rgba(0,0,0,.5);
}
#trigger ul li:nth-child(odd) a{
background-color: teal;
}
#trigger ul li:nth-child(n) a:hover {
background-color: green;
}
/* The next is to create the axis marker for the example */
#trigger ul {
counter-reset: axis;
}
#trigger ul li:after {
display: block;
position: absolute;
left: 573px;
top: 23px;
width: 50px;
height: 50px;
border: dashed green 1px;
counter-increment: axis;
content: "axis " counter( axis );
padding: 2px;
border: dashed 2px green;
text-align: center;
line-height: 50px;
color: rgba(0,0,0,.5);
opacity: .5;
}
#trigger ul li:hover:after {
z-index: 5;
color: black;
opacity: 1;
border-color: red;
-webkit-box-shadow: 0 0 5px yellow;
-moz-box-shadow: 0 0 5px yellow;
-o-box-shadow: 0 0 5px yellow;
box-shadow: 0 0 5px yellow;
}

Kode HTML untuk trik ini juga seperti biasa masukan didalam tag <body>...</body> dan kalau mumet pilih option Add a Gadget ► HTML/Javascript ► :D

<div id="trigger">
<span class="trigger-button">TITLE</span>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>

Satu gaya tuh bagi blogger full stylish :-B Come lets go to the look other trick ;))

Demo2

Lihat pada bagian kiri monitor, ada bagian sidebar yg bisa nongol :bz This is CSS code.

/*The Sidebar The Default Settings */
#sidebar {
position: fixed; /* Keeps it in the same place for the viewer.*/
left: 0;
top: 0;
bottom: 0;
z-index: 2000;
background-color: #aaa;
width: 9px;
border-right: 3px solid #000;
}
#sidebar img.label{
position: absolute;
right: 0;
top: 30%;
}
#sidebar ul{
margin: 0;
padding: 0;
width: 59px;
top: 50%;
left: 0;
position: absolute;
display: none; /* To hide the items*/
}
#sidebar ul li{
list-style-type: none;
}
#sidebar ul li a{
border-color: #4174A3;
border-style: solid;
border-width: 1px;
width: 40px;
height: 40px;
margin: 1px auto 1px auto;
display: block; }
#sidebar ul li a:hover{
background-color: #D4E1EE;
}
#sidebar ul li a img{
border: none;
}
/* the hover state */
#sidebar:hover{
width: 65px; /* This makes is pop out. */
}
#sidebar:hover ul{
display: block; /* To show the items instead of not showing them*/
}

And this is for HTML code.

<div id="sidebar">
<img src="GAMBAR-BERESOLUSI-10px x 65px.PNG" alt=""/>
<ul>
<li><a href="#"><img src="GAMBAR-BERESOLUSI-40px x 40px.PNG" alt=""/></a></li>
<li><a href="#"><img src="GAMBAR-BERESOLUSI-40px x 40px.PNG" alt=""/></a></li>
<li><a href="#"><img src="GAMBAR-BERESOLUSI-40px x 40px.PNG" alt="" /></a></li>
</ul>
</div>

Berikutnya ini sedikit memerlukan kejelian kalau memang berminat mau make :-"

Demo3

Kode CSS ;))

/* navigation menu */
#nav{
position: fixed;
left: 0;
top: 14px;
width: 75px;
height: 11px;
background-image: url(HTTP://GAMBAR-MENU KECIL-BERESOLUSI 75px × 9px.PNG); /* Menu label */
background-position: 0 0;
background-repeat: no-repeat;
z-index: 1000;
}
#nav:hover{
width: 100%; /* note change in width*/
height: 43px;
background-position: left bottom;
background-image: url(HTTP://GAMBAR-MENU KECIL HOVER-BERESOLUSI 75px × 9px.PNG);
}
#nav:hover ul{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 9px;
/*background-color: #AFAFC0;*/
background-image: url(HTTP://GAMBAR GARIS-BERESOLUSI 1px × 100px.PNG);
border-bottom: 14px solid #636384;
padding: 0 0 0 15px;
margin: 0;
height: 32px;
}
#nav ul{
display: none;
}
#nav ul li{
float: left;
width: 32px;
height: 32px;
list-style: none;
margin: 0 1px ;
}
#nav ul li a span{
display: none;
}
/* The links */
#nav ul li a{
background-image: url(HTTP://GAMBAR-BACKGROUND RESOLUSI 32px × 32px.PNG);
text-decoration: none;
display: block;
width: 32px;
height: 32px;
}
#nav ul li a:hover{
background-image: url(HTTP://GAMBAR HOVER-RESOLUSI 48px × 48px.PNG);
position: relative;
left: -9px;
top: -9px;
width: 48px;
height: 48px;
}
/* the button images */
#nav ul li a {
background-image: url(HTTP://GAMBAR HOME-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="/"]:hover{
background-image: url(HTTP://GAMBAR HOVER HOME-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="new/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="new/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="edit/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="edit/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="manage/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="manage/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
#nav ul li a[href="logout/"]{
background-image: url(HTTP://GAMBAR APA SAJA-RESOLUSI 32px × 32px.PNG);
}
#nav ul li a[href="logout/"]:hover{
background-image: url(HTTP://GAMBAR HOVER APA SAJA-RESOLUSI 48px × 48px.PNG);
}
/* The popup text*/
#nav ul li a:hover span{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #39426B;
float: left;
display: block;
font-weight: bold;
position: relative;
left: 30px;
top: 30px;
background-image: url();
padding: 1px;
border: 1px solid;
}
topas{
font-size: 9px;
color: White;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
background-color: #373A62;
text-align: center;
padding: 1px 15px 1px 15px;
background-image: url(HTTP://GAMBAR GARIS-RESOLUSI 1px × 14px.PNG);
background-position: bottom;
background-repeat: repeat-x;
}

Kode HTML ;))

<topas>Lorem Ipsum blah bleh blog Menu Panuan</topas>
<div id="nav">
<ul>
<li><a href="/"><span>Home</span></a></li>
<li><a href="new/"><span>New</span></a></li>
<li><a href="edit/"><span>Edit</span></a></li>
<li><a href="manage/"><span>Manage</span></a></li>
<li><a href="logout/"><span>Logout</span></a></li>
</ul>
</div>

Demo4

Kalau yg ini sedikit bingung dari sebelumnya, tapi dikiiiiiiittt deh bingungnya ;)) Pada demo ini ada 3 buah. Beben ambil yg ketiga The Third Jump Menu pada contoh tersebut. Dibutuhkan beberapa gambar nih sob kalau memang mau persis seperti contoh di demo itu Picture. Trik ini dasarnya menjadikan link didalam CSS kita untuk tujuan jump. Maka harus benar² diperhatikan dalam penulisannya. Kode CSS untuk trik ini!!!

.jumpMenu{
position: relative; /* needed */
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
width: 124px;
}
.jumpMenu:hover{
z-index: 10; /* place it over top of the surronding text */
}
/* The label of the jump menu */
.jumpMenu .label{
width: 124px;
height: 14px;
display: block;
position: relative;
z-index: 2; /* key so that the links can hide underneath it */
text-align: center;
cursor: default; /* The pointer cursor gives a better ui feel, I think */
color: Black;
background-color: #bbb;
}
.jumpMenu:hover .label{
background-color: #eee;
color: Black;
}
.jumpMenu ul{
margin: 0;
padding: 0;
height: 0;
position: absolute;
}
.jumpMenu ul li{
list-style: none;
display: inline;
}
.jumpMenu ul a{
display: block;
text-decoration: none;
background-image: none;
width: 124px;
height: 14px;
/* Make it small and place underneath the label which
* hides the links but allows them to gotten to by tabbing */
margin-top: -10px;
position: absolute;
height: 0;
overflow: hidden;
color: black;
background-color: #eee;
}
.jumpMenu ul a:hover{
background-color: #000066;
color: White;
}
.jumpMenu:hover ul a,
.jumpMenu ul a:focus
{
margin-top: 0;
height: 14px;
visibility: visible;
position: static;
overflow: visible;
z-index: 3;
}
#third.jumpMenu {
position: relative;
margin-left: 20px;
}
#third.jumpMenu .label{
width: 127px;
height: 35px;
/* a bit of image replacement */
overflow: hidden;
text-indent: -9000px;
background-image: url(jumpmenuButton.png);
background-color: transparent;
}
#third.jumpMenu:hover ul{
background-image: url(hoverBg.png);
background-repeat: no-repeat;
width: 135px;
height: 236px;
position: absolute;
left: 10px;
top: 2px;
}
#third.jumpMenu:hover ul a[href="http://address-1.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 88px;
height: 31px;
text-indent: -9000px;
background-image: url(launch.png);
top: 89px;
left: 42px;
}
#third.jumpMenu:hover ul a[href="http://address-1.com/"]:hover, #third.jumpMenu:hover ul a[href="http://address-1.com/"]:focus{background-image: url(launchHover.png);}
#third.jumpMenu ul a[href="http://address-1.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 88px;
height: 31px;
text-indent: -9000px;
background-image: url(launchHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-5.com/"], #third.jumpMenu:hover ul a[href="http://address-5.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 52px;
height: 36px;
text-indent: -9000px;
background-image: url(site.png);
top: 209px;
left: 72px;
}
#third.jumpMenu:hover ul a[href="http://address-5.com/"]:hover, #third.jumpMenu:hover ul a[href="http://address-5.com/"]:focus{
background-image: url(siteHover.png);
}
#third.jumpMenu ul a[href="http://address-5.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 52px;
height: 36px;
text-indent: -9000px;
background-image: url(siteHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-4.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 179px;
height: 47px;
text-indent: -9000px;
background-image: url(playground.png);
top: 119px;
left: -27px;
}
#third.jumpMenu:hover ul a[href="http://address-4.com/"]:hover{
background-image: url(playgroundHover.png);
}
#third.jumpMenu ul a[href="http://address-4.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 179px;
height: 47px;
text-indent: -9000px;
background-image: url(playgroundHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-2.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 81px;
height: 37px;
text-indent: -9000px;
background-image: url(about.png);
top: 47px;
left: 62px;
}
#third.jumpMenu:hover ul a[href="http://address-2.com/"]:hover{
background-image: url(aboutHover.png);
}
#third.jumpMenu ul a[href="http://address-2.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 81px;
height: 37px;
text-indent: -9000px;
background-image: url(aboutHover.png);
}
#third.jumpMenu:hover ul a[href="http://address-3.com/"]{
background-color: transparent;
position: absolute;
z-index: 2;
width: 114px;
height: 38px;
text-indent: -9000px;
background-image: url(rant.png);
top: 177px;
left: 30px;
}
#third.jumpMenu:hover ul a[href="http://address-3.com/"]:hover{
background-image: url(rantHover.png);
}
#third.jumpMenu ul a[href="http://address-3.com/"]:focus{
background-color: transparent;
position: absolute;
z-index: 2;
width: 114px;
height: 38px;
text-indent: -9000px;
background-image: url(rantHover.png);
}

Kode HTML, perhatikan sekali lagi link. Dalam kode penulisan dan gambar harus benar.

<div class="jumpMenu" id="third">
<span class="label">Jump Menu 3rd</span>
<ul>
<li><a href="http://address-1.com/">Title-1</a></li>
<li><a href="http://address-2.com/">Title-2</a></li>
<li><a href="http://address-3.com/">Title-3</a></li>
<li><a href="http://address-4.com/">Title-4</a></li>
<li><a href="http://address-5.com/">Title-5</a></li>
</ul>
</div>

Itulah beberapa artikel gaya yg Beben pilih di web keren dan gaya punya Mojebus. Silahkan satroni webnya guna memperdalam trik dan tips yg ada :) Pamit :)>-85V9C7B2EVYU