Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /data/web/pelfusion.com/wp-includes/wp-db.php on line 3091
class="post-9067 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-technology tag-code tag-css tag-css3 tag-development tag-know-how tag-jquery tag-tools" itemtype='http://schema.org/CreativeWork' itemscope='itemscope'>

How To Develop CSS3 Border Radius Tool


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

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

Home Forums How To Develop CSS3 Border Radius Tool

This topic contains 2 replies, has 1 voice, and was last updated by  Zeeshan Rasool 6 years, 6 months ago.

  • Author
    Posts
  • #35066 Reply

    How To Develop CSS3 Border Radius Tool
    [See the full post at: How To Develop CSS3 Border Radius Tool]

  • #35067 Reply

    Nida

    useful technique you sharing. thanks

  • #35068 Reply

    Nitin

    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

Reply To: How To Develop CSS3 Border Radius Tool
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">