Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.
The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.
Let’s get started!
Paste this basic markup, you’ll notice we’re using the html5 doctype:
[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<title>css3 Generator</title>
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.4.2.js’></script>
<link rel="stylesheet"type="text/css"href="css3Generator.css"/>
</head>
<body>
</body>
</html>
[/html]
Open up a div with the id ‘wrap’.
[html]
<div id=wrap>
</div>
[/html]
Basically everything is contained in the wrapper. We have a select drop-down menu, and when the user presses the submit button, jQuery gets the form value and displays either a CSS3 gradient or border radius creator. Each have a live preview triggered through ‘keyup’.
First we’ll name our page CSS3 Generator. Wrap the title in ‘h1’ tags. Below the title we’ll create a select drop down menu with three options; ‘Select an option’, ‘Gradient’ and ‘Border Radius’. Below that we have a submit button.
[html]
<h1>CSS3 Generator</h1>
<select>
<option>Select an option</option>
<option>Gradient</option>
<option>Border Radius</option>
</select>
<input type=submit class=submit>
[/html]
Next we’ll add the two generators, both contained in hidden boxes that only become visible when their option is selected.
First the gradient box, ‘graBox’. Add a separator, ‘hr’ and two input boxes with different classes. We don’t need a submit button here, as the gradient preview is triggered by ‘keyup’.
Create a div with the id ‘gradientPreview’ and below open a span with the class ‘gradientCode’. This is where the markup will appear in ‘pre’ tags. Close the ‘graBox’ and we’ll continue with the border radius preview.
[html]
<div id=graBox>
<hr>
<input type=text class=color-one value=#288888><br>
<input type=text class=color-two value=#244444><br>
<div id=gradientPreview></div>
<span class=gradientCode>
</span>
</div>
[/html]
Open a div with the id ‘borderBox’. Below create a ‘hr’ separator and an input field with the class ‘borderRadius’ and the placeholder ‘border radius’.
Placeholder is a new HTML5 feature, instead of being editable when the user clicks in the input field like the ‘value’, placeholder disappears when the user clicks on the box, and appears when the user clicks away from the field and it is empty. Create a div with the id ‘borderRadiusPreview’, where we’ll be showing a box with the given border radius.
Lastly open a span with the class ‘borderCode’ (for the code in ‘pre’ tags) and close both the ‘borderBox’ and the ‘wrap’ div.
[html]
<div id=borderBox>
<hr>
<input type=text class=borderRadius placeholder=’border radius’><br>
<div id=borderRadiusPreview></div>
<span class=borderCode>
</span>
</div>
</div>
[/html]
We’ve completed the html, it isn’t much yet, merely a few form elements and text. We’ll change this with jQuery. Add your jQuery script link (I already did, just the first step) to your head section and add this to you code (perform the following actions when the document is ready).
[html]
$(document).ready(function(){
});
[/html]
Hide the gradient and the border box.
[html]
$(‘#graBox’).hide();
$(‘#borderBox’).hide();
[/html]
When the submit handle is pressed perform the following: get the select value by using ‘.val()’ and store it in a variable. If the variable (=the form value) is equal to ‘Select an option’, the default form value, hide both boxes.
[html]
$(‘:submit’).click(function(){
var selectvalue = $(‘select.css3’).val();
if (selectvalue == ‘Select an option’){
$(‘#graBox’).hide();
$(‘#borderBox’).hide();
}
[/html]
If the value is equal to ‘Gradient’, display the gradient box and hide the border radius box by using either ‘show()’ or ‘hide()’.
[html]
$(‘:submit’).click(function(){
var selectvalue = $(‘select.css3’).val();
if (selectvalue == ‘Select an option’){
$(‘#graBox’).hide();
$(‘#borderBox’).hide();
}
if (selectvalue == ‘Gradient’){
$(‘#graBox’).show();
$(‘#borderBox’).hide();
}
[/html]
Finally, if the form value is equal to ‘Border Radius’, display the border radius box and hide the gradient box.
[html]
$(‘:submit’).click(function(){
var selectvalue = $(‘select.css3’).val();
if (selectvalue == ‘Select an option’){
$(‘#graBox’).hide();
$(‘#borderBox’).hide();
}
if (selectvalue == ‘Gradient’){
$(‘#graBox’).show();
$(‘#borderBox’).hide();
}
if (selectvalue == ‘Border Radius’){
$(‘#borderBox’).show();
$(‘#graBox’).hide();
}
});
[/html]
Next we’ll make the border radius functional. Perform the following when the key being pressed is released (keyup): get the form value and store it in a variable. Add the border radius to the border radius preview box by using ‘.css()’. Now we have to display the code within ‘pre’ tags.
[html]
$(‘#borderBox input’).keyup(function(){
var borderRadius = $(‘input.borderRadius’).val();
$(‘#borderRadiusPreview’).css(‘border-radius’, borderRadius + ‘px’);
if(borderRadius == ”){
$(‘.borderCode’).html(‘[html]-webkit-border-radius: 0px;</pre>’+
‘[html]-moz-border-radius: 0px;</pre>’+
‘[html]border-radius: 0px;</pre>’);
}
if(borderRadius != ”){
$(‘.borderCode’).html(‘[html]-webkit-border-radius: ‘ + borderRadius + ‘px;</pre>’+
‘[html]-moz-border-radius: ‘ + borderRadius + ‘px;</pre>’+
‘[html]border-radius: ‘ + borderRadius + ‘px;</pre>’);
}
});
[/html]
If the input is equal to nothing, add the code within ‘pre’ tags to the ‘borderCode’ span. Since the input is nothing, the code would look like ‘border-radius: px’, which would be false. Therefor we insert a 0 before the ‘px’.
Now if the form value is not equal to ‘’ we add the code (using ‘.html()’) to the span. This time we add the variable between ‘border-radius:’ and ‘px;’.
The gradient box is created pretty much the same way, get the variables, add the css to the gradient box preview, and display the code in ‘pre’ tags.
[html]
$(‘#graBox input’).keyup(function(){
var firstcolor = $(‘input.color-one’).val();
var secondcolor = $(‘input.color-two’).val();
$(‘#gradientPreview’).css(‘background’,’-webkit-gradient(linear, 0% 0%, 0% 100%, from(‘+firstcolor+’), to(‘+secondcolor+’))’ );
$(‘span.gradientCode’).html(‘[html]background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(‘+firstcolor+’), to(‘+secondcolor+’));</pre>’ +
‘[html]background: -moz-linear-gradient(100% 100% 90deg, ‘+firstcolor+’, ‘+secondcolor+’);</pre>’);
});
[/html]
Now The CSS
At the moment the form looks horrible, but it displays properly, except for the previews.
The (basic) css reset, add a background to the body and change the body font to Baskerville.
[html]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
body {
background: url(image url) repeat;
font-family: baskerville;
}
[/html]
The style-less ‘hr’ looks horrible, we’ll add the following styles (here all credit goes to @disinfeqt and the awesome @forrst community!).
[html]
hr {
border: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #fff;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(255,255,255,0.3);
filter: alpha(opacity = 30);
clear: both;
height: 0;
margin: 15px 0;
}
[/html]
Style the header tag (h1).
[html]
h1 {
font-size: 30px;
font-weight: bold;
color: white;
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}
[/html]
And the wrap div. Min-height is the minimum height the div must have, rgba(…) is the color in RGB (red, green, blue) values, the last value being opacity. New versions of Chrome support border-radius, so there’s no need (in this tutorial) to use ‘-webkit-border-radius’. For your websites, if at all, use the latter. Add a slightly transparent text shadow.
[html]
#wrap {
width: 300px;
min-height: 100px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin: 50px auto;
color: #34332d;
padding: 10px 100px;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
[/html]
Next we’ll style the ‘select‘ form element. Add a nice background color and border, change the text color and set the font-family to Baskerville. If you look closely, you’ll notice the rounded borders don’t look very smooth, for that reason add ‘-webkit-background-clip: padding-box’ to remove the background ‘bleed’.
[html]
select {
background: #dde1c1;
color: #34332d;
font-size: 16px;
height: 40px;
margin: 5px 5px 0 0px;
width: 200px;
font-family: baskerville;
-webkit-background-clip: padding-box;
border: 1px solid #3c401f;
}
[/html]
Add (almost) the same style to the submit button, and change the background color when the user hovers over it.
[html]
.submit {
background: #dde1c1;
border: 1px solid #3c401f;
-webkit-background-clip: padding-box;
border-radius: 5px;
width: 90px;
color: #34332d;
font-size: 16px;
height: 40px;
-webkit-box-shadow: inset 0 0 3px white;
font-family: baskerville;
}
.submit:hover {
background: #cad09f;
cursor: pointer;
}
[/html]
Do the same with the input fields, and add a white box shadow when the input field is ‘focused’ (to remove the blue outline, you can add outline:0).
[html]
input {
padding: 5px;
-webkit-background-clip: padding-box;
border-radius: 5px;
background: #dde1c1;
margin: 2px 0;
border: 1px solid #3c401f;
-webkit-box-shadow: inset 0 0 3px white;
}
input:focus {
-webkit-box-shadow: 0 0 3px white;
outline: 0;
}
[/html]
Style the border radius preview div, and add ‘-webkit-transition: all ease-in-out .5s’. Anything that changes is any pseudo class will now have a transition effect that will take .5 seconds. In our case, I changed the background color the yellow in the :hover pseudo class. Try hovering over the preview and you’ll see what I mean.
[html]
#borderRadiusPreview {
height: 150px;
width: 150px;
background: orange;
margin-top: 10px;
-webkit-transition: all ease-in-out .5s;
padding: 20px;
}
#borderRadiusPreview:hover {
background: yellow;
}
[/html]
Style the ‘pre’ tag. You’ll notice ‘word-wrap: break-word’, which forces the text to break.
[html]
pre {
border-radius: 5px;
padding: 10px;
margin-top: 5px;
background: #dde1c1;
border: 1px solid #3c401f;
-webkit-background-clip: padding-box;
-webkit-box-shadow: inset 0 0 3px white;
word-wrap: break-word;
}
[/html]
Style the gradient preview similar to the border radius preview, except this time we have a gradient background.
[html]
#gradientPreview {
height: 200px;
border-radius: 10px;
width: 200px;
margin-top: 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#288888), to(#244444));
}
#graBox {
margin-top: 10px;
}
[/html]
You’ve done it!
Fabulous job my friend! If you like, you can post your results below in the comment form (using jsFiddle works best). You can also download a ZIP with all the necessary files below ;)
Pretty awesome job ;)
This is really cool. Thanks for the detailed tutorial.
That’s pretty neat. Never thought its that easy. Thanks mate.
Thanks guys! I really appreciate your support! ;)
Really great article.. thanks for sharing…!
Thank you very much for the detailed tutorial. No wonder CSS3 is gonna make all of our lives as web designers alot easier with the built-in functionality it comes with.
I just hope that the day where we can all use it safely on all web browsers would come soon!
Great tutorial. Seriously reminded me of something I’d find in the UK’s Web Designer Magazine…which is the best magazine I’ve found to date for a monthly source of articles like this.
Thanks! Does is work in your browser?
Dude, here’s my try. Added few other property too. ;D
http://static.tumblr.com/flr59he/1ullbcpja/css3-generator.html
Very nice @idraki! Great job :)
I’ve been looking for a tutorial on how to actually make something like this for awhile now. Thanks for putting this together and sharing with everyone. I think it makes for a good starting point for anyone interested in creating their own CSS generator.
Nice CSS generator very useful stuff …. thanks :)
guter css generator, benutze ich gern, danke
Awesome! Thanks for sharing such a wonderful work its always nice to read Old post like this never gets old thanks for the code.. its 100% working.