Tiger Bird Webdesign: 2014

Wednesday, 10 December 2014

Christmas Candle With jQuery

Christmas Candle With jQuery

Place the mouse pointer over the wick
to put on the fire and click to blow it out.

In my last post I designed a Christmas tree so I felt like making another thing related to Christmas.

This time it is a Christmas candle which you can lit and blow out. The fire and the candle parts are created by div elements. We want to lit the fire when we roll over the candle wick with the mouse. This is done by the mouseover event inside the HTML code.

Now, we want that the candle glimmers in the dark so we use jQuery because with it it's easy to write a code for animated effects. The glimmer effect is created by changing the opacity of the div fire element with the following syntax animate( {opacity:"+= or -= some number between 0 to 1"},{duration:milliseconds});. "+=" creates a fade in effect and "-=" a fade out effect.

By clicking the fire, the candle should stop glimmering. We put the onclick event inside the HTML code and connect it with the function called blow(). jQuery hide() hides the fire element.

HTML & CSS & JavaScript Code

<!Doctypte html>
<html>
<head>
 <title>Christmas Candle With jQuery </title>
 
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

<script>

var a = document.getElementById("candle_fire_two");

function ignite(){ 

 setInterval(glimmer,1000); 

function glimmer() {
$("#candle_fire_one").animate(
{opacity:"+=0.7"},{duration:900}
);
$("#candle_fire_one").animate(
{opacity:"-=0.5"},{duration:900}
);
$("#candle_fire_two").animate( 
{opacity:"+=0.6"},{duration:1000}
);
$("#candle_fire_two").animate(
{opacity:"-=0.3"},{duration:1000}
);

var b = document.getElementById("candle_fire_two");
b.addEventListener("click",blow,false);
b.attachEvent("click",blow);

function blow() {
$("#candle_fire_one").hide();
$("#candle_fire_two").hide();
}

}
}

</script>
 
<style>


#candle_base
{position:relative;
top:100px;
left:105px;
width:50px;
height:75px;
background-color:E60000;
}

#candle_top
{position:absolute;
top:-10px;
width:50px;
height:20px;
background-color:orange;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}

#candle_bottom
{position:absolute;
top:65px;
width:50px;
height:20px;
background-color:E60000;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
z-index:2;
}


#candle_wick
{position:absolute;
top:-20px;
left:23px;
width:5px;
height:20px;
background-color:#663300;
}


#candle_fire_one
{position:absolute;
left:19px;
top:-25px;
width:15px;
height:20px;
background-color:blue;
box-shadow:
-1px -1px 20px blue,
-1px -1px 50px blue,
1px 1px 20px blue,
1px 1px 50px blue;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
opacity:0;
}


#candle_fire_two
{position:absolute;
left:12px;
top:-65px;
width:30px;
height:60px;
background-color:#FFFF66;
opacity:0;
box-shadow:
1px 1px 50px #FFFF66,
-1px -1px 50px #FFFF66,
1px 1px 10px #FFFF66,
-1px -1px 10px #FF3300,
-1px -1px 30px #FFFF66,
2px 2px 20px #FFFF66,
-2px -2px 20px #FFFF66,
3px 3px 50px #FF3300,
-3px -3px 50px #FF3300,
4px 4px 100px #FFFF66,
-4px -4px 100px #FF3300;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#left_ball
{position:absolute;
top:50px;
left:-30px;
width:60px;
height:60px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#75A319;
z-index:3;
}

#right_ball
{position:absolute;
top:60px;
left:20px;
width:40px;
height:40px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#DAB5FF;
z-index:3;
}


#back_ball
{position:absolute;
top:20px;
left:30px;
width:70px;
height:70px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:#CCFF66;
z-index:0;
}


#bg23
{position:relative;
left:20px;
width:250px;
height:250px;
background-color:black;
-webkit-border-radius:10%;
-moz-border-radius:10%;
border-radius:10%;
}


</style>
</head>

<body>
<div id="bg23">
 <div  id="candle_base">
  <div id="candle_top">
</div>
<div id="candle_bottom">
</div>
<div  id="candle_wick">
</div>
<div id="candle_fire_one">
</div>
<div onmouseover="ignite()" onclick="blow()"  id="candle_fire_two">
</div>
<div id="left_ball">
</div>
<div id="right_ball">
</div>
<div id="back_ball">
</div>
</div>
</body>
</html>

Open The Door With CSS Hover

Open the Door!

Drag the mouse over the door and open it!

The door image is placed inside the door frame created with a div element. The door itself is a png image file.

The CSS transform-origin:right property lets the door shrink from the left to the right side which provides the impression as if the door is opening if you put the cursor on top of the door. To show the effect in all browsers the prefixes -ms- for Internet Explorer and -webkit- for all other browsers have to be put in front of transform-origin.

The duration of the animation is set to 5 seconds with the name "open". The @keyframes property describes details of the animation "open". We want to make a lateral rotation of the door therefore we use the rotateY(deg) property. @keyframes needs the prefix -webkit- as well.

Note:the hover effect is not working on a touch screen.

CSS & HTML Code


<html>
<head>
<title>Open the Door!</title>
<style>

#door_frame
{position:absolute;
top:50px;
left:100px;
width:200px;
height:300px;
background-color:#993300;
border-style:outset;
border-color:#CC3300;
border-width:3px;
}

#inside
{position:absolute;
top:10px;
left:8px;
height:290px;
width:184px;
background-color:#00CED1;
}

#door
{position:absolute;
top:-9px;
left:-9px;
}



.animation:hover
{
-ms-transform-origin:right;
-webkit-transform-origin:right;
transform-origin:right;
-webkit-animation: open 5s;
animation: open 5s;
}


@-webkit-keyframes open
{
0%{-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);}

100%{-webkit-transform:rotateY(90deg);
transform:rotateY(90deg);}

}


