▼  Site Navigation Main Articles News Search  ▼  Anime + Manga Anime Reviews Anime Characters Gallery Screenshots Manga Reviews  ▼  Misc Links to Webcomics Bible Quotes About Older Musings
site version 7.3
create rounded corners
written by: admin


Date Written: 10/16/09 Last Updated: 6/22/12

This page demonstrates how to use PHP's ImageMagick to create four rounded corner images (top right, top left, bottom right, and bottom left).  The images are in png format with dimensions 100px X 100px.  The second line $test="yellow"; determines the color.  If the color you specify is located in the list of colors below that line then the script will produce four corners with that color.  Traditional color declarations are in hexadecimal and ImageMagick uses the base 10 number system when creating colors, so there is a code below that integrates the conversion of hexadecimal to integer.

rounded corners script
<?php
$test="yellow";
$test=strtolower($test);
$test=str_replace('#','',$test);
$colorname=array("silver"=>"c0c0c0",
"aqua"=>"00ffff",
"teal"=>"008080",
"cyan"=>"00fff",
"red"=>"ff0000",
"green"=>"008000",
"blue"=>"0000ff",
"orange"=>"ffa500",
"yellow"=>"ffff00",
"purple"=>"800080",
"tan"=>"d2b48c",
"beige"=>"f5f5dc",
"turquoise"=>"40e0d0",
"maroon"=>"800000",
"navy"=>"000080",
"gold"=>"ffd700",
"gray"=>"808080",
"indigo"=>"4b0082",
"pink"=>"ffc0cb",
"brown"=>"a52a2a"
);
if (array_key_exists($test, $colorname)) $test=$colorname[$test];
$a[0]=substr("$test",0,1);
$a[1]=substr("$test",1,1);
$a[2]=substr("$test",2,1);
$a[3]=substr("$test",3,1);
$a[4]=substr("$test",4,1);
$a[5]=substr("$test",5,1);
foreach ($a as &$b)
{
if ($b=='a') $b=10;
if ($b=='b') $b=11;
if ($b=='c') $b=12;
if ($b=='d') $b=13;
if ($b=='e') $b=14;
if ($b=='f') $b=15;
}
$b1=(($a[0]*16)+$a[1]);
$b2=(($a[2]*16)+$a[3]);
$b3=(($a[4]*16)+$a[5]);
$image = imagecreatetruecolor(100, 100);
$bg = imagecolorallocate($image, 0, 0, 0);
imagefilledrectangle($image, 0, 0, 100, 100, $bg);
$col_ellipse = imagecolorallocate($image, $b1, $b2, $b3);
imagefilledarc($image, 0, 100, 200, 200, 270, 360, $col_ellipse, IMG_ARC_PIE);
imagecolortransparent($image, $bg);
header("Content-type: image/png");
imagepng($image, 'test.png');
system("convert test.png -write tr.png png:-");
system("convert test.png -flip -write br.png png:-");
system("convert test.png -flop -write tl.png png:-");
system("convert test.png -flop -flip -write bl.png png:-");
?>



The same trick using css
A similar trick using just CSS can be accomplished with border–radius.  I do not use it because it does not work so well in versions of internet explorer prior to IE9.
<style type="text/css">
.example1 {
border-radius: 15px;
width:250px;
height:250px;

background-image:url('images/screenshots/noir18.jpg');
}
</style>
<div class='example1'> </div>




TAGS: php, css
copyright 2005–2024