Hello, readers In today's blog , I have tried to create website logo i.e of “FINDNERD” by simply using CSS properties over it.
As looking over the logo first we need to create four circles and setting their position to absolute. For creating the circle we need to set the border-radius to 50% , giving them a appropriate height and width .
As we can see that all four circles have different colors filled in them, so we will set the linear gradient of each circle as per the required colors.
On the first circle , it has an arrow over it so for creating the arrow I have created an arrow class and has applied CSS property to it.
On the remaining three circles it has a text which is the site name over it . For the text , I have created a div with the text class by setting its position to absolute providing with the appropriate colour ,font-size ,z-index and the required height and width.
To the right of the circles , there is a beta tag over the last circle for creating that I have created a div with class beta tag inside it for the text ,I have created a div with the class name beta text which has the text beta in it and had add box-shadow.
Below the beta tag ,there is a small shape over the last circle for creating it , I have created a div with a class shape and with the help of some CSS and CSS3 properties. I aimed to complete it.
Below is the html code for the logo :-
<!DOCTYPE html>
<html>
<head>
<title>Findnerd logo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- =Container start= -->
<div class="container">
<!-- =Logo Text= -->
<div class="text">FINDNERD</div>
<!-- = Beta tag start= -->
<div class="beta-tag">
<div class="beta-text"> beta</div>
<div class="shape"></div>
</div>
<!-- =beta tag end// -->
<!-- =Circle-1 start= -->
<div class="circle-1">
<div class="arrow"></div>
</div>
<!-- = Circle-1 end // -->
<!-- =circle-2 start= -->
<div class="circle-2">
</div>
<!-- =circle-2 end// -->
<!-- =circle-3 start= -->
<div class="circle-3">
</div>
<!-- =circle-3 end// -->
<!-- =circle-4 start= -->
<div class="circle-4">
</div>
<!-- =circle-4 end// -->
</div>
<!-- =Container End// -->
</body>
</html>
Below is the css code for the logo :-
/*element styling start*/
.container{
position: relative;
margin-top: 20px;
}
/*logo text*/
.text {
color: #fff;
font-size: 26px;
font-weight: 300;
left: 60px;
position: absolute;
top: 20px;
z-index: 999;
font-family: tahoma;
}
/*beta tag start*/
.beta-tag{
position: absolute;
top: -7px;
z-index: 99;;
left: 154px;
}
.beta-text{
font-size: 16px;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 3px;
padding: 1px 0 0 3px;
background: #fff;
border: 1px solid #000;
border-radius: 4px;
width:67px;
z-index: 12;
text-align: center;
box-shadow: -1px 1px 2px 0 #494949;
}
.shape{
border-bottom: 5px solid transparent;
border-right: 10px solid #000;
border-top: 10px solid transparent;
height: 0;
right: 4.2px;
position: absolute;
bottom: -5px;
transform: rotate(60deg);
width: 0;
z-index: -2;
}
/*Arrow start*/
.arrow{
width:33px;
height:8px;
top: 30px;
position: absolute;
left: 8px;
background: #fff;
}
.arrow:after{
position: absolute;
content: "";
transform:rotate(44deg);
top: -10px;
right: 0;
width: 20px;
height: 20px;
background: transparent;
border-right: 7px solid #fff;
border-top: 7px solid #fff;
}
/*circle-1 start*/
.circle-1{
/*Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e76e07+62,fca148+100 */
background: #e76e07; /* Old browsers */
background: -moz-linear-gradient(top, #e76e07 62%, #fca148 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e76e07 62%,#fca148 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e76e07 62%,#fca148 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e76e07', endColorstr='#fca148',GradientType=0 ); /* IE6-9 */
width: 70px;
height: 66px;
border-radius: 50px;
position: absolute;
}
/*circle-2 start*/
.circle-2{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f2795+41,ac2093+94 */
background: #7f2795; /* Old browsers */
background: -moz-linear-gradient(top, #7f2795 41%, #ac2093 94%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7f2795 41%,#ac2093 94%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7f2795 41%,#ac2093 94%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f2795', endColorstr='#ac2093',GradientType=0 ); /* IE6-9 */
width: 70px;
height: 68px;
border-radius: 50px;
position: absolute;
left: 55px;
}
/*circle-3 start*/
.circle-3{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4df41+30,94a006+94 */
background: #d4df41; /* Old browsers */
background: -moz-linear-gradient(top, #d4df41 30%, #94a006 94%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d4df41 30%,#94a006 94%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d4df41 30%,#94a006 94%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4df41', endColorstr='#94a006',GradientType=0 ); /* IE6-9 */
width: 65px;
height: 67px;
border-radius: 50px;
position: absolute;
left: 106px;
}
/*circle-4 start*/
.circle-4{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8d024d+43,bc0566+85 */
background: #8d024d; /* Old browsers */
background: -moz-linear-gradient(top, #8d024d 43%, #bc0566 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #8d024d 43%,#bc0566 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #8d024d 43%,#bc0566 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d024d', endColorstr='#bc0566',GradientType=0 ); /* IE6-9 */
width: 66px;
height: 66px;
border-radius: 50px;
position: absolute;
left: 151px;
}
In the CSS code , I have given style to all the four circles with the appropriate linear-gradient , height, width , position and the border-radius to 50%. As we can see the logo the circles are overlapping therefore , i need to adjust them by placing them to right.
For the beta tag , I have set its position to absolute and with the z-index to 99 so that the tag can be placed over the last circle. Below the tag there is a shape below it , so for creating it , i need to make a small triangle by setting its border-bottom, border-right, border-top with position absolute , z-index to -1 and for adjusting it to the right place , I have also used the CSS3 transform rotate property and has rotated it to 63 deg.
As we can see the first circle has a arrow over it , I have created it by setting the arrow class with the background , with the appropriate height and width and making its position absolute.
In this I have also taken help of psuedo-element :after which has help me in creating the arrow front part by setting border-right, border-top , background to transparent and content property of CSS this property is used with before and after pseudo elements for inserting the generated content. I have used CSS3 transform property by rotating the front part of the arrow to 51 deg.
Conclusion:-
Hence, I have created the “FINDNERD” logo using the CSS properties which was easy to make and understand.
Note :- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)