Tag : css

CSS Transparency Settings for All Browsers

Written by liyanting on date 20 August 2010 in CSS .

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good ...

Tags : css transparency

Short url : Unavailable

Comments : Not yet comments. Be first to comment !

Creating a Web App from Scratch-Part 4 of 8:HTML&CSS

Written by liyanting on date 18 August 2010 in CSS , Html .

It’s time to get our hands dirty with some markup!

We know we have a couple different pages to deal with here. The main page of course, which acts as both our list page and sales page depending on login status. But then we have sign in and sign up pages and account pages. So let’s be smart and work modularity. That means we’ll make files like “header.php” and “close.php” that we can include on multiple pages so we don’t have to repeat common code (e.g. the DOCTYPE, analytics code, and ubiquitous things ...

Tags : css html

Short url : Unavailable

Comments : 704 comments

Nice Techniques for CSS Image Replacement

Written by liyanting on date 11 August 2010 in CSS .

The recent posting “Rethinking CSS Image Replacement” generated some pretty good discussion and got me thinking deeper about this issue. As a quick review, CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

image-replacement-example.gif

Reader Dave Madden had pointed out Dave Shea’s 2003 article Revised Image Replacement where he shows the many different ...

Tags : css image replacement

Short url : Unavailable

Comments : 35 comments

CSS Sprites:What They Are,Why They're Cool,and How To Use Them

Written by liyanting on date 04 August 2010 in CSS .

This post was originally co-authored in late 2007 by me and Volkan Görgülü, I’m updating it now to improve it a bit and make it more current.

You’ve heard of them, but…

Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?

simple-css-sprite

Here is an example of ...

Tags : css

Short url : Unavailable

Comments : 1 comment

The CSS Box Model

Written by liyanting on date 03 August 2010 in Html .

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior.

What we haven’t talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:

the box

If you are a Firebug user, you might be used to the diagram like this, which does a nice job of showing you ...

Tags : css

Short url : Unavailable

Comments : 2 comments

© 2008-2010 KPSOFT INC. KPCMS