background-clip:text - April 4th, 2008

CSS 3 is on its way and over time i aim to introduce you to all the new stuff that is on its way, Currently Safari 3 is the best supporting browser for Css3. This year though we will see Firefox 3 so we need to wait and see what comes with that.

A new Css feature that has been revealed is the Background clip. In a nutshell this feature will let you apply a background image that will only be applied to the text on a page. I suspect that when it is released fully there may be other objects that can be clipped like a border or looking forward to another Css3 feature maybe you could apply this to shadow effects.

Read the rest of this entry »

Posted in CSS, Web Design | No Comments »

CSS Global White Space Reset: Why You Should Use It - April 2nd, 2008

It’s well known that every browser interprets HTML elements differently. This is just one of the reasons why it can be extremely difficult to make CSS based layouts look consistent across all browsers.

Using CSS rules to reset all elements is a step forward in the right direction, and will definitely help you reducing the amount of div, classes, id’s you have to write.

Cameron has described this very well in his blog:

The most oft-cited reason for not using semantic HTML is the perceived control that can be achieved by using tables/a lot of divs. By removing this “mystery” dimension from the size of elements, it could help people to become accustomed to styling semantic HTML.

Example CSS Reset Rules

Firstly, it is important to remember that the following rules cancel the padding, margin, font styling, list styles of every single element. It may sound a bit daunting having to re-apply the styles again on your main stylesheet, but believe me it could save you a lot of time!

Here’s a sample set of reset rules, feel free to use it and modify it as you see fit:

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
table { border-collapse: collapse; border-spacing: 0; border:0}
caption, th, td, center {font-weight: normal;text-align: left; vertical-align: top;}
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dl, li, dt, dd dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; }
font { color: inherit !important; font: inherit !important; color: inherit !important; }

Tino

Posted in Web Design | 1 Comment »

 Next »