CSS Gems You Might Be Missing Out On
clip:
A clipping area describes the portions of an elements rendering box that are visible. In less geeky terms, think of this property as “cropping” your element to size. A great use can be for creating thumbnails of images that already exist without having to resize them. Throw some JS into the equation and you can pull off some pretty cool effects.
Example Code:
#element{position:absolute; width: 50px; height:50px; clip: rect(5px 40px 40px 5px) }
Seifi.org does a nice write up on using clip to create thumbnails. Have a read! http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
empty-cell:
When you’re using tables the right way- to display tabular data- this little gem gives you an easy way to remove the borders from an empty cell. Note that IE does not allow you to change this property.
Example Code:
table { empty-cells: hide; }
Possible values include ‘inherit’, ’show’ and ‘hide’. Show is the default value.
quotes:
This is a nice little way to get sexy quotes to appear on your site without having to use any images. Some of you might already be using the blockquote tag which is a good start, but the rarely seen CSS quotes property sets what glyph you want to use for the quotation character.
Example Code:
blockquote{ quotes: “ ” }
Here is a nice writeup on Creating CSS Curly Quotes Without Images You need to use the HTML entities since you cannot place actual ” or ‘ symbols in the property. Some optional glyphs include:
|
" | |||
|
' | |||
|
‹ | |||
|
› | |||
|
« | |||
|
» | |||
|
‘ | |||
|
’ | |||
|
“ | |||
|
” | |||
|
„ |
font-variant:
This is a simple property but still a goody. Gives you the option of small-caps which is great for you typography nuts.
Example code:
h3{font-variant:small-caps;}
This is just a normal chunk of text. This is a chunk of text with small caps. Isn’t this swell?
text-indent:
You think that this would be used more often, but it’s really not. Use this to push in the first line of text in your paragraph.
Example code:
p{text-indent:20px}
February 9, 2009
Text-indent isn’t a replacement for padding-left. Text indenting indents the first line of text within a block-level element, where padding ensures the entire contents of the block-level element are “indented”. Additionally, the quotes attribute doesn’t work in IE6, so unfortunately I’ve still been unable to use it on projects.
February 9, 2009
Ah, good catch, it is now corrected.
February 9, 2009
Great tip on font-variant. That should come in handy often. I’m surprised it’s not used more.
August 31, 2009
[...] CSS Gems You Might Be Missing Out On | That Css Guy! http://www.thatcssguy.com/css-gems-you-might-be-missing-out-on – view page – cached A clipping area describes the portions of an elements rendering box that are visible. In less geeky terms, think of this property as “cropping” your element to size. A great use can be for creating thumbnails of images that already exist without having to resize them. Throw some JS into the equation and you can pull off some pretty cool effects. — From the page [...]