April 2009 – Program & Design

April 26, 2009Mark No Comments

Simple Rounded Corners with CSS

I know there are umpteen billion tutorials on rounded corners out there, but here’s an easy way that I like to do it. Requires only one image, and allows you to nudge your text as close to the corners are you like.

If you want a 3px radius corner, have a black background, and white foreground, you need to create a 6×6 (i.e. radius*2) image of a white circle on a black background. This method won’t support transparency unfortunately.

The HTML:

<div id="content">
<div id="tl"></div><div id="tr"></div><div id="bl"></div><div id="br"></div>
Your content here.
</div>

The CSS:

#content {
position:relative;
background-color: #fff;
width:600px;
height:300px;
}

#tl,#tr,#bl,#br{
background: #000 url(images/circle.gif);
width:3px;
height:3px;
position:absolute;
}

#tl{top:0;left:0}
#tr{top:0;right:0;background-position:3px 0}
#bl{bottom:0;left:0;background-position:0 3px}
#br{bottom:0;right:0;background-position:3px 3px}

Adjust all the “3px”s to match your radius, and modify the background attribute to meet your needs, and style content however you want. You probably want to put some padding on there. The important thing is that #content has position:relative so that the corners are aligned to the content box rather than the page.

I used this technique on my personal site, mnbayazit.com.

April 26, 2009Mark No Comments

Vertically center text with CSS

Anyone who has used CSS for awhile knows that vertically aligning stuff isn’t easy. Vertically aligning just text, however, is pretty simple. If your container is 30px tall, just set the line-height to 30px too and your text will be perfectly centered! Hurray! This only works for a single line of text however… if you want more, you’re probably better off fighting with margins, padding, or absolute positioning.

April 14, 2009Mark No Comments

Draw an Unfilled Circle

OpenGL doesn’t seem to have any functions for drawing an unfilled circle, so you can use this code instead. It uses lines, so you can adjust the line thickness with glLineWidth and anti-alias it with glEnable(GL_LINE_SMOOTH) if you want.

void drawCircle(GLfloat x, GLfloat y, GLfloat r) {
static const double inc = M_PI / 12;
static const double max = 2 * M_PI;
glBegin(GL_LINE_LOOP);
for(double d = 0; d < max; d += inc) {
glVertex2f(cos(d) * r + x, sin(d) * r + y);
}
glEnd();
}

If you want a filled circle, I would suggest you just set glPointSize to whatever size you want, and then plot a single point with glBegin(GL_POINTS) where ever you want your circle. Otherwise, you can use the above code with GL_POLYGON if you want more control. If you want a smoother circle, decrease the size of “inc”.

April 14, 2009Mark 6 Comments

Base62 Encode

If you have large integers and you want to shrink them down in size for whatever reason, you can use this code. Should be easy enough to extend if you want even higher bases (just add a few more chars and increase the base).

<?php

/**
* Converts a base 10 number to any other base.
*
* @param int $val Decimal number
* @param int $base Base to convert to. If null, will use strlen($chars) as base.
* @param string $chars Characters used in base, arranged lowest to highest. Must be at least $base characters long.
*
* @return string Number converted to specified base
*/
function base_encode($val, $base=62, $chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
if(!isset($base)) $base = strlen($chars);
$str = '';
do {
$m = bcmod($val, $base);
$str = $chars[$m] . $str;
$val = bcdiv(bcsub($val, $m), $base);
} while(bccomp($val,0)>0);
return $str;
}

/**
* Convert a number from any base to base 10
*
* @param string $str Number
* @param int $base Base of number. If null, will use strlen($chars) as base.
* @param string $chars Characters use in base, arranged lowest to highest. Must be at least $base characters long.
*
* @return int Number converted to base 10
*/
function base_decode($str, $base=62, $chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ') {
if(!isset($base)) $base = strlen($chars);
$len = strlen($str);
$val = 0;
$arr = array_flip(str_split($chars));
for($i = 0; $i < $len; ++$i) {
$val = bcadd($val, bcmul($arr[$str[$i]], bcpow($base, $len-$i-1)));
}
return $val;
}

(code updated 26-Aug-2011 for arbitrary precision using BC Math)

April 9, 2009Mark No Comments

Easy Current Page Tab

So, you have a bunch of links along the top of your page, and you want to highlight the current one when you click on it. Easy enough to do if you copy and paste the entire navbar onto every page and add some CSS to the current tab, but that’s just bad practice! You want to throw the navbar in a layout, and still have it work.

Well, here’s an easy solution! Just drop this in your layout:

<ul id="navbar">
<?php
$pages = array(
'url1' => 'linktext1',
'url2' => 'linktext2',
'url3' => 'linktext3'
);
foreach($pages as $url => $name) {
if($url == $currentPage) echo '<li class="current">'.$name.'</li>';
else echo '<li><a href="'.$url.'">'.$name.'</a></li>';
}
?>
</ul>

And make sure you set $currentPage properly. You could use $_SERVER[‘REQUEST_URI’] if your URLs are in the same format (leading and trailing slashes if necessary).

Update: Made a little wrapper function out of this too.

function list_links($links) {
global $currentPage;
foreach($links as $name => $url) {
$class = strtolower($name);
$class = preg_replace('`[^a-z\s]`', '', $class);
$class = preg_replace('`\s+`', '-', $class);
$class = trim($class, '-');
if(ltrim($url,'/') == $currentPage) echo '<li class="',$class,'"><a href="',$url,'" class="selected">',$name,'</a></li>';
else echo '<li class="',$class,'"><a href="',$url,'">',$name,'</a></li>';
}
}

This one adds a class to each <li> too so you can style it in your CSS.