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>

Friday, 14 November 2014

Text Animation With Hover

Honey Bunny!

If you move your mouse over the text it looks like if it's blown away by the wind.
The code is pretty straightforward. Use the text-shadow property of CSS and put different px-values. To make the effect as if the text blows away set the last 2 pixel values relatively high. The hover property enables you to start the effect by putting the mouse pointer over the text.

CSS&HTML

<html>
<head>
<title> Text Animation With Hover</title>
<style>

#honey_bunny
{position:absolute;
top:50px;
left:200px;
font-size:200%;
color:#CC6600;
}

div:hover
{
text-shadow:
10px -10px 10px,
20px -20px 20px,
30px -20px 30px,
50px -40px 40px,
80px -50px 50px,
100px -50px 60px,
110px -70px 70px,
150px -70px 80px;
opacity:0;
-webkit-transition-duration:5s;
transition-duration:5s;
}

</style>
</head>
<body>
 
<div id="honey_bunny">
Honey Bunny!</div>
</div>

</div>
</body>
</html></div>

Thursday, 13 November 2014

Neon Signs With CSS

Neon Sign Effect With CSS

24 Hours

Again, css text-shadow property allows you to create interesting effects with the text.
To make a neon-like effect there a is a lot of blur added (third value of the text-shadow property). Have a look-see at the code!

CSS&HTML Code

<!Doctype HTML>
<html>
<head>
<title>Neon Sign With CSS</title>

<style>

#box
{position:relative;
background-color:black;
width:300px;
height:400px;
}

#text
{position:relative;
top:20px;
}

#Twentyfour
{
font-size:300%;
color:white;
text-shadow:
-1px -1px 10px lime,
1px -1px 10px lime,
1px 1px 10px lime,
-1px 1px 10px lime,
-10px 10px 30px lime,
10px -10px 30px lime,
10px 10px 30px lime,
-10px 10px 30px lime;
}

</style>

</head>

<body>

<div id="box">

<h1>
<span id="Twentyfour">24 Hours</span></h1>
</div>
<div id="text">
</div>
</body>
</html>

Wednesday, 12 November 2014

Designing Text With CSS: Liquorice

LIQUORICE

I have created a liquorice candy inspired text above.
The CSS text-shadow property allows you to create many layers of the same character. The first ten vertical layers (which are the 2nd px-values in the CSS code) are in pink, the second ten layers in black and so forth.

CSS&HTML CODE


<html>
<head>
<title> Designing Text With CSS: Liquorice</title>

<style>

#Liquorice
{
top:50px;
left:50px;
position:absolute;
color:#FF3366;
font-size:300%;
text-shadow: 
0px 1px 0px #FF3366, /*shocking pink*/
0px 2px 0px #FF3366,
0px 3px 0px #FF3366,
0px 4px 0px #FF3366,
0px 5px 0px #FF3366, 
0px 6px 0px #FF3366, 
0px 7px 0px #FF3366, 
0px 8px 0px #FF3366, 
0px 9px 0px #FF3366, 
0px 10px 0px #FF3366, 
0px 11px 0px black,
0px 12px 0px black,
0px 13px 0px black,
0px 14px 0px black,
0px 15px 0px black,
0px 16px 0px black,
0px 17px 0px black,
0px 18px 0px black,
0px 19px 0px black,
0px 20px 0px black,
0px 21px 0px #FFFF00, /*corn yellow*/                
0px 22px 0px #FFFF00,
0px 23px 0px #FFFF00,
0px 24px 0px #FFFF00,
0px 25px 0px #FFFF00,
0px 26px 0px #FFFF00,                
0px 27px 0px #FFFF00,
0px 28px 0px #FFFF00,
0px 29px 0px #FFFF00,
0px 30px 0px #FFFF00,
0px 31px 0px black,
0px 32px 0px black,
0px 33px 0px black,
0px 34px 0px black,
0px 35px 0px black,
0px 36px 0px black,
0px 37px 0px black,
0px 38px 0px black,
0px 39px 0px black,
0px 40px 0px black,
0px 41px 0px #FF6600,/*orange*/
0px 42px 0px #FF6600,
0px 43px 0px #FF6600,
0px 44px 0px #FF6600,
0px 45px 0px #FF6600;
0px 46px 0px #FF6600,
0px 47px 0px #FF6600,
0px 48px 0px #FF6600,
0px 49px 0px #FF6600,
0px 50px 0px #FF6600;
}



</style>

</head>

