Tiger Bird Webdesign

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>