Text Transform with CSS

By -
Sometimes, designer has to deal with output from CMS. If the CMS (Content Management System) doesn't validate the text case but the heading text for the page must be in all-Cap (Uppercase). Don't worry, you can control the case of text easily with CSS. Example -

h1 { text-transform:uppercase} - this will make the whole text for h1 to be in uppercase

h1 {text-transform:capitalize} - this will make each word in a text starts with a capital letter

h1 {text-transform:lowercase} - this will make the whole text for h1 to be in lowercase

Comments

Post a Comment

Popular posts from this blog

Font sizes

By -
There's three popular ways to define the sizes for font using CSS - using em, pixel (px) and percentage %. For web designer, every design software we use such as photoshop and flash only allow the pixel fonts. It's fine with using px as font size but visually impaired users won't be able to resize your fonts using browser built-in font resizer tool (especially in IE). One of the duties of designers is to make the site as accessible as possible. So my advise for designers - set the body font in em first, an em is roughly equivalent to 16 pixels. Then set the rest of the font size for your elements using percentage %. Example body { font-size:1em; } - which is the same as setting body font size to 16px p { font-size:80%;} - which is the same as setting the font size to approx 13px By using em as the base font size, now users will be able to resize the fonts by just using the browser built-in resizer if the texts are too small.
Read more

Bg img & Color in css

By -
This example show that the bg repeat value may be applied on it's own, independent of any other bg properties, or a shorthand value within a longer bg rule. Controlling repetition is simple with the bg-repeat proprety built into css. Potential values are repeat, no-repeat, repeat-x and repeat-y. These allow you to respectively choose between a repeating images, an img that is applied but doesn't repeat, and an img that only repeats in a single direction. Background Image repeat-x only Here is the code body { background: #FFFFFF url(img/bg01.jpg) repeat-x 0px 0px; } Note: repeat-x 0px(left space) 0px(Right Space); Background Color body { {background-color: #00ff00} } For more sample. please go to www.w3schools.com
Read more

Border Control with CSS

By xKiyora -
You can put a border around just about anything on your page and with CSS customize it to match your page's color combinations, draw attention to a particular element, or emphasize important points. You can change the settings. #border{ border-style:solid; border-color: red; border-width:5px; } Unique sides Think about how many wooden picture frames are constructed. When four separate pieces are connected, they form the top, right, bottom, and left sides of the frame. Just like you could glue together four pieces of wood with different colors and widths to make a picture frame, you can also create a border that looks different on each side. All you have to do is set the property of each of the different sides: border-top border-bottom border-right border-left #colorful{ border-style:solid; border-top-color:blue; border-bottom-color:red; border-left-color:yellow; border-right-color:green; border-width:20px; border-top-width:10px; ...
Read more