<body>
<div class="Liquorice">
<h1>
<span id="Liquorice">LIQUORICE</span></h1>
</div>
</body>
</html>

Tuesday, 11 November 2014

The Text Is Burning! CSS Effects

Burning Text With CSS

Fire

In the following example, the text looks like if it is burning. The CSS text-shadow property allows you to create this effect. The point is to use 4 different text-shadow colors―yellow, red, orange and brown―with different vertical and blur values. The text itself has white color.

CSS&HTML Code

<html>
<head>
<title>Burning Text With CSS</title>
<style>

#Fire
{
left:50px;
position:absolute;
padding:30px;
font-size:300%;
color:white;
text-shadow: 
0px -1px 10px yellow,
0px -2px 20px yellow,
0px -3px 8px yellow,
0px -15px 25px yellow,
0px -4px 8px red,
0px -5px 5px red,
0px -6px 18px red,
0px -13px 30px red,
0px -7px 14px orange,
0px -8px 10px orange,
0px -9px 8px orange,
0px -20px 15px orange,
0px -10px 2px brown,
0px -11px 2px brown;
}

</style>

</head>

<body>


<div id="Fire">
<h1 style="text-align:center">
Fire</h1>
</div>
</body>
</html>

Monday, 10 November 2014

Title Design: Glowing Letters

Text Design with CSS

W e l c o m e

CSS text-shadow attribute helps you to create interesting effects with the text.

CSS

The text shadow attribute is as follows:
text-shadow: H px Vpx B px color; The "H px" shifts the text horizontally; if you put a "-" in front of the value the text will shift to the left side.The "V px" shifts the text vertically and if with a "-" it shifts the text to the top.The "B px" defines the degree of the blur.

HTML

To color each character differently like in "Welcome" just use the span element for each character. and don't forget to define each span element with a unique "id" attribute otherwise you are not able to define each character in CSS. If you choose numbers for the id name such as 1, 2, 3 and so forth
CSS will not display the desired effects to those attributes.
Instead choose "one", "two", "three" etc. .

CSS&HTML Code

<html>
<head>
<title>Text Design with CSS</title>
<style>

#box
{position:relative;
background-color:black;
padding:50px;
top:50px;
left:10px;
width:400px;
height:100px;
}


#w
{
font-size:300%;
text-shadow: 
1px 1px 0px turquoise,
1px 2px 0px turquoise,
2px 3px 0px turquoise,
2px 4px 0px turquoise,
3px 5px 0px turquoise,
3px 6px 0px turquoise,
4px 7px 0px turquoise,
4px 8px 5px turquoise,
5px -10px 20px turquoise,
10px -5px 20px turquoise,
-1px 1px 20px turquoise;
}

#e
{
font-size:300%;
text-shadow: 
1px 1px 0px #FFD700, /*Gold for some reason if you write yellow it does not show!*/
1px 2px 0px #FFD700, 
2px 3px 0px #FFD700, 
2px 4px 0px #FFD700, 
3px 5px 0px #FFD700, 
3px 6px 0px #FFD700, 
4px 7px 0px #FFD700, 
4px 8px 5px #FFD700, 
5px -10px 20px #FFD700, 
10px -5px 15px #FFD700,
-1px 1px 20px #FFD700;
}

#l
{
font-size:300%;
text-shadow: 
1px 1px 0px #FF1493,/*Deep Pink*/
1px 2px 0px #FF1493,
2px 3px 0px #FF1493,
2px 4px 0px #FF1493,
3px 5px 0px #FF1493,
3px 6px 0px #FF1493,
4px 7px 0px #FF1493,
4px 8px 5px #FF1493,
5px -10px 20px #FF1493,
10px -5px 15px #FF1493,
-1px 1px 20px #FF1493;
}


#c
{
font-size:300%;
text-shadow: 
1px 1px 0px #FFA500, /*orange*/
1px 2px 0px #FFA500,
2px 3px 0px #FFA500,
2px 4px 0px #FFA500,
3px 5px 0px #FFA500,
3px 6px 0px #FFA500,
4px 7px 0px #FFA500,
4px 8px 5px #FFA500,
5px -10px 20px #FFA500,
10px -5px 15px #FFA500,
-1px 1px 20px #FFA500;
}


#o
{
font-size:300%;
text-shadow: 
1px 1px 0px #DA70D6, /*Orchid*/
1px 2px 0px #DA70D6,
2px 3px 0px #DA70D6,
2px 4px 0px #DA70D6,
3px 5px 0px #DA70D6,
3px 6px 0px #DA70D6,
4px 7px 0px #DA70D6,
4px 8px 5px #DA70D6,
5px -10px 20px #DA70D6,
10px -5px 15px #DA70D6,
-1px 1px 20px #DA70D6;
}

