DevTouch.net

The CSS Letter-Spacing & BR Tag Glitch

DevTouch — Tue, 15 Sep 2009 06:35:00 +0000

If you are using a custom letter space (e.g. letter-spacing: 2px) such as to make a narrow font more legible or simply for stylistic reasons, you might have noticed that BR (break) tags used within the scope of this styling do not work properly. Instead, your new lines simply appear as continuations of the preceding lines, resulting in a single block of text...

Smooth (Long-Exposure) Waterfall Effect

DevTouch — Fri, 24 Jul 2009 19:48:28 +0000

This is a very easy tutorial showing how to give a waterfall the smooth texture you would get by using a long exposure when taking the picture. The technique takes just a minute to complete and gives you a very professional, realistic result. You can use the technique on just about any waterfall there is, and anybody can do this!

Fluid Tableless Graphic Borders Using a Nested Push

DevTouch — Tue, 12 May 2009 17:58:11 +0000

Implementing fluid graphic borders used to be very intuitive back when table layouts were in vogue. You would simply create three columns and tile your border images vertically along the outer two columns. Using this format, expanding the width of your website was a simple matter of expanding the width of the center column...

Put a Realistic Camouflage Pattern on Textured Cloth

DevTouch — Thu, 19 Mar 2009 19:44:19 +0000

The Camouflage Pattern This technique can work on virtually any combination of pattern and fabric texture. In this article, we'll be creating a composition using camouflage and a cotton cloth. First, we need to work on a large canvas so that we can get ample variations in the camouflage pattern. So start a new document measuring 1500px by 1500px. When we're...

Add a Realistic Rainbow to Your Photograph 2

DevTouch — Sun, 15 Mar 2009 05:36:23 +0000

Comet Rainbow Effect Last week, we looked at creating primary and secondary rainbows in Photoshop, where I covered the basic properties of rainbows and then demonstrated the process of adding a fully contained rainbow to a photograph as shown in the top left image. This time, we'll make a partial close up rainbow for a little more of a dramatic effect...

Add a Realistic Rainbow to Your Photograph 1

DevTouch — Sat, 07 Mar 2009 21:32:10 +0000

Rainbow Colors The rainbow spectrum is commonly known as the Newton mnemonic, Roy G. Biv, which stands for red, orange, yellow, green, blue, indigo, and violet. In a primary rainbow, which is the type we typically see, the spectrum begins on the outer edge, meaning the outermost ring is red and the innermost ring is violet. If your intention is realism, this is...

24 Beautiful Nature Scene Landscape Desktop Wallpapers

DevTouch — Tue, 17 Feb 2009 22:51:33 +0000

Here is a gallery of some of my favorite landscape works from DeviantArt. Not every piece I wanted to share was available as a high resolution wallpaper, so this gallery is distilled. But I was able to dig up 24 of these gorgeous high definition photos for your enjoyment. All beautiful works and all over 1000 pixels wide. How to download these: Click a thumbnail below...

Minimal Style Lightweight Drop Shadow For Images

DevTouch — Sun, 01 Feb 2009 08:55:50 +0000

While a simple traditional border helps a picture gain page presence, a drop shadow takes it up a notch by providing it with a more artistic interest, and can easily be achieved using CSS without the use of additional graphics. Minimalistic Drop Shadow As demonstrated to the right, we just need to give the picture a border and specify the styling of the 4 sides individually...

Colorize a Black & White Photograph Image

DevTouch — Fri, 30 Jan 2009 23:20:21 +0000

Original photo by Alex Patru. The above colorization took about an hour to complete with very basic Photoshop coloring methods. You can certainly achieve even more interesting results by putting more time into yours. The Mechanical Aspect Of Colorizing While there is no automatic way to achieve a result that matches the quality and detail you see above...

Graphic Menus w/ Flickerless Image Swapping

DevTouch — Tue, 27 Jan 2009 12:12:42 +0000

Today, we're going to learn how to create a purely CSS mouseover image swap in a menu, involving graphic backgrounds and plain anchor text, as demonstrated at the top of my Citrux Blogger template. Eliminating the Flicker Now if you've ever used a menu that features a rollover image swap, you've probably noticed the annoying flicker that occurs...