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
Wednesday, June 16, 2010
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/
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
.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
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
Subscribe to:
Posts (Atom)