Image Slider Using CSS3 Key Frame Animation Without Jquery Plugins

In this tutorial we are going to learn how to create a image slider with css3 key frame animation without using jQuery or JavaScript, So Lets Get Started Live Demo Download Script

Read more

Creating a custom font with css

Hey guyz in this post i am going to teach u how to embed cool font in your webpage with css. Its very easy and u can manage your custom font with your custom and name and can host the fonts locally or not a cdn (content delivery network) like google. So let dive in code

Live demo Download Script Watch Tutorial

Css

Their is nothing special we are just using a @font-face{} property in css which allow us to create a embed a custom font with a custom name one thing to keep in mind is that a font should be of .woff extension beacuse this is supported by all modern browser. we have created a custom font with @font-face property and used that font in the .p class

<style type="text/css">
	@font-face{
		font-family: 'husain';
		src: url('husain.woff');
	}
	.g{
		font-family: 'husain';
	}
	</style>

html

we have used the .p class in h1 tag and your custom font will be attached to that h1 tag

<h1 class="g">Welcome to hunklessons.blogspot.com</h1>
<h1>Welcome to hunklessons.blogspot.com</h1>

Css3 Progress Bar

Now a days progress bar is a very important in any social media website and progress bar is very easy to create with just a few lines of css and some beautifull css3 transition

CSS3 Progress Bar

Download Script

View Demo

html

html is very simple it just have a div with class .bar and a span inside the div

<div class="bar">
 <span style="width:0%;"></span>
</div>

css

//style of div
.bar{
 width: 100%;
 background: #eee;
 padding: 3px;
 border-radius: 3px;
 box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
//style of span
.bar span{
 height: 20px;
 background: cornflowerblue;
 display: block;
 border-radius: 3px;
 -webkit-transition: width 0.8s ease;
 -moz-transition: width 0.8s ease;
 transition: width 0.8s ease;
}

Like Us on Facebook / Add Hunk As Friend