@keyframes open
{
0%{-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);}

100%{-webkit-transform:rotateY(90deg);
transform:rotateY(90deg);}

}
</style>
</head>

<body>

<div id="door_frame">
<div id="inside">
<div class="animation" id="door">
<img src="door.png"></img>
</div>
</div>
</div>

</body>
</html>

Tuesday, 9 December 2014

Blinking Xmas Tree With JavaScript Math.random()

Click on the top and let it blink

It's Xmas time! When I was walking in downtown seeing all this beautiful Xmas decorations I was inspired to make my own Xmas tree with JavaScript.

A tree usually has a crown and trunk. The crown of the Xmas tree is made of 3 div elements. 1 green div element has white div elements on the right and left side creating a triangle. The decoration balls are also div elements with a border-radius of 50% defined in CSS.

Now the Xmas tree is ready to blink. So let's look at the JavaScript code. We want that the balls change colours randomly in a certain interval. The Math object with the random () method generates random numbers between 0 and 1; the syntax is Math.random().

Next, we define the colours for each ball with document.getElementById("id of the element").style.backgroundColor=#some color. Now, with Math.random() we generate random numbers and if the number is smaller than 0.5 the balls have colour A and if it is bigger than 0.5 they have colour B.

The method setTimeout evaluates the function for each half second generating random numbers and creating the blinking effect.

Save the CSS file with XMas_tree.css and the JavaScript file with XMas_tree.js otherwise it will not work. Our you can change the file name of css and js in the HTML code.

HTML Code



<!Doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css"  href="XMas_tree.css"></style>
<script src="XMas_tree.js" type="text/javascript" language="Javascript"></script> 
</head>

<body onload="blink()">

<div id="xmas_tree">

<div id="top_crown">
 <div id="top_left_cover">
</div>
<div id="top_right_cover">
</div>
<div class="balls" id="top_ball_one">
</div>
<div class="balls" id="top_ball_two">
</div>
</div>
<div id="mid_crown">
 <div id="mid_left_cover">
</div>
<div id="mid_right_cover">
</div>
<div class="balls" id="mid_ball_one">
</div>
<div class="balls" id="mid_ball_two">
</div>
<div class="balls" id="mid_ball_three">
</div>
</div>
<div id="trunk">
</div>
</div>

CSS Code


#xmas_tree
{position:relative;
left:200px;
width:300px;
height:300px;
}


#top_crown
{position:absolute;
top:50px;
width:110px;
height:50px;
background-color:#336600;
}


#top_left_cover
{position:absolute;
left:-30px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(135deg);
-moz-transform:skew(135deg);
-o-transform:skew(135deg);
-webkit-transform:skew(135deg);
transform:skew(135deg);
}

#top_right_cover
{position:absolute;
left:70px;
width:70px;
height:50px;
background-color:white;
-ms-transform:skew(45deg);
-moz-transform:skew(45deg);
-o-transform:skew(45deg);
-webkit-transform:skew(45deg);
transformt:skew(45deg);
}


/*top balls*/

#top_ball_one
{position:absolute;
left:25px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50p%;
-webkit-border-raidus:50%;
border-radius:50%;
}


#top_ball_two
{position:absolute;
left:65px;
top:15px;
height:20px;
width:20px;
background-color:orange;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}


/*middle crwon*/