#m
{
font-size:300%;
text-shadow: 
1px 1px 0px #7CFC00, /*LawnGreen*/
1px 2px 0px #7CFC00,
2px 3px 0px #7CFC00,
2px 4px 0px #7CFC00,
3px 5px 0px #7CFC00,
3px 6px 0px #7CFC00,
4px 7px 0px #7CFC00,
4px 8px 5px #7CFC00,
5px -10px 20px #7CFC00,
10px -5px 15px #7CFC00,
-1px 1px 20px #7CFC00;
}

#e_second
{
font-size:300%;
text-shadow: 
1px 1px 0px red,
1px 2px 0px red,
2px 3px 0px red,
2px 4px 0px red,
3px 5px 0px red,
3px 6px 0px red,
4px 7px 0px red,
4px 8px 5px red,
5px -10px 10px red,
10px -5px 15px red,
-1px 1px 20px red;}
</style>
</head>

<body>

<div id="box">
<h1>
<span id="w">W</span>
<span id="e">e</span>
<span id="l">l</span>
<span id="c">c</span>
<span id="o">o</span>
<span id="m">m</span>
<span id="e_second">e</span>
</h1>
</div>
</body>
</html>

Friday, 7 November 2014

CSS Hearty Heart

True Heart

Make two div elements in html and use the border-radius property to round the corners. Each corner of the rectangle can be shaped individually. In this example, the top corners are smoothed away with with border-top-left-radius and border-top-right-radius. The left rectangle which is in red has the property position:absolute and is rotated 45°. The left rectangle colored in pink is positioned relatively to the red part and is rotated 270°.

CSS Code

/*the file is called true_heart.css*/
#left_part
{position:absolute;
top:200px;
left:300px;
width:50px;
height:80px;
background-color:pink;
-ms-transform:rotate(45deg);
-webkit-trasform:rotate(45deg);
transform:rotate(45deg);
border-top-left-radius:100px;
border-top-right-radius:100px;
}

#right_part
{position:relative;
top:-50px;
width:50px;
height:80px;
background-color:red;
-ms-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
-ms-transform-origin: right bottom;
-webkit-transform-origin: right bott0m;
transform-origin: right bottom;
border-top-left-radius:100px;
border-top-right-radius:100px;
}

HTML Code

<!Doctype html>
</html>
<head>
<title>True Heart</title>
<link rel="stylesheet" type="css/text" href="true_heart.css">
</head>

<body>

<div id="left_part">
<div id="right_part">
</div>
</div>
</body>

</html>

Thursday, 6 November 2014

CSS Cherry Blossom

Cherry Blossom

Today, I've created a cherry blossom with CSS and HTML.
In this example, the most important point in this example is to position the elements correctly.

The HTML & CSS Code

