Wednesday, June 16, 2010

CSS white-space

Through a number of possible values, the white-space property gives us, via CSS, a way of defining how the browser handles multiple white space characters and line breaks. Of course, the portion of the document that you can target is limited to whatever can be targeted via CSS selectors.



Here are the different values for the white-space property.

normal, nowrap, pre, pre-line, pre-wrap

CSS3 Selectors: Alternate Row Styling

Odd or Even Rows
li:nth-child(odd) { color: blue; margin-left: 15px; }
li:nth-child(even) { color: green; margin-left: 15px; }

Every 3rd Row
li:nth-child(3n) { color: orange; margin-left: 15px; }

Specific Row Styling
li:nth-of-type(3) { color: blue; margin-left: 15px; }
p:nth-child(5) { color: green; margin-left: 15px; }

First and Last Element Styling
li:first-of-type { color: blue; margin-left: 15px; }
p:last-of-type { color: green; margin-left: 15px; }

First Two Elements
li:nth-child(-n+2) { color: blue; margin-left: 15px; }

Last Two Elements
p:nth-last-child(-n+2) { color: red; margin-left: 15px; }

All but First and Last Elements
p:not(:first-of-type):not(:last-of-type) { color: orange; margin-left: 15px;}
p:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) { color: blue; margin-left: 15px;}

Source: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/

Tuesday, June 8, 2010

CSS3 Using "text-shadow" to avoid unwanted Images

CSS Syntax

.className {
text-shadow: #666 20px -12px 2px;
}

text-shadow accepts four values:

The color(#666)
The X-coordinate (20px), relative to the text
The Y-coordinate (-12px), relative to the text
The blur radius (2px), which means the amount of space the shadowtext is 'stretched', causing a blur effect. 0 means: no blur.

Reference:http://www.quirksmode.org

Tuesday, June 1, 2010

What's New and Enhanced in Photoshop CS5

New in PhotoShop CS5

Content-Aware Fill

Remove any image detail or object and watch as Content-Aware Fill magically fills in the space left behind. This breakthrough technology matches lighting, tone, and noise so it looks as if the removed content never existed.


Puppet Warp

Precisely warp or stretch graphics, text, or image elements to create unique new looks for your designs.

Enhanced in PhotoShop CS5

Superior HDR imaging
Create photo-realistic or surreal HDR images with unprecedented speed, control, and accuracy. Get better-than-ever results thanks to automatic ghost removal and greater control with tone mapping and adjustments, and even give single-exposure photos the look of HDR.

Faster performance across platforms
Speed up day-to-day imaging tasks and process very large images up to ten times faster by taking advantage of cross-platform 64-bit support. (Requires a 64-bit-capable computer with a 64-bit version of Mac OS, Microsoft® Windows® 7, or Windows Vista®. Actual performance varies depending on amount of RAM, driver types, and other factors.)

State-of-the-art raw image processing
Use the Adobe Photoshop Camera Raw 6 plug-in to remove image noise while preserving color and detail; add grain to make digital photos look more organic; enjoy more control as you perform post-crop vignetting; and more.

Efficient workflow
Enjoy productivity and creativity boosts thanks to dozens of features and enhancements requested by Photoshop users. Straighten images automatically, pick colors from an onscreen color picker, adjust the opacity of many layers at once, and more.

Better media management
Easily manage media with more flexible batch renaming, and access your assets in the context of what you're working on by using the customizable Adobe Mini Bridge panel in Photoshop.

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think