URANG-KURAI

• <
• >
• About
• Gallery
• Search Template
• Download

Demo - Free templates

Copyright © urang-kurai2012-2014 - west sumatera-Boekittinggi

11:40 AM

Cool CSS Loading Animation

Hoorayy.....I finished my last project. This great CSS Loading animation, It can walk slowly slowly until right: 0px :). and STOP. Let see the Demo. Take it easy, Keyframes animation help the bar to walk. The bar have legs to walk. Amazing.. Start the Markup

HTML

<div class="progress shine"><div>

Lets the magic do this work

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;
       	
}
.shine {
	position: relative;
}

.shine:after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;			
	
	-webkit-animation: animate-shine 1ms ease-out infinite;
	-moz-animation: animate-shine 1ms ease-out infinite; 			
}

@-webkit-keyframes animate-shine { 
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}


@-moz-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}


@-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;}
}

I Hope You LIke It

Weekly Freebies: Magie One Page template

Hosh...hosh...hosh... i tired to deliver this Freebies to you. Weekly freebies is Magie One Page Template.

In Theme Forest this template not free , it cost $15. Whoaaa..... very expensive ? I share this template for you with no cost. Actually i really dont want share this, but i need a freebies to invite visitors here. :) No problem for me i like it. 

Magie Template is very nice.

•  Responsive
• Ajax Powered

Not Just that , more features listed below 

1.  Responsive Design
2. Jquery Powered
3. Custom Lightbox
4. 7 Page / Section (Home, Default, Contact, Blog, Blog Posts, Project, Portfolio )
5. Highly Customizable
6. Simple and Clean design
7. Cross Browser compatible

  

File format: XML

ENJOY !

Pure CSS iPad Construction

Huh... my work now is Build pure CSS ipad portrait in real size. Very huge. See it HERE. WIith some Jquery it become Attractive. There are same features with the Real iPad

• Same Size
• iPad Status : OFF / ON with Button

I Like it , i will share it with you too. Let me do it first. You can build the Mini first Here. The iPad can Boost  your skills like CSS, Jquery, HTML. 

Update

• Slide To Unlock + Letter animation
• Home Page Icons
• iPad Style Alert

Slide to unlock slider i got from Chris Coyier, Really great but the slider is Image, I trying to build the Slider with out Image, CSS only Image Not permitted. 

I Build it with my CSS, HTML, and My Jquery.

To Show and Hide the Clock, Date, Header, Headline i use Opacity Set it 0 to hide it and set it 1 to show it with Jquery

Build IPad with pure CSS

Let's build Ipad with Pure CSS , i Like it . . Great ? Thanks to Apple and Codepen. :Before and :After are very helpful. Lets do It

.ipad {
	margin: 0;
	display: block;
	position: relative;
	background: #e8e7e6;
	width: 268px;
	height: 314px;
	padding: 2px;
	border: 1px solid #868381;
	-webkit-border-radius: 25px;
	   -moz-border-radius: 25px;
	        border-radius: 25px;
	-webkit-box-shadow: #c1bfbf 0 0 0 1px;
	   -moz-box-shadow: #c1bfbf 0 0 0 1px;
	        box-shadow: #c1bfbf 0 0 0 1px;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
    	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
    -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
box-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);

}

.ipad:after {
	content: '';
	width: 15px;
	height:15px;
	position: absolute;
	top: 14px; 
	left: 126px;
  border-radius: 50px;
	background: rgba(0,0,0,0.7);
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	        box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}

.ipad:before {
	content: '';
	width: 215px;
	height: 225px;
	position: absolute;
	top: 46px; 
	left:26px;
	z-index: 0;
	background: url(http://cdn1.iconfinder.com/data/icons/social/128/picons46.png)no-repeat center center #1c1a1a;
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	        box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}
.ipad2 {
  width: 32px; 
  height: 32px;
  background: transparent;
  left: 122px;
  border: 2px solid #dbdbdb;
  bottom: 42px;
  position: relative;
  border-radius: 50px;
}
.ipad2:before{
  content: '';
	width: 14px;
	height: 14px;
	position: absolute;
	top: 7px; 
	left:7px;
	border-radius: 4px;
  border: 2px solid #bfbfbf;
}

Code above included, 3D effect , Shadow, Screen background, and all of the parts.

The HTML

<div class='ipad'></div>

<div class='ipad2'></div>

Boyaa....... Finish . Suprise... See this Big Ipad .

Update

Soon , i will add jquery Slide to Unlock.