Simple CSS3 Border-Radius Generator

3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

This is what will be making - http://codepen.io/mikethedj4/pen/sfptn

Screenshot:
border-radius-generator.png
I've been getting a lot of questions of people asking me how to build a generator in Javascript. So today I'm going to show you how to build a CSS3 border-radius generator.

There's many ways to do this like doing a whole lot of code mirroring to achieve the same effect on all browsers with the same code, but I feel lazy so I'm not going to write more than what's necessary for this tutorial.

So here's our CSS:
Code: Select all
html, body { margin:0; padding:0; overflow:hidden; }
* { border:0; outline:0; resize:none; }
.hide { width:0; height:0; overflow:hidden; display:none; }
.apply-br {background: #026; width:200px; height:200px;}
.top, .bottom { position:absolute; left:0; }
.top { top:0; bottom:50%; }
.bottom { bottom:0; top:50%; }
input, div, textarea { width:100%; }
textarea { height:100%; }
Most of the CSS is just for to make the generator look a bit nice, but the only thing important is the following...
Code: Select all
.apply-br {
  width: 200px; 
  height: 200px;
  background: #026; 
}
This is the div will be changing it's border-radius, and note that we'll be using the input[type=range] to change it's curve with a class called border-radius. This way we know what we're calling and for what reason.

We're also using a textarea with the class code which is where all our code will be located.

So here's our HTML.
Code: Select all
<div class="top">
  <center><br>
    <div class="apply-br"></div>
    <p><input class="border-radius" type="range" value="50"></p>
  </center>
</div>

<div class="bottom">
  <textarea class="code"></textarea>
</div>
Now for the fun stuff.
Code: Select all
$('.apply-br').css('border-radius', $('.border-radius').val() + 'px');
$('.code').val($('.apply-br').attr('style').replace(/;\s?/g,";\n"));
We use $('.apply-br').css('border-radius', ) to call our border-radius for the .apply-br class (remember this is the div we're applying the border radius to. Hence .apply-br).
The coma inside separates the property from it's value. In this case were telling the border-radius's value to be our class border-radius. We also have to add px encoding at the end otherwise we have numbers that are not defined which in essence don't have any meaning in css.

Before we go any further remember that when an element is dynamically manipulated majority of the time it'll add it's css and javascript to the html tag. it doesn't always as it depends on how you code it, but also remember that all browsers act differently.

By using "$('.apply-br').attr('style')" we can apply the div's style as our code's value (remember we only added border radius dynamically so only border-radius will show)

I also added ".replace(/;\s?/g,";\n")" /g is a global modifier. In this case we're using it to replace the semicolon to insert a semicolon and create a linebreak on all in the textarea. If we used ".replace(/;/g,";\n")" it would do the same but create a space. This is why "\s?" is added. to remove those spaces. If you wanted to allow it however you could also add "/;\s*/g". (all without quotes)

This is how we add our elements css to our textarea neatly.
Code: Select all
$('.code').val($('.apply-br').attr('style').replace(/;\s?/g,";\n"));
So far we've only defined our onload events. Now lets create a function that calls the exact same events when the slider moves to change our border-radius
Code: Select all
$('.border-radius').on('change', function() {
  $('.apply-br').css('border-radius', $('.border-radius').val() + 'px');
  $('.code').val($('.apply-br').attr('style').replace(/;\s?/g,";\n"));
});
The last thing we need to do is make sure that when we click our textbox it'll select all the text for us to make it real easy to copy and paste our css to our style sheet.
Code: Select all
$('textarea').on('click', function() {
  $(this).select();
});
Now this is a pretty basic example of how generators work. However I do feel this will help others out greatly. So I hope you enjoyed this tutorial.

Now here's our full code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Simple CSS3 Border-Radius Generator</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
html, body { margin:0; padding:0; overflow:hidden; }
* { border:0; outline:0; resize:none; }
.hide { width:0; height:0; overflow:hidden; display:none; }
.apply-br {background: #026; width:200px; height:200px;}
.top, .bottom { position:absolute; left:0; }
.top { top:0; bottom:50%; }
.bottom { bottom:0; top:50%; }
input, div, textarea { width:100%; }
textarea { height:100%; }
</style>
<script type='text/javascript'>
  $(function() {
    // First we'll apply the value as our div's border-radius then add it to the code.
    $('.apply-br').css('border-radius', $('.border-radius').val() + 'px');
    $('.code').val($('.apply-br').attr('style').replace(/;\s?/g,";\n"));
    
    // Here we update the css and the code so when the slider moves it applies the value to the border-radius, but also to the code
    $('.border-radius').on('change', function() {
      $('.apply-br').css('border-radius', $('.border-radius').val() + 'px');
      $('.code').val($('.apply-br').attr('style').replace(/;\s?/g,";\n"));
    });
    
    // Select all the text in the textbox when clicked
    $('textarea').on('click', function() {
      $(this).select();
    });
  });
</script>
</head>
<body>
  <div class="top">
    <center>
      <div class="apply-br"></div>
      <p><input class="border-radius" type="range" value="50"></p>
    </center>
  </div>

  <div class="bottom">
    <textarea class="code"></textarea>
  </div>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
User avatar
noypikami
VIP - Donator
VIP - Donator
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am

#mikethedj4 hi, your photo attachment looks different compare to mine
in my browser (firefox). im using 15 inches laptop. some people wont be able to
use your app if that's the case.
ahh, one more thing.. your family name sounds familiar to me
it reminds me of a person named " fr. aloysius shwartz." :mrgreen:
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

You can still use it in horizontal view mode, but it's not as easy in vertical. Here's how you split the view vertically.
splitview.png
This tutorial is more to show you how generators work by building one rather than use here's an app. It can be constructed many other ways, but this is the simplest I could think of to show everyone how to build one yourself.
You do not have the required permissions to view the files attached to this post.
3 posts Page 1 of 1
Return to “Tutorials”