SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

November 1, 2010 by Eric Hoffman 14 Comments

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.

CSS3 Generator

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 ;)

Download the demo files here (127KB) (downloaded [download#26#hits] times already!) and check out the live demo here.

Filed Under: CSS, Development, HTML5, jQuery, Tutorial

Comments

  1. Johnn says

    November 1, 2010 at 9:36 pm

    Pretty awesome job ;)

  2. Zazen says

    November 2, 2010 at 12:45 am

    This is really cool. Thanks for the detailed tutorial.

  3. Idraki M. says

    November 2, 2010 at 2:38 am

    That’s pretty neat. Never thought its that easy. Thanks mate.

  4. Eric says

    November 2, 2010 at 3:52 am

    Thanks guys! I really appreciate your support! ;)

  5. Giacomo says

    November 2, 2010 at 5:37 am

    Really great article.. thanks for sharing…!

  6. Ayman Aboulnasr says

    November 2, 2010 at 9:06 am

    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!

  7. Alter says

    November 2, 2010 at 12:57 pm

    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.

  8. Eric says

    November 2, 2010 at 4:46 pm

    Thanks! Does is work in your browser?

  9. Idraki M. says

    November 4, 2010 at 4:15 am

    Dude, here’s my try. Added few other property too. ;D

    http://static.tumblr.com/flr59he/1ullbcpja/css3-generator.html

  10. Eric says

    November 4, 2010 at 6:42 am

    Very nice @idraki! Great job :)

  11. Brett Widmann says

    November 14, 2010 at 7:42 pm

    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.

  12. Swopper says

    December 4, 2010 at 3:41 am

    Nice CSS generator very useful stuff …. thanks :)

  13. Küchen München says

    June 6, 2011 at 9:12 am

    guter css generator, benutze ich gern, danke

  14. Soappmedia says

    November 30, 2017 at 12:05 pm

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022