Free Font : Higher

This crazy rare font. Not for paragraph and title. But for super big font for great view. If this font u use for paragraph you will get punished from your boss. Use this font when the font size higher than 60px. This font is not mine , who is the author. I dont know too, i just download and convert it with css. And the last result i know i can do that. Thanks to Higher author and google code who helps me to success mountain. You need to know more fact, do you know i write this post when i hear a thousand year song by Cristina Perri. Let see how i convert this font

The quick

brown fox

jumps over 

the lazy
jumps over 

HTML

@font-face {
font-family: Higher;
src: url('http://twesibly.googlecode.com/files/Higher.ttf');
}

More →

Terminal Dosis Disappear from Google Webfonts

I dont like this moment, this font is amazing font :(. Why must vanished from google webfonts. But all Terminal Dosis Family are vanished from google webfont too. But dont sad, i have the terminal dosis light script and i want share it to you. Actually, i dont have this font. But from my friend blog i saw the font is amazing, i try to use WhatFont extension from Google chrome to know what is that. The result is terminal dosis light, that is google web fonts, but i search in there. No result for " Terminal Dosis". Oww nooo... I want share this font noww !!

Terminal Dosis Light

<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'/>

Terminal Dosis (normal)

<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css'/>

I Hope you like it

More →

Fight With Alexa

Alexa.com is the great website rank checker. Alexa is very important for business websites. Not easy to get <1.000.000 alexa rank, just 1 million alexa rank you need to work hardly, add your blog post, find backlinks. If your alexa is lower than 1 million it mean you is a great web author. Important! Alexa rank and Google PageRank is different, higher pagerank is good but not for alexa. Higher alexa rank is very badd. I try harder to share posts, freebies, tutorials, collectives to public just for alexa. That why this post title is "Fight With Alexa" i really want fight with alexa, it very challenge me. Try..Try..Try.. Never give uppp. You too, lets do it together. GANBATTE < find the meaning in google translate ( Korean / Japan Language ) I dont know but it for encourage someone. Dont forget GANBATTE

More →

HTML5 Form Placeholder

Hi, this simple tutorial help newbie how to use HTML5 Form Placeholder. You need to know placeholder is more effective than you use "blur" or anything old type placeholder. More crazy if you use "value='sometext". That is really not effective. Do you know? value ='' is not a placeholder. That is what your visitor type in the form. Like a search form "search/?q=example" , example is value. So? Try think again which is the best form placeholder. I suggest you to choose the HTML5 Placeholder very easy and effective. Example: <input type='text'/> , how to add the placeholder there. Let see it closer <input type='text' placeholder='Example'/>. Example is a placeholder text. Placeholder is useful for search form, contact form, or anything form type. How to styling a placeholder? Upss... You too fast to go there. But placeholder is really can styled. I dont lie with you, wait the next post. I will show you how to do that.

More →

Better Google Webfonts

Google WebFonts now contains 600> Amazing fonts. But now all are great quality. You must clever to choose a great fonts for your site title or paragraph. A Sans-serif fonts are clean and Serif fonts are elegant. Which you want to choose ? Or another fonts categories. Script, Blackletter. Let me help you choose one for your website.

1. Open Sans
Who dont know this amazing font. Open Sans is clean, elegant, sans-serif. This font is really perfect for paragraph text. Many popular sites use this font. If your site is professional, why dont want to try this great font.

2. Ubuntu
95% Sans-serif, 5% Script. Ubuntu is perfect for paragraph or title. Minimalist, clean with some script style. Not so bad but really good.

3. Lobster
This crazy dancing font. Lobster is one of most popular google web fonts. Elegant, Handwritting. Great for a title. Perfect for personal website.

4. Lato
Lato most popular google web fonts. Perfect for paragraph. 30% Serif. You must try this font too !

5. Oswald
Umm.. Oswald not so popular, but Oswald is the king of Title and Bold style. Minimalist, Elegant. Great for vintage or retro style websites. Coooooll

6. Vollkorn
Serif type web font. You can feel a great moment in wheat field with this Amazing font. This font great for Wheat or corn theme websites.

7. Pacifico
Great.. A great title web font. This script font is not really bad. Waw.. Pacifico is one most popular title font.

8. Lobster two
Lobster brother, the script style is more smoother than Lobster. But great too like his brother. For title.

9. Droid Sans family
Droid Sans family fonts are great. Droid sans is little bit same with Open Sans. But different. Droid Sans popular too and Nice style.

10. Lora
Lora the elegant Google web font. Best for paragraph. Nobody can live without this font.
Try this ! Dont bring it back to home , i want too

Conclusion
Be careful with fonts. It is first weapon to kill your visitors. Great Fonts Great Websites. Dont waste your time , try it now.

Update
Soon, i will share a great font ( Not Google Web Font ) to you. Called him HIGHER. Cool, Minimalist font. Great but dangereous, this font can make you crazy. Min font size required about 65px for best view. Lower than 65px it very very very ugly. But take it to home for freebies
Regard
Cloud 5U Support

More →

Animated Single Page Book

This great book, Single one page book with animated hover effect. Very simple but funny. This is just my experiment, but never miss an article. And then i share with you . You can add your style, shadow, 3D effect, or other crazy idea.  Dont tear the book 

The HTML

<div class="pad">
<div>
  <div><h1>Loria</h1><p>by<br />CSS Genic</p></div>
<div><div>
  <p><h1>Text</h1></p>
</div></div>
<div><div>
  <p>Lorem Ipsum</p>
</div></div>
</div>
</div>

The CSS

div.pad {width:600px; height:400px; padding:0 0 40px 0; margin:20px auto; position:relative; overflow:hidden; background:transparent; border:40px solid transparent; border-width:40px 40px 0 40px;}
div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background:#574;}
div.pad > div > div:nth-of-type(2),
div.pad > div > div:nth-of-type(2) div {
-webkit-transform-origin: 0 -900px;
-moz-transform-origin: 0 -900px;
-ms-transform-origin: 0 -900px;
-o-transform-origin: 0 -900px;
transform-origin: 0 -900px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(3),
div.pad > div > div:nth-of-type(3) div {
-webkit-transform-origin: 300px -900px;
-moz-transform-origin: 300px -900px;
-ms-transform-origin: 300px -900px;
-o-transform-origin: 300px -900px;
transform-origin: 300px -900px;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
}
div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}
div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;}
div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;
-moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
}
div.pad > div:hover > div:nth-of-type(2),
div.pad > div:hover > div:nth-of-type(3),
div.pad > div:hover > div:nth-of-type(2) div,
div.pad > div:hover > div:nth-of-type(3) div
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
div.pad h1 {padding:0; margin:0; text-align:center; font:normal 80px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}
div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#111; padding:20px;}

Finish

You step on the finish line. I hope you like it

More →

Pure CSS Animated Progress Bar

This great tutorial, pure CSS Animated Progress Bar. Someone use Progress Bar for any reasons. In business world Progress Bar is useful, look like 4Shared. Some CSS very helpful here Keyframes animation and animation. This CSS progress bar very easy to customize. You can change the speed, background, or the bar. Codepen help me to build this project. Let's Start 

HTML

<div class="progress"><div>

CSS

body {
	  background:#1e1e1e;
  	-webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
}
.progress {
background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 350px;
	margin: 50px 0;			
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;	
  margin-left: 37.5%;
}

.progress div {
  display:block;
background-color: #34c2e3;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#34c2e3), to(#3cbef2));
	  background-image: -webkit-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -moz-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -ms-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -o-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: linear-gradient(top, #34c2e3, #3cbef2);        
	height: 100%;	
  width: 100%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-animation:progressbar 15s linear;
-moz-animation:progressbar 15s linear;
-ms-animation:progressbar 15s linear;
-o-animation:progressbar 15s linear;
animation:progressbar 15s linear;
       	
}

@-webkit-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-webkit-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-moz-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-moz-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-ms-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-ms-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-o-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-o-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}


@keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

We're Done

I hope you like this

More →