#mid_crown
{position:absolute;
top:100px;
width:110px; 
height:50px;
background-color:#336600;
}
 
#mid_left_cover
{position:absolute;
left:-30px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(145deg);
-moz-transform:skew(145deg);
-o-transform:skew(145deg);
-webkit-transform:skew(145deg);
transform:skew(145deg);
}

#mid_right_cover
{position:absolute;
left:90px;
width:50px;
height:50px;
background-color:white;
-ms-transform:skew(35deg);
-moz-transform:skew(35deg);
-o-transform:skew(35deg);
-webkit-transform:skew(35deg);
transformt:skew(35deg);
}




/*mid balls*/
#mid_ball_one
{position:absolute;
top:10px;
left:15px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}


#mid_ball_two
{position:absolute;
top:20px;
left:45px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}

#mid_ball_three
{position:absolute;
top:10px;
left:75px;
width:20px;
height:20px;
background-color:orange;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}



#trunk
{position:absolute;
left:43px;
top:150px;
width:20px;
height:30px;
background-color:#663300
;
}

JavaScript Code



function blink(){
var r = Math.random();

if (r<0.5){
document.getElementById("top_ball_one").style.backgroundColor = "red";
document.getElementById("top_ball_two").style.backgroundColor = "#CCCCFF";
document.getElementById("mid_ball_one").style.backgroundColor = "#00FF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FF33CC";
document.getElementById("mid_ball_three").style.backgroundColor =" #33CCFF";
}

if (r>0.5){
document.getElementById("top_ball_one").style.backgroundColor = "blue";
document.getElementById("top_ball_two").style.backgroundColor = "lime";
document.getElementById("mid_ball_one").style.backgroundColor = "#FFFF00";
document.getElementById("mid_ball_two").style.backgroundColor = "#FFFF66";
document.getElementById("mid_ball_three").style.backgroundColor = "#FF5050";
}

setTimeout(blink,500);
}

Monday, 8 December 2014

Futuristic Clock With Javascript And jQuery

Futuristic Clock With JavaScript

How about a futuristic looking clock for a web widget?

For fade out and fade in animation we use JavaScript and jQuery.

The clock is designed with CSS. Each panel has its own div element. The opacity of the green squares is set to 0 meaning that they are basically invisible. The panel showing the actual time is another div element. Never put the div elements associated with the green squares inside the panel element! Because if you set JavaScript both to a parent and child elements the script will not fire. Both codes have to be in different elements.

Now, we have designed the clock and the squares so we are ready to make them work together. First of all, the time should be shown in the center panel so we create a Date() object with JavaScript. Get the hours with getHours(), the minutes with getMinutes() and the seconds with getSeconds() and concatenate the methods with the date object.

Next, for each second passed by a square should fade out and the next should fade in. This is can be done with the animate() method of jQuery which is a part of JavaScrip library and is very useful.

The elements are choosen through their ids with ("$id of the element") and the animation is created with animate({}). The details of the animation are described in the curly brackets. We want that the squares will fade in gradually so we use opacity:"+=1". After 1 s has passed we want to make sure that the same square will fade out so we write opacity:"-=1". Note that if you use hide() once the square has vanished the same square will never appear again.

To link the div squares with the seconds we use the if/else conditional. The if/else conditional is inside the clock() function so we can use the variables declared previously.

HTML Code


<!Doctype html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>


<!- - you can use your own file name - ->
<script src=”futuristic-black-clock.js”  type=”text/javascript” language=”Javascript”></script>

<link rel=”stylesheet” type = “text/css” href=”futuristic-black-clock.css”>
</head>

<body onload="clock()">
<div id="clock">
<div id="chronograph">
</div>
<div>
 <div id="square0">
</div>
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
<div id="square4">
</div>
<div id="square5">
</div>
<div id="square6">
</div>
<div id="square7">
</div>
<div id="square8">
</div>
<div id="square9">
</div>
</div>
</div>
</body>
</html>

JavaScript Code

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>


var c = document.getElementById("chronograph");
c.addEventListener("load", clock,true);

function zero(i){
if(i<10){
i = "0" + i;
}
return i;
}

