10 Wallpaper Typography

2011-12-05T20:18:00.001+07:00

Tipografi merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk

mendapatkan kenyamanan membaca semaksimal mungkin.

Dikenal pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambang bunyi bisa diabaikan.(wikipedia)

Ngomong-ngomong soal Typography, saya mempunyai koleksi 10 wallpaper typography yang di desain dan di warnai dengan menakjubkan untuk di gunakan sebagai penghias dekstop ataupun keperluan lainnya.

10 Wallpaper Typography

CSS3 Slide Menu - Vertical Fixed

2011-12-04T21:01:00.014+07:00

Saya telah melihat banyak situs yang memiliki menu navigasi vertikal fixed untuk meletakan link halaman yang terpenting buat mereka. Dalam artikel ini saya memperkenalkan gaya baru CSS3 menu vertikal fixed untuk blog

blogger.
Menu ini dilengkapi dengan 5 ikon. 5 ikon itu berisi dari Home, About, Services, Portfolio dan Contact us. Tapi Anda bisa mengubah ikon dan teks apapun yang Anda suka. Menu ini dirancang benar-benar menggunakan CSS3 dengan hanya satu gambar dan dapat diterapkan dengan mudah.

Demo

Tahapan menggunakan CSS3 Slide Menu - Vertical Fixed

1. Login ke Blogger.com, pergi ke Template/Rancangan > Edit HTML
2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS dibawah ini paste diatas kode ]]></b:skin>

*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;
/*-o-transition: 0.25s;*/

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://lh5.googleusercontent.com/-KwCHdatizWA/TrjY-aOvayI/AAAAAAAAS9M/UjjseDoabfA/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

3. Selanjutnya cari kode </body> copy kode berikut ini paste diatas kode </body>

<div style='position: fixed; top: 40%; left: 0%;'>
<ul id='navigationMenu'>
<li>
<a class='home' href='/'>
<span>Home</span>
</a>
</li>

<li>
<a class='about' href='#'>
<span>About</span>
</a>
</li>

<li>
<a class='services' href='#'>
<span>Services</span>
</a>
</li>

<li>
<a class='portfolio' href='#'>
<span>Portfolio</span>
</a>
</li>

<li>
<a class='contact' href='#'>
<span>Contact us</span>
</a>
</li>
</ul>
</div>

4. Langka terahkir klik Save Template.

Source

Leave U

10 Wallpaper Typography