Paper Curl in Flash

Posted 24 April, 2009 in Other Stuff

flash-paper18

In this tutorial we will be looking at how to create a paper curl in Flash. We will also be adding some texture to the paper using a bitmap. (more…)

Flash Obama vector illustration tutorial

Posted 23 April, 2009 in Other Stuff

barack-obama

This is a tutorial on taking a sketch and creating a flash vector illustration with it. The subject in this case will be the American president, Barack Obama. (more…)

JavaScript hide email address

Posted 23 April, 2009 in Other Stuff

If you want to avoid spam robots crawling your email address, then the following bit of code can help. It breaks up the address, and uses javascript to present it properly to the end user. Just replace your email address with the following, changing id to your name, dom to the site name and tag to the site name tag such as com or net.

<script type=”text/javascript”>
id = “johndoe”;
dom = “example”;
tag = “com”;
document.write(‘<a href=\”mailto:’ + id + ‘@’ + dom + ‘.’ + tag + ‘\”>’);
document.write(id + ‘@’ + dom + ‘.’ + tag + ‘</a>’);
</script>

CSS align background image center

Posted 20 April, 2009 in Other Stuff

If you want to center and middle align a background image, use the following CSS code:

body {
background: #000 url(images/background.jpg) no-repeat center;
}

If you want a fixed image, center aligned but not middle aligned, try this:

body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50% 0%;
}

CSS cursor styles

Posted 19 April, 2009 in Other Stuff

You can control the cursor style using the CSS ‘cursor’ property.

For example, to make a <p> use a crosshair cursor then sue the following CSS:

p {
cursor:crosshair;
}

The following is a list of al the cursor styles. Mouse over them to see the cursor change.

auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
progress
help

CSS centering content on page

Posted 19 April, 2009 in Other Stuff

center div Centering your content on a page using CSS is not complicated once you know how:

You need to create a content or container div that all the content goes into.
In your css you need to give the content container a width and then set the left and right margins to auto.

Example HTML:

<body>
<div id=”content”>
<!– Content goes here –>
</div>
</body>

Example CSS:

#content {
margin-left: auto;
margin-right: auto;
width: 500px;
}

Linux for designers

Posted 18 April, 2009 in Other Stuff

A tough choice!

I use a PC. I can’t stand the Mac tax and the Mac image. I don’t mind PCs; I understand them, but I am growing very fond of Ubuntu, one of the Linux alternatives to Macs and PCs. The problem is that I do a lot of design work and as a designer I am married into adobe. It was a shotgun wedding, but there we are. Adobe don’t do Linux.

Adobe now have a monopoly (or as good as) in the field of design software, and as long as they don’t do Linux, I can’t make the move. I know there are alternative packages out there, but adobe make very, very good bits of design software. I hate that there is no real competition. The other problem is that as a designer I need my software to be 100% compatible with everyone else’s. Sure, file formats can be read but it always goes wrong and always when you are working to a deadline. So as long as Adobe don’t do Linux, I am stuck with a PC.

Don’t get me wrong. Adobe are not anti-Linux, they just have not spent the time and energy needed to port their top products to the platform.

Here are three of the main Adobe packages with some Linux alternatives:

Adobe Illustrator

Xara Xtreme for Linux
Inkscape

Adobe Photoshop

GIMP
Krita

Dreamweaver

KompoZer
Nvu
Bluefish

Make a div semi-transparent

Posted 18 April, 2009 in Other Stuff

This does not work in all browsers but seems fine in the latest ie and firefox. Just add the following to the style of the div:

filter: alpha(opacity=50);
-moz-opacity: .50;

It takes two lines of code. One for ei and the other for firefox. The numbers is how see-through you want it. The higher the number the more solid the colour.

Remember that the div also needs a backgroud colour.