Category: "HTML / CSS"

ImageMagick Rounded Corners - CSS

I had a series of five 100x75 images, concatenated into a single image, and I wanted to display them as individual images with rounded corners.

To round the corners, I used the following ImageMagick command:

convert -size 100x75 xc:white -fill "#ffe" -draw "roundrectangle 0,0,100,75 10,10" -transparent "#ffe" mask.gif

It creates an image, dimensions of 100x75 pixels, with a white canvas. A rounded rectangle is drawn on it, filled with #ffe (any color will do). Next, the rectangle dimensions are given, as well as the rounding settings. Finally, the transparent option is used to indicate that the fill color is actually transparent. Be sure to use an image format (.gif or .png) that supports transparency.

A class was used to assign the mask, and an id was used to position the background image.


.dvPhone  
{
        float:left;
        width:100px;
        height:75px;
        margin:7px;
}
.dvPhoneNumber
{
        height:75px;
        width:100px;
}
#dvOffice
{
        background:transparent url(bg.jpg) no-repeat 0 0;
}
.round
{
        background:transparent url(mask.gif) no-repeat;
        width:100px;
        height:75px;
}


<div class="dvPhone">
<div id="dvOffice" class="dvPhoneNumber">
<div class="round">
<label>Office</label>
<input type="text" name="sOfficePhone" id="sOfficePhone" value="0000000000" />
</div>
</div>
</div>

Tested with IE7, FF3.

Related: http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles

Multi-Lingual Site Configuration with Apache

Most browsers send the prefered language to servers when they access sites. This can be used to select the appropriate content, using Apache’s mod_negotiation.

Sample .htaccess file

Options +MultiViews
LanguagePriority fr en
AddLanguage en .en
AddLanguage fr .fr

Files

$ more req*
::::::::::::::
request.html.en
::::::::::::::
Hello
::::::::::::::
request.html.fr
::::::::::::::
Bon Jour

If no preference is given, the page will display Bon Jour, otherwise, English readers will get Hello, and French will receive Bon Jour.

Using Crystal Icons with dojo's dijit tundra theme

The link above is a demonstration of the use of Crystal Project icons with dojo’s dijit tundra theme.

Crystal Project icons allow you to extend and customize tundra. Adding icons to inputs has the following advantages:

  • Many people can quickly look at the icon and enter the correct type of data, without reading the label or prompt. Obviously, this works best with familiar data types, such as times, dates, email addresses, and search strings.
  • If the inputs are in a table, the distance between the labels (column or row headings) and the inputs may be great enough that a quick visual reminder is valuable assistance for the user.
  • Multi-lingual applications almost always benefit from the addition of images.
  • The image are beautiful, they make the page look better.

The images chosen may have been intended for different uses. It is up to the designer to select the ones that work best.

There is also some overhead involved, each additional image is another HTTP request. The easiest way to improve perfomance is using browser caching, the next step would be to use ImageMagick to create sprites.

convert +append cp/16x16/apps/xclock.png cp/16x16/apps/yahoo_protocol.png new.png

http://wirehopper.com/design/new.png

PHP File Upload Example

This example shows the HTML and PHP to upload a file.

Browsers handle the MAX_FILE_SIZE input and accept attribute differently. Some will filter the files offered through the dialog box to only list those identified by the accept attribute. Some will allow you to select a file that is too large, and submit it to the server, without any content. In this case, the tmp_name is empty, error is 2, and size is 0.

In all cases you must validate the file on the server side.

HTML to upload a file:


<?php define('FILE_UPLOAD_MAX',min(str_replace('M','000000',ini_get('upload_max_filesize')),str_replace('M','000000',ini_get('post_max_size'))));
 ?>
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>upload demo</title>
		<link href="upload.css" rel="stylesheet">
	</head>
	<body>
		<h1>upload demo</h1>
		<form method="post" enctype="multipart/form-data" action="upload-file.php">
			<input type="hidden" name="MAX_FILE_SIZE" value="<?= FILE_UPLOAD_MAX ?> " >
			<div class="block">
				<label for="file">File</label>
				<input type="file" name="file" id="file" value="" accept="image/*">
			</div>
			<button type="submit">Go</button>
		</form>
	</body>
</html>

PHP to accept it:


<?php
header('Content-Type: text/plain');
define('MAX_FILE_SIZE',min(
        str_replace('M','000000',ini_get('upload_max_filesize')),
        str_replace('M','000000',ini_get('post_max_size'))));

function is_accepted($sAccept,$sFiletype) {
        $aAccept=explode(',',$sAccept);
        return in_array($sFiletype,$aAccept,TRUE);
}

function size_ok($iMaxSize,$iSize) {
        return $iSize <= $iMaxSize;
}

function upload(&$files,$sAccept='*/*',$iMaxSize=MAX_FILE_SIZE) {
        foreach ($_FILES as $k => $v) {
                if ($v['tmp_name']==='') {
                        continue;
                }
                // More robust type checking: https://www.php.net/manual/en/features.file-upload.php#114004
                if (!is_accepted($sAccept,$v['type'])) {
                        throw new Exception($v['type'].' files cannot be sent');
                }
                if (!size_ok($iMaxSize,$v['size'])) {
                        throw new Exception('File cannot be larger than '.$iMaxSize);
                }

               // do antivirus scan here
               $vname = $v['tmp_name'];
               system('clamscan '.escapeshellarg($vname),$result);
               echo $result;
               if ($result !== 0) {
                  die;
              }
              echo 'Scanned okay';
                // Thanks to: https://www.php.net/manual/en/features.file-upload.php#114004
                // strip out anything other than letters, digits, underscores, periods and dashes
                $name = preg_replace('/[^\w.-]/','',$v['name']);
                if ($name === '') {
                        throw new Exception('Invalid filename');
                }
                if (!move_uploaded_file($v['tmp_name'], $name)) {
                        throw new Exception('Upload failed');
                }
                $element = [
                        'filename' => $name,
                        'file' => $v['tmp_name'],
                        'content_type' => $v['type'] ];
                $files[] = $element;
        }
        return true;
}

$uploadFiles = [];
try {
        if (upload($uploadFiles, 'image/png,image/jpg,image/jpeg,image/gif', MAX_FILE_SIZE)) {
                var_dump($uploadFiles);
        } else {
                echo 'Upload failed';
        }
} catch (Exception $e) {
        echo $e->getMessage().PHP_EOL;
        error_log('File upload failed '.$e->getMessage());
}

Learn Every HTML Tag and Every CSS Property

It is worth knowing every HTML tag and CSS property. It will help you build pages more efficiently. The quiz in the link above, and in the big green box on the left, is a great way to test your memory.

Learn all the CSS properties as well. http://www.oneplusyou.com/bb/css_quiz

Check the answers you missed to find out what they are. Be careful, some have been deprecated for XHTML.

It’s also Fun!