CSS Code Examples

CSS Opacity Cross Browser Compatible

Tuesday, 25 May 2010 03:29 Written by NineVeh Coding

Please Vote

1
2
3
4
5

(0 votes)

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

Old Opacity Settings

Here are the old opacity settings that were required for older versions of Firefox and Safari:

#myElement {
     -khtml-opacity: .5;
     -moz-opacity: .5;
}

Tags:

Category: CSS

Last modified on Tuesday, 25 May 2010 07:03

Using CSS & Images tp Create Round Corners

Saturday, 15 May 2010 11:34 Written by NineVeh Coding

Please Vote

1
2
3
4
5

(1 vote)

I will be posting many examples and tests as been study the different ways with dealing with round corners for both backgrounds of your text or with the headers or title bars of your pages. Also will cover buttons with the round corners with both image based with <a href="#"> tag along with using the input and button tag also.. For now this is a just a basic example as I am just getting the template layout for each section of the site and these early posts are really just a test before i start posting the detailed examples.

Tags:

Category: CSS

Last modified on Tuesday, 25 May 2010 04:06

HTML tables with Border Collapse and Header

Wednesday, 21 April 2010 15:23 Written by NineVeh

Please Vote

1
2
3
4
5

(1 vote)

Small example of of html tables using the Table Header tag with some CSS. The border-collapse property specifies if table cells should have their own border, or share a common border. The screen shot below shows a table where each cell has its own border.

CSS Code

Paste this CODE in the head section of your html page.

<style type="text/css">
table{border-collapse:collapse;}
table, td, th{border:1px solid black;padding:6px;}
table th{background:#F2f2f2;}
</style>

Tags:

Category: CSS

Last modified on Saturday, 22 May 2010 05:40

CSS @import and link for CSS?

Wednesday, 21 April 2010 14:46 Written by NineVeh

Please Vote

1
2
3
4
5

(1 vote)

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and <link>. How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

The Difference Between @import and <link>

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.

<link> - Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the <head> of your HTML document like this:

<link href="/styles.css" type="text/css" />

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

<style type="text/css">@import url("styles.css");</style>

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it.

Tags:

Category: CSS

Last modified on Tuesday, 18 May 2010 01:28