CSS3 is still in its infancy, and web browsers are still slowly trying to catch up with the power and the possibilities that CSS3 offers developers to create some amazing websites. Though web browsers are still lagging slightly behind with the ability to accommodate all that CSS3 has to offer a web development,you can still use it to create some pretty awesome bits for your website. In this article I'm going to show you how to experiment with a bit of the potential that CSS3 has to offer.
To begin with, I'm going to recreate the Kalexiko logo. The logo itself consists of five elements; a circle, two triangles, the shadow and a box to hide the overflow shadow. For the time being I am only going to concentrate on the circular element.
The first step that I am going to take is to create a div, which will solely serve as the container for the image; technically this is isn't part of the overall structure. I also added some styling to the box to center it.
Now that we have our container we can get down to business. To begin with we need to recreate the circle container with a gradient. So, within the logo holder I created a span with a class of "circ-out" and placed it within the logo-holder.div. The next step is to apply the relevant style to the box; so add a border radius and a background gradient to the logo to make it look correct.
The border radius command is: border-radius: 50%; /* Radius Amount */
This used to require a few more prefixes for cross browser compatibility, but it is no longer unnecessary for the latest browsers. This also goes for the box-shadow command; if you would like to know more about this then you should take a look at this post by clicking here.
To add gradient colour to the box I use an app called gradient on my mac, but there are many alternative apps and website generators out there at your disposal. To create a gradient you only really need to know is the hex/rgb code; you can also try using Colorzillas gradient editor, which you can access by clicking here .
Now I have generated the gradient (which goes from #eb2439 to #c22331); the code looks fairly long, bit don't let that put you off as it's just giving you a prefix for each browser.
The gradient command;
So lets put this together into one. As it's a span tag we need to firstly add a display block. Because we are going to be using 'position absolute' to position all of our internal components we need to give it a position relative.
Next I will add the two triangles which make up the K; so first let's add the two spans for the triangles like so;
Then to create the triangles I use a a 0px height and a width box and then add a border to certain parts to create the triangle effect.
So for each triangle I need to add specific borders to specific corners. If you are familiar with shorthand CSS the '0 0 0 0' is for the top-right and bottom left; so '0 0 0 125px' will add an 125px border to the left of your box. With this in mind here is the CSS for both triangles;
As you can see I have used an empty span, added display block and defined a height and width and then added the relevant borders to each one to make two right angled triangles. I have also 'positioned absolute'd' both triangles so that they sit in the correct area within the red circle.
The last piece of the puzzle is to create the shadow element. To do this I used two span tags for so I could hide the shadow as it was originally extending too far; so let's place our two span tags in to our CSS.
Now I have taken the shadow span and added the relevant default styling,like we have been doing for the previous elements display block, height width position absolute etc. I then created a shadow that would resemble the shadow used in the logo, but it did come out the edges of the box which I will solve later. Finally I needed to rotate my shadow and position it to the right area. To do so I used this CSS;
Finally I made the shadow-hide box hide the shadow that was not needed with a simple box with a higher z-index than that of the shadow. It had the same rotation as the shadow itself but just a bit larger like so;
So that’s it all done! Save and preview your newly made css3 Kalexiko logo! I added a snazzy animation to the hover but we will cover that in another episode!
Hope you enjoyed this short tutorial on CSS3 and if you have any questions dont hesitate to leave a message below