All the leaves and pollen of the cheery blossom are child elements
of the flower center which has the id "pollen1" meaning that the div elements are inside the "pollen1" div element. All child elements are positioned relative to its parent element. The CSS code "pollen1" has the property position:relative and the other elements have position:absolute.
And how do you make the pointed parts of the leaves? I`ve used white squares which have been rotated and they are the child elements to the the leaf elements.

HTML & CSS Code

<!Doctype Html>

<html>
<head>
<title> Flower </title>
<style>

#box
{position:relative;
left:100px;
width:300px;
height:350px;
}


#text
{position:relative;
font-size:120%;
top:20px;
}

#pollen1
{position:relative;
top:200px;
left:200px;
width:50px;
height:50px;
background-color:#FFCC00;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;
}


#pollen3
{position:absolute;
left:0px;
top:-25px;
width:20px;
height:20px;
background-color:yellow;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
z-index:2;
}

#pollen4
{position:absolute;
left:25px;
top:-25px;
width:20px;
height:20px;
background-color:yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;
}



#pollen6
{position:absolute;
left:50px;
top:0px;
width:20px;
height:20px;
background-color:yellow;
border-radius:50%;
z-index:2;
}

#pollen7
{position:absolute;
left:50px;
top:25px;
width:20px;
height:20px;
background-color:yellow;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
z-index:2;
}




#pollen9
{position:absolute;
left:25px;
top:50px;
width:20px;
height:20px;
background-color:yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;
}

#pollen10
{position:absolute;
top:50px;
left:0px;
width:20px;
height:20px;
background-color:yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;
}



#pollen12
{position:absolute;
top:25px;
left:-25px;
width:20px;
height:20px;
background-color:yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;
}

#pollen13
{position:absolute;
top:0px;
left:-25px;
width:20px;
height:20px;
background-color:yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:2;

}

#leafe1
{position:absolute;
top:-100px;
width:50px;
height:100px;
background-color:#FF99FF;
z-index:1;
-webkit-border-bottom-left-radius:25%;
-moz-border-bottom-left-radius:25%;
border-bottom-left-radius:25%;

-webkit-border-bottom-right-radius:25%;
-moz-border-bottom-right-radius:25%;
border-bottom-right-radius:25%;

-webkit-border-top-left-radius:50%;
-moz-border-top-left-radius:50%;
border-top-left-radius:50%;

-webkit-border-top-right-radius:50%;
-moz-border-top-right-radius:50%;
border-top-right-radius:50%;
}

#square1
{position:absolute;
width:50px;
height:50px;
top:-25px;
background-color:white;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}

#leafe2
{position:absolute;
left:50px;
width:100px;
height:50px;
background-color:#FF99FF;
z-index:1;


-webkit-border-top-left-radius:25%;
-moz-border-top-left-radius:25%;
border-top-left-radius:25%;

-webkit-border-bottom-left-radius:25%;
-moz-border-bottom-left-radius:25%;
border-bottom-left-radius:25%;

-webkit-border-top-right-radius:50%;
-moz-border-top-right-radius:50%;
border-top-right-radius:50%;

-webkit-border-bottom-right-radius:50%;
-moz-border-bottom-right-radius:50%;
border-bottom-right-radius:50%;
}

#square2
{position:absolute;
width:50px;
height:50px;
left:75px;
background-color:white;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#leafe3
{position:absolute;
left:10px;
top:50px;
width:50px;
height:100px;
background-color:#FF99FF;
z-index:1;
-moz-border-top-left-radius:25%;
-webkit-border-top-left-radius:25%;
border-top-left-radius:25%;

-moz-border-top-right-radius:25%;
-webkit-border-top-right-radius:25%;
border-top-right-radius:25%;

-moz-border-bottom-left-radius:50%;
-webkitborder-bottom-left-radius:50%;
border-bottom-left-radius:50%;

-moz-border-bottom-right-radius:50%;
-webkit-border-bottom-right-radius:50%;
border-bottom-right-radius:50%;

-ms-transform:rotate(315deg);
-webkit-transform:rotate(315deg);
transform:rotate(315deg);

transform-origin:50% 0%;
}

#square3
{position:absolute;
width:50px;
height:50px;
top:75px;
background-color:white;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#leafe4
{position:absolute;
top:50px;
left:-10px;
width:50px;
height:100px;
background-color:#FF99FF;
z-index:1;
-moz-border-top-left-radius:25%;
-webkit-border-top-left-radius:25%
border-top-left-radius:25%

-moz-border-top-right-radius:25%;
-webkit-border-top-right-radius:25%;
border-top-right-radius:25%;

-moz-border-bottom-left-radius:50%;
-webkit-border-bottom-left-radius:50%;
border-bottom-left-radius:50%;



-moz-border-bottom-right-radius:50%;
-webkit-border-bottom-right-radius:50%;
border-bottom-right-radius:50%;

-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);


-ms-transform-origin:50% 0%;
-webkit-transform-origin:50% 0%;
transform-origin:50% 0%;
}

#square4
{position:absolute;
width:50px;
height:50px;
top:75px;
background-color:white;

-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#leafe5
{position:absolute;
left:-100px;
width:100px;
height:50px;
background-color:#FF99FF;
z-index:1;
-moz-border-top-left-radius:50%;
-webkit-border-top-left-radius:50%;
border-top-left-radius:50%;

-moz-border-top-right-radius:25%;
-webkit-border-top-right-radius:25%;
border-top-right-radius:25%;

-moz-border-bottom-left-radius:50%;
-webkit-border-bottom-left-radius:50%;
border-bottom-left-radius:50%;

-moz-border-bottom-right-radius:25%;
-webkit-border-bottom-right-radius:25%;
border-bottom-right-radius:25%;
}

#square5
{position:absolute;
width:50px;
height:50px;
left:-25px;
background-color:white;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>

<script></script>
</head>
<body>


<div id="pollen1">
 
 <div id="pollen3">
 </div>
<div id="pollen4">
 </div>
<div id="pollen6">
 </div>
<div id="pollen7">
 </div>
<div id="pollen9">
 </div>
<div id="pollen10">
 </div>
<div id="pollen12">
 </div>
<div id="pollen13">
 </div>
<div id="leafe1">
  <div id="square1">
  </div>
</div>
<div id="leafe2">
  <div id="square2">
  </div>
</div>
<div id="leafe3">
  <div id="square3">
  </div>
</div>
<div id="leafe4">
  <div id="square4">
  </div>
</div>
<div id="leafe5">
  <div id="square5">
  </div>
</div>
</div>
</body>
</html>

Wednesday, 5 November 2014

Circles, Circles, Circles

EURO

The border-radius CSS property allows you to make round shapes.
This time, I've used several round shapes to design a coin.

HTML

Inside the largest outside circle which has the "id="outside_outside_one_euro"" in the div element
are 2 more smaller circles which are labelled as "id="outside_one_euro"" and "id="inside_one_euro"".The smallest circle includes "1 EURO" put in separate div elements.

CSS

border-radius:50% is applied to all div elements to create circles.
If you want to round the borders just a little bit you can use different px values.

HTML & CSS Code Together

<!Doctype Html>

<html>

<head>
<title>Circles, Circles, Circles</title>

<style>


#box
{position:relative;
width:300px;
height:400px;
}

#text
{position:raltive;
top:20px;
}

#outside_outside_one_euro
{position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:#B2994C;
border-style:outset;
border-width:2px;
border-color:#E8BF19;
border-radius:50%;
background: -webkit-linear-gradient(45deg, white, #B2994C);
background: -o-linear-gradient(45deg, white, #B2994C);
background: -mox-linear-gradient(45deg, white, #B2994C);
background: linear-gradient(90deg, white, #B2994C);
}


#outside_one_euro
{position:relative;
top:10px;
left:10px;
width:180px;
height:180px;
background-color:#D1C294;
border-width:2px;
border-color:#CC9900;
border-style:ridge;
border-radius:50%;
background: -webkit-linear-gradient(90deg, white, #D1C294);
background: -o-linear-gradient(90deg, white, #D1C294);
background:-mox-linear-gradient(90deg, white, #D1C294);
background: linear-gradient(90deg, white, #D1C294);
}

#inside_one_euro
{position:relative;
top:20px;
left:20px;
width:140px;
height:140px;
background-color:gray;
border-width:1px;
border-style:inset;
border-color:gray;
border-radius:50%;
background: -webkit-linear-gradient(45deg, white, gray);
background: -o-linear-gradient(45deg, white, gray);
background: -mox-linear-gradient(45deg, white, gray);
background: linear-gradient(45deg, white, gray);
}



#one
{position:relative;
top:-10px;
left:10px;
width:100px;
height:100px;
font-size:900%;
font-style:italic;
color:#E0E0E0;
text-shadow:1px 1px 0px black;
}

#euro
{position:relative;
top:-30px;
left:80px;
width:50px;
height:50px;
font-size:150%;
color:#E0E0E0;
text-shadow:1px 1px 0px black;
}



</style>

<script></script>

</head>


<body>

<div id="box">

<div id="outside_outside_one_euro">
<div id="outside_one_euro">
<div id="inside_one_euro"> 

<div id="one">1</div>
<div id="euro">EURO</div>

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

</div>

<div id="text">

</div>


</body>


</html>

Let It Spin!

Rotating Coin

When you put the cursor on top of the coin it will start spinning around.
To let it spin you have to choose the length of the rotation which is set through animation:rotation (this is the name of the animation so you can choose a random name): seconds s.
In order to show the animation in all browsers don't forget to put the prefix -webkit- in front of the property.
Details of the animation are described in @keyframes rotation. The coin is spinning laterally meaning on its y-axis therefore transform property is set to rotateY(deg).

HTML Code

<!DOCTYPE HTML>
<html>
<head>
<title>Rotating Coin</title>
<LINK rel="stylesheet" type="css/type" href="rotating_coin.css">
</head>

<body>

<div>
<img src="one_euro.png"></img>


</div>

</body>
</html>

CSS Code

div
{position:absolute;
top:200px;
left:300px;
}


img:hover
{-webkit-animation:rotation 5s;
animation:rotation:5s;
}

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

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

}

@keyframes rotation
{
0% {-webkit-transform:rotateY(0deg);
trasform:rotateY(0deg);}
100% {-webkit-transform:rotateY(180deg);
trasform:rotateY(180deg);}
}