David HC

Senin, 18 Maret 2013

by David Hosana // 05.08 In
Demo - Free templates
Copyright © urang-kurai2012-2014 - west sumatera-Boekittinggi
11:40 AM

Rabu, 30 Januari 2013

Cool CSS Loading Animation

by David Hosana // 03.43 In ,
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

Rabu, 23 Januari 2013

Weekly Freebies: Magie One Page template

by David Hosana // 17.30 In
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 !

Kamis, 17 Januari 2013

Pure CSS iPad Construction

by David Hosana // 04.24 In
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

Sabtu, 12 Januari 2013

Build IPad with pure CSS

by David Hosana // 21.57 In
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.

Follow us on Facebook