All posts in Graphics

Create a watermark effect with CSS

Create a nice watermark effect with CSSIn some situations it can be handy to display information in a image as a watermark.

Traditionally, watermarks are added manually by graphical programs like Photoshop, which can be very time consuming.

Adding watermarks with CSS can make it very fast and flexible to add a watermark to many images.

In this post we’ll build a simple CSS class that can display a text on top of a image like a watermark

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Create nice image caption with CSS

Create a nice image caption with cssTraditionally, image captions are displayed next to, or below a image. However if you have limited space, or want to increase the visibility of the caption, displaying the image caption as part of the image can be interesting.

In this post you’ll learn a  simple CSS trick, that makes it easy to ad a image caption as a overlay on your images.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Pixlr – smart online image editing

Try the free online photo editing tool - PixlrTraditionally graphical programs like Photoshop, Paint Shop Pro and Gimp has been installed locally on your desktop PC, however with the cloud philosophy gaining strength, the first online graphical programs are being launched. In this post we’ll take a look at the free online program Pixlr
Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Dynamic XML and flash (swf) charts

Create dynamic xml swf charts for your website or blogBy combining the power of XML and Flash (SWF), you can create great looking and user friendly charts for your website or blog.

XML makes the chart dynamic and easy to maintain and Flash (SWF) enables a feature rich user experience with great interaction possibilities.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Spice up your site with Google font API

Google font apiWith the new Google Font API you can easily create nice text effect on your site without using graphics. Making nice text effects on the web, normally requires creation of graphical images that contains the text, since only a few fonts are universally supported across different browsers and operating systems.

Text as images has the advantage of great control over the end result in the users browser, but also the problems with potentially slower download times due to the size of the image containing the text effect, and less flexibility in maintenance since changes to the text means creating a new image.

In this post we’ll take a look at the Google Font API, that offers a new solution to nice fonts on the web.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Advanced image resizing in PHP

advanced image resize in PHPPHP has some nice features for resizing and modification of images. In this post we’ll build a script that can take local or remote images, resize the images based on a bounding box, and optimize the files, so the file size gets as small as possible.

The script saves the resized and optimized images as jpg files.

This script can be very useful if you wants to automate downloading and optimization of external images, or has a big collection of images that needs to be resized.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Speed up your site with image sprites

How to make css image sprites

There are several techniques for speeding up your site. If your site is using many graphical objects this also means the your users browser needs to establish many HTTP connections to display all the images. This can slow down your site. By implementing image sprites on your site, you can radically reduce the number of HTTP requests required t display your site, and thereby speed up the rendering of your site.

This post gives you the background behind image sprites, and a example on how to implement image sprites on your website.
Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS