Skip navigation

Category Archives: css


You can add content to a web page using css !!!

Using content property in combination with :before and :after pseudo-elements, you can add content to any element. Of course Opera support this with all elements (without pseudo). IE6, IE7 not supports this property.

/* CSS */
#box:before {
content: "This text is before the box";
}
#box:after {
content: "This text is after the box";
}

<!-- HTML -->
<div id="box">I'm inside box</div>
  • Though it is not advisable to generate content using css because css is for presentation, rather use JavaScript for that.
  • You can’t use html inside content; only text.

Note: I posted here because it surprises ME to know css can generate content. My fellow UI friends may aware about this.

Advertisements

Unless understood css position, it will make UI designers mad. Here are few points to remember.

  1. The static value is only used for overriding a previously set value. (Most cases)
  2. Elements with position:relative are positioned relative to themselves.
  3. A relatively positioned element remains in the document flow
  4. A relatively positioned element counts as positioned, even if we don’t shift it a single pixel in any direction
  5. What people normally mean by positioning, CSS-P or layers, is elements with position:absolute.
  6. Ironically, absolute positioning is relative. An absolutely positioned element is positioned relative to another element, called the containing block.
  7. The containing block of an absolutely positioned element is its nearest positioned ancestor
  8. Absolutely positioned elements are completely removed from the document flow.

Some useful articles


What is CSS Sprite?

The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.

or

Get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.

In older days, web designers were “slicing” images to make pages load faster. But it fake viewers eyes that the page was loading faster by loading bits and pieces all over at once.

Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.

Tool available to automate. SpriteMe

Cons: They don’t do repeating graphics or it is difficult to achieve.