How To Develop CSS3 Border Radius Tool

Advertisement

CSS3 is rocking the web design and web development life. You can get amazing and awesome effects and style using it. CSS3 selectors provides you a variety of functions and features. Here on Pelfusion I’ve created a simple tool which will be used to make an element corners rounded. In this simple tool just pass your value and CSS3 code will be generated. This is done using jQuery and CSS3. I have used border property of CSS3 to get this simple effect. To develop this tool you will need only two files, one PHP file and other JS file, CSS code is added internally in PHP file. You can download source code by clicking download link at the bottom of post.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

CSS3 Border Radius Tool How To Develop CSS3 Border Radius Tool

Here is the CSS which I used in PHP file:

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1,2,3″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true”]

.outPut {
-moz-border-radius:10px 10px 10px 10px;
background-color:rgba(166, 167, 244, 0.8);
display:table-cell;
font-size:2em;
height:200px;
margin:0 auto;
min-height:200px;
text-align:center;
vertical-align:middle;
width:320px;
}

.Code {
-moz-border-radius:10px 10px 10px 10px;
background:none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
margin:60px 0 20px;
padding:10px;
position:relative;
}

input{-moz-border-radius:5px 5px 5px 5px;
background-color:rgba(255, 255, 255, 0.5);
border:1px solid #D4CFBD;
font-size:1.1em;
padding:2px 5px 2px 2px;
}

label {
font-size:1.1em;
margin:4px 10px 0 0;
}
[/css]

Here is jQuery code:

[code lang=”js”]
$(document).ready(function(){
$(".radiusInput").keyup(function()
{$(".code-border-radius-equal").text(function(b){
var c=$(".radiusInput").val();return(c+"px")});
var a=$(".radiusInput").val()+"px";
$(".outPut").css({"-webkit-border-radius":a,"-moz-border-radius":a,"border-radius":a})
});
[/code]

DEMO Download

Advertisement

There are 5 comments for this article
  1. Pingback: 50 Refreshing CSS Tutorials, Techniques and Resources | Prabaharan CS Blog
  2. Pingback: 50 Refreshing CSS Tutorials, Techniques and Resources « UKWDS!
  3. Pingback: 50 Refreshing CSS Tutorials, Techniques and Resources
  4. Nitin at 7:21 am

    hey this good technq for creating round curvy box but its in demo whn i click i cnt see in my browser why? i hve latest FFox and IE