function clock(){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
m = zero(m);
s = zero(s);
setTimeout(clock,1000);
document.getElementById("chronograph").innerHTML = h + ":"+ m + ":"+ s;


if(s==0){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:500});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:500});
  }

 else if (s==10){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==20){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==30){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==40){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==50){
 $("#square0").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square9").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 


 else if (s==1){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==11){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==21){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==31){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==41){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==51){
 $("#square1").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square0").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==2){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==12){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==22){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==32){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==42){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==52){
 $("#square2").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square1").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==3){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==13){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==23){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==33){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==43){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==53){
 $("#square3").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square2").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==4){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==14){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==24){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==34){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==44){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==54){
 $("#square4").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square3").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==5){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==15){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==25){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==35){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==45){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }

else if (s==55){
 $("#square5").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square4").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==6){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==16){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==26){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==36){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==46){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }


 else if (s==56){
 $("#square6").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square5").animate(
  {opacity:"-=1"},
  {duration:100});
  }

 else if (s==7){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==17){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==27){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==37){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==47){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==57){
 $("#square7").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square6").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==8){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==18){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==28){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==38){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==48){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==58){
 $("#square8").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square7").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else if (s==9){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==19){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==29){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==39){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==49){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
else if (s==59){
 $("#square9").animate(
  {opacity:"+=1"},
  {duration:100});
 $("#square8").animate(
  {opacity:"-=1"},
  {duration:100});
  }
 else{;}
 }

CSS Code

<style>




#clock
{position:relative;
top:150px;
left:250px;
width:125px;
height:95px;
background-color:black;
border-style:outset;
border-width:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
broder-color:black;
}

#chronograph
{position:absolute;
top:40px;
left:35px;
height:25px;
width:100px;
color:#19FF19;
font-weight:bold;
}

#square0
{position:absolute;
left:5px;
top:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square1
{position:absolute;
top:5px;
left:35px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square2
{position:absolute;
top:5px;
left:65px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square3
{position:absolute;
top:5px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square4
{position:absolute;
top:35px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square5
{position:absolute;
top:65px;
left:95px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square6
{position:absolute;
top:65px;
left:65px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square7
{position:absolute;
top:65px;
left:35px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square8
{position:absolute;
top:65px;
left:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}

#square9
{position:absolute;
top:35px;
left:5px;
width:25px;
height:25px;
background-color:#19FF19;
box-shadow:
1px 1px 10px #19FF19,
-1px -1px 10px #19FF19;
opacity:0;
}
</style>

Wednesday, 3 December 2014

Name Tag With Border Style

Fat Ladies

Here is another text design looking like a name tag of your clothes. The stitched are created with border-style: dashed. For the top use border-top-style and for the bottom use border-bottom-style. Change the text inside the label and make your own one!



<!Doctype html>
<html>

<head>

<style>
#label
{
width:300px;
height:100px;
top:30px;
left:100px;
background-color:white;
box-shadow:
1px 1px 5px gray,
-1px -1px 5px gray;
position:absolute;
}


#top_stitch_background
{
top:10px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}

#top_stitch
{top:10px;
border-top-style:dashed;
border-top-color:#708090; /*SlateGray*/
border-top-width:1px;
}


#brand_text
{font-size:200%;
top:30px;
text-align:center;
position:relative;
}

#bottom_stitch_background
{
top:50px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}


#bottom_stitch
{top:50px;
border-bottom-style:dashed;
border-bottom-color:#708090; /*SlateGray*/
border-bottom-width:1px;
}
</style>

</head>

<body>

<div id="label"> 

<div id="top_stitch_background">
<div id="top_stitch"></div>
</div>

<div id="brand_text"> Fat Ladies </div>

<div id="bottom_stitch_background">
<div id="bottom_stitch"></div>
</div>

</div >

Monday, 1 December 2014

Blinking Neon Sign With jQuery

Welcome!

You can spice up your website with some JavaScript animation. The example shows a text which fades out and fades in 10 times in a row with the while loop.

jQuery ―which uses the $ sign in front of each element ―makes it easy to write codes for animations. The blinking starts with the value var i=0 and finished after blinking for 10 times which is set as while(i<10). In function() you include the fadeOut() and fadeIn() methods to create the blinking effect. For details, have a look at the code!

CSS, HTML & JavaScript Code



<!Doctype HTML>

<html>

<head>
<title>Blinking Neon Sign With jQuery </title>

<style>


#welcome
{
position:absolute;
padding:40px;
font-size:500%;
color:white;
text-shadow:
2px 2px 10px DeepPink,
2px 4px 20px DeepPink,
2px 6px 30px DeepPink,
2px 8px 50px DeepPink;
}


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" language="Javascript">
</script>

<script>
//this is the jQuery code
var i=0
while(i<10){
$(document).ready(function(){
$("#welcome").fadeOut("slow").fadeIn("slow");
});
i++;
}
</script>



</head>

<body>

<div id="welcome">Welcome!</div>

</body>

</html>

Thursday, 27 November 2014

CSS Flower

Let flowers bloom with CSS!

The basic structure of the petals are made with 10 div elements. The unique shape of a petal is created by CSS border-top-left-radius and border-bottom-right-radius. The greater the value the rounder the corner gets.

HTML & CSS Code


<!Doctype html>
<html>
<head>
<style>
#one
{position:absolute;
top:100px;
left:200px;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;}

#two
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(30deg);\
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:left bottom;
transform:rotate(30deg);
transform-origin:left bottom;}


#three
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(60deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(60deg);
-webkit-transform-origin:left bottom;
transform:rotate(60deg);
transformt-origin:left bottom;}


#four
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(90deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(90deg);
-webkit-transform-origin:left bottom;
transform:rotate(90deg);
transformt-origin:left bottom;}

#five
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(120deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:left bottom;
transform:rotate(120deg);
transformt-origin:left bottom;}


#six
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(150deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(150deg);
-webkit-transform-origin:left bottom;
transform:rotate(150deg);
transformt-origin:left bottom;}


#seven
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(180deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(180deg);
-webkit-transform-origin:left bottom;
transform:rotate(180deg);
transform-origin:left bottom;}


#eight
{position:relative;
height:80px;
width:50px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(210deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(210deg);
-webkit-transform-origin:left bottom;
transform:rotate(210deg);
trasform-origin:left bottom;}


#nine
{position:relative;
height:80px;
width:50px;
top:20px;
left:20px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(30deg);
-ms-transform-origin:left bottom;
-webkit-transform:rotate(30deg);
-webkit-trasform-origin:left bottom;
transform:rotate(30deg);
trasform-origin:left bottom;}



#ten
{position:relative;
left:5px;
height:80px;
width:50px;
left:-5px;
border-width:2px;
border-style:solid;
border-color:#7B68EE;
background-color:#87CEFA;
border-top-left-radius:500px;
border-bottom-right-radius:500px;
-ms-trasform:rotate(60deg);
-ms-transformt-origin:left bottom;
-webkit-transform:rotate(60deg);
-webkit-transform-origin:left bottom;
transform:rotate(60deg);
transform-origin:left bottom;
}


#circle
{position:absolute;
border-color:orange;
border-style:solid;
border-width:2px;
width:50px;
height:50px;
top:170px;
left:175px;
border-radius:50%;
background-color:yellow;
}

</style>

</head>
<body>

<div id="one">
<div id="two">
<div id="three">
<div id="four">
<div id="five">
<div id="six">
<div id="seven">
<div id="eight">
<div id="nine">
<div id="ten">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="circle">
</div>
</div>

</body>
</html>

Wednesday, 26 November 2014

Sweeten Your Text With CSS: Chocolate

Chocolate

I love chocolate! So why not making a chocolate like logo? In the example above, I have used 3 different colors: sienna (#D2691E), maroon (#800000) for the highlights and the shadows and chocolate (#D2691E) for the whole bar. It should look like a chocolate bar so I have used border-style:outset in the CSS code. The highlight and shadows of the letters are made with the text-shadow property. After working on this design for 30min I have a graving for chocolate!

CSS & HTML Code



<!Doctypte html>
<html>
<head>
<style>
.Chocolate
{
top:50px;
left:30px;
position:absolute;
width:450px;
height:150px;
border-style:outset;
border-width:10px;
border-radius:7px;
border-color:#D2691E;
background-color:#D2691E;/* chocolate*/
}


#Chocolate
{
font-size:300%;
color:#D2691E;/*Sienna*/
text-shadow: 
0px 1px 0px #800000, /*Maroon*/
1px 1px 0px #800000, 
2px 1px 0px #800000, 
3px 1px 0px #800000, 
1px -2px 1px white,
-1px -2px 1px white,
-2px -1px 0px #800000,
1px 2px 0px #800000, 
2px 2px 0px #800000,
3px 2px 0px #800000,
1px 3px 0px #800000,
2px 3px 0px #800000,
3px 3px 0px #800000,  
1px 4px 0px #800000,
2px 4px 0px #800000,
3px 4px 0px #800000,
1px 5px 0px #800000,
2px 5px 5px #800000,
-1px 0px 0px #800000,
-2px 0px 0px #800000,
-2px -2px 0px #800000,
-2px  1px 0px #800000,
-2px 2px 0px #800000,
-2px 3px 0px #800000,
-3px 5px 5px #800000,
1px -1px 5px black,
1px -2px 0px black,
1px -3px 2px black,
2px 0px 0px black,
3px 0px 0px black,
1px 1px 0px black,
-3px 3px 1px black;
}
</style>
</head>

<body>
<div class="Chocolate">
<h1>
<span id="Chocolate">Chocolate</span></h1>
</div>
</body>

</html>

Tuesday, 25 November 2014

CSS Flex: Making A Sunblock

Here I have designed a window sun block.

The CSS display:flex property makes it super easy to create same sized HTML div elements with different colors.

HTML

The "box" div element contains several div elements describing the color of each element with style="background-color:color".

CSS

The size of the div elements is defined by flex:1. The prefix -webkit- and -ms- is necessary if you want to display it in Safari and Internet Explorer. Don't forget to write display:flex for the "box" div element.

CSS&HTML Code


<!Doctypte html>
<html>

<body>

<style>
#box
{width:500px;
height:200px;
display:-webkit-flex;
display:flex;
}

#box .white {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}

#box .red {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}

.red
{-webkit-border-bottom-right-radius:50px;
-moz-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-moz-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
border-style:solid;
border-width:1px;
border-color:brown;
}

.white
{-webkit-border-bottom-right-radius:50px;
-moz-border-bottom-right-radius:50px;
border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-moz-border-bottom-left-radius:50px;
border-bottom-left-radius:50px;
border-style:solid;
border-width:1px;
border-color:brown;
}

</style>
</head>

<body>

<div id="box">

<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div  class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
<div class="red" style="background-color:red;"></div>
<div  class="white" style="background-color:white;"></div>
</div>

</div>

</body>

</html>

Monday, 24 November 2014

Jeans Style Logo With CSS

Blue Jeans

Made in Schlaraffenland

The border-style allows you to choose different border styles. In the designs above I have used the border-style:dashed to create a label which looks like a stitched one. For details, have a look at the code.

HTML & CSS Code

<!Doctype html>
<html>

<head>
<title>Jeans Style Logo With CSS</title>

<style>

#jeans_logo
{
top:20px;
left:100px;
width:200px;
height:250px;
background-color:#CD853F;/*Peru*/
outline: #191970 /*midnight blue*/ solid 20px;
position:absolute;
}


.jeans
{color:#8B4513;/*sadle brown*/
}

#top_border_back
{
top:20px;
background-color:#8B4513;
position:relative;
}

#top_border
{
top:20px;
border-top-style:dashed;
border-top-color:#D2B48C; /*Tan*/
border-top-width:2px;
}

#bottom_border_back
{
top:220px;
background-color:#8B4513;
position:relative;
}

#bottom_border
{
top:220px;
border-bottom-style:dashed;
border-bottom-color:#D2B48C; /*Tan*/
border-bottom-width:2px;
}

#blue_jeans
{
top:60px;
font-weight:bold;
text-align:center;
position:relative;
font-size:200%;
}

#made_in
{
top:80px;
font-weight:bold;
text-align:center;
position:relative;
font-size:100%;
}



</style>
</head>

<body>


<div class="jeans" id="jeans_logo">

<div class="jeans" id="top_border_back">

<div class="jeans" id="top_border">
</div>
</div>
<div class="jeans" id="bottom_border_back">
<div class="jeans" id="bottom_border">
</div>
</div>
<div class="jeans" id="blue_jeans">
Blue Jeans</div>
<div class="jeans" id="made_in">
Made in Schlaraffenland</div>
</div>

</body>

</html>

Friday, 21 November 2014

What Time Is It?

Pink & Black Clock With jQuery

Here, I've created a clock with JavaScript.
First of all, the clock should start working the page has been loaded so we use the onload event. We call the function "clock()".

HTML

To connect the event with the function you have to write onload="clock()" in the body element of the HTML code. The onload event is only valid in the body element. For example, if you put onload in the button element it will do nothing.

JavaScript

We want to get the hours, minutes and seconds so we use the following methods: getHours(), getMinutes() and getSeconds(). The Date() object makes it possible that the actual time is shown. The last line of the code put the hours, minutes and seconds with + together. You have to put something between the variables to make sure everything is displayed; this time I've put colons in between.

HTML Code

<!DOCTYPE html>

<html>
<head>
<Link rel="stylesheet" type="text/css" href="clock.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="clock.js" type="text/javascript" language="Javascript"></script>
<title>Clock</title>
</head>



<body onload="clock()">

<div id="outside">
<div id="inside">
<div id="chronograph" >

</div>
</div>
</div>

</body>

</html>

CSS Code

#outside
{position:relative;
width:110px;
height:110px;
background-color:#FF0066;
border-radius:50%;
background:linear-gradient(90deg,#FF99CC,#FF0066);
}

#inside
{position:absolute;
width:100px;
height:100px;
top:5px;
left:5px;
background-color:black;
border-radius:50%;
}



#chronograph
{
position:absolute;
width:60px;
height:60px;
top:40px;
left:18px;
border-radius:50%;
background-color:black;
color:#FF99CC;
text-align:center;
font-size:120%;
text-shadow:
1px 1px 10px #FF0066;
-1px -1px 10px #FF0066;
}

JavaScript Code

function clock() {
 var d = new Date();
 var s = d.getSeconds();
 var m = d.getMinutes();
 var h = d.getHours();
 setTimeout(clock,1000);
 document.getElementById("chronograph").innerHTML =  h + ":" + m + ":" + s;

Thursday, 20 November 2014

Red Neon Sign With CSS

T-Bone

I wanted to try other colors for a neon style sign and I though red would look nice. So I've used red for text-shadow in CSS. Here is its structure:

text-shadow {y px x px zpx colour;}

The first px value shifts the text horizontally, the second vertically and the last value defines the degree of the blur.

CSS&HTML Code


<!DOCTYPE html>
<head>

<style>
#T_Bone{
color:orange;
padding:40px;
font-size:500%;
text-shadow: 
0px 1px 0px red,
0px 2px 0px red,
-5px -5px 20px red,
-5px 5px 10px red,
5px 5px 20px red,
5px -5px 10px red;
}
</style>

</head>

<body>
<div id="box_eleven">
<div id="T_Bone">
T-Bone</div>
</body>
</html>

Wednesday, 19 November 2014

Retro Telly With CSS

Retro Telly With CSS

This TV includes 6 div elements which display the TV outer box ("telly_frame"), the screen ("screen"), two antennas ("antenna_left", "antenna_right") and the two buttons on the left ("upper_button", "downside_button"). All div elements are put inside the outer box to position the rest of the elements absolute to this element.

The screen, the buttons are relative to the box which is described with the property position:absolute. The metallic effect of the buttons is created with the CSS background:linear-gradient property and don't forget to put the prefixes -o-, -moz- and -webkit- to show it in all browsers.

CSS & HTML CODE


<!Doctype html>

<html>

<head>
<style>
#telly_frame
{position:relative;
top:100px;
left:100px;
width:200px;
height:145px;
background-color:#01DF01;
border-style:solid;
border-color:#21610B;
border-width:3px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
float:right;

}


#antenna_left
{position:absolute;
left:5px;
top:-77px;
width:5px;
height:75px;
-ms-transform-origin:bottom left;
-webkit-transform-origin:bottom left;
transform-origin:bottom left;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
background-color:#BDBDBD;
background:-o-linear-gradient(gray,#585858);
background:-moz-linear-gradient(gray,#585858);
background:-webkit-linear-gradient(gray,#585858);
background:linear-gradient(gray,#585858);
}


#antenna_right
{position:absolute;
left:10px;
top:-77px;
width:5px;
height:75px;
-ms-transform-origin:bottom right;
-webkit-transform-origin:bottom right;
transform-origin:bottom right;
-ms-transform:rotate(315deg);
-webkit-transform:rotate(315deg);
transform:rotate(315deg);
background-color:#BDBDBD;
background:-o-linear-gradient(gray,#585858);
background:-moz-linear-gradient(gray,#585858);
background:-webkit-linear-gradient(gray,#585858);
background:linear-gradient(gray,#585858);
}

#screen
{position:absolute;
top:20px;
left:20px;
height:100px;
width:125px;
background-color:#848484;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border-width:3px;
border-style:solid;
border-color:#585858;
float:right;

}



#upper_button
{position:absolute;
top:20px;
left:160px;
width:30px;
height:30px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:gray;
background:-o-linear-gradient(45deg,gray,white,gray);
background:-webkit-linear-gradient(45deg,gray,white,gray);
background:-moz-linear-gradient(45deg,gray,white,gray);
background:linear-gradient(45deg,gray,white,gray);
float:right;

}

#downside_button
{position:absolute;
top:60px;
width:30px;
height:30px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:gray;
background:-o-linear-gradient(135deg,gray,white,gray);
background:-webkit-linear-gradient(135deg,gray,white,gray);
background:-moz-linear-gradient(135deg,gray,white,gray);
background:linear-gradient(135deg,gray,white,gray);
float:right;

}
</style>
<title>Retro Telly</title>

</head>

<body>

<div id="telly_frame">
 <div id="screen">
 </div>
<div id="antenna_left">
 </div>
<div id="antenna_right">
 </div>
<div id="upper_button">
 <div id="downside_button">
 </div>
</div>
</body>
</html>

Tuesday, 18 November 2014

Sweeten Your Text With CSS: Mille-Feuille

Mille-Feuille Style Text With CSS

Mille-Feuille

This text design has been inspired by the pastry mille-feuille. I've used 4 different colours in the CSS text-shadow property to express the different layers of the cake. If you create several layers in text-shadow separate them with "," and just the last line with ";" to make it work.

HTML&CSS


<!Doctype HTML>
<html>
<head>
<title>Mille-Feulle Text</title>
<style>

#Mille_Feuille
{
top:50px;
left:50px;
position:absolute;
color:#D2691E;
font-size:500%;
text-shadow: 
0px 1px 0px #D2691E, 
0px 2px 0px #D2691E,
0px 3px 0px #D2691E,
0px 4px 1px #FFE4C4,
0px 5px 1px #FFE4C4, 
0px 6px 4px #FF0000, 
0px 7px 1px #FFE4C4, 
0px 8px 0px #FFE4C4, 
0px 9px 0px #FFE4C4, 
0px 10px 1px #D2691E, 
0px 11px 0px #D2691E,
0px 12px 1px #D2691E,
0px 13px 0px #FFE4C4,
0px 14px 0px #FFE4C4,
0px 15px 0px #FFE4C4,
0px 16px 4px #FF0000, 
0px 17px 0px #FFE4C4,
0px 18px 0px #FFE4C4,
0px 19px 0px #FFE4C4,
0px 20px 0px #FFE4C4,
0px 21px 1px #D2691E,                
0px 22px 0px #D2691E, 
0px 23px 1px #D2691E, 
0px 24px 0px #FFE4C4,
0px 25px 0px #FFE4C4,
0px 26px 0px #FFE4C4,               
0px 27px 4px #FF0000, 
0px 28px 0px #FFE4C4,
0px 29px 0px #FFE4C4,
0px 30px 0px #FFE4C4,
0px 31px 0px #FFE4C4,
0px 32px 1px #D2691E, 
0px 33px 0px #D2691E, 
0px 34px 1px #D2691E,
0px 35px 0px #FFE4C4,
0px 36px 0px #FFE4C4,
0px 37px 0px #FFE4C4,
0px 38px 4px #FF0000,
0px 39px 0px #FFE4C4,
0px 40px 0px #FFE4C4,
0px 41px 0px #FFE4C4,
0px 42px 0px #D2691E,
0px 43px 0px #D2691E,
0px 44px 0px #D2691E,
0px 45px 4px #FFE4C4,
0px 46px 0px #FFE4C4,
0px 47px 2px #FF0000,
0px 48px 1px #FFE4C4,
0px 49px 1px #D2691E,
0px 50px 0px #D2691E;
}

/*
#D2691E chocolate for the top
#FFE4C4 bisque for the cream
#FF0000 red for the strawberries
#DC143C for crimson*/


</style>
</head>

<body>

<div id="Mille_Feuille">
Mille-Feuille</div>
</body>

</html>

Monday, 17 November 2014

Fading Buttons With CSS Flex

Fading Buttons With CSS Flex

Blue

Yellow

Green

Red

Orange

Pink

Here we have same sized buttons. CSS flex property makes it easy to create same sized objects. To make them more exciting I have added the transition property to them as well. The flex property can also be wrapped by using flex-wrap:wrap. To show it in Chrome, Safari and Opera don't forget to put the prefix -webkit- in front of flex-wrap.The border-radius has been set to 50% for the circles.
Note that hover will not work on a tablet.

HTML&CSS


<!DOCTYPE HTML>

<html>
<head>
<title>Fading Buttons With CSS Flex</title>
<style>
#text
{position:relative;
top:10px;
}
#boxten
{position:relative;
font-size:120%;
width:200px;
height:400px;
}

#box
{position:absolute;
width:600px;
height:350px;
display:-webkit-flex;
-webkit-flex-wrap:wrap;
diplay:flex;
flex-wrap:wrap;
}


#box .button
{width:100px;
height:100px;
}


.button
{
margin:20px;
padding:20px;
opacity:0.5;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
text-align:center;
font-size:200%;
}

.button:hover
{opacity:1.0;
-webkit-transition-duration:3s;
transition-duration:3s;}



</style>
</head>

<body>
<div id="boxten">
<div id="box">
<div class="button"style="background-color:blue;">
 Blue</div>
<div class="button" style="background-color:yellow;">
 Yellow </div>
<div class="button" style="background-color:green;">
Green </div>
<div class="button" style="background-color:red;">
 Red</div>
<div class="button" style="background-color:orange;">
 Orange</div>
<div class="button" style="background-color:pink;">
Pink </div>
</div>
</body>

</html>