admin » 23 December 2009 » In Css Articles »
Today we’ll take a look at one of the new features in css3, by using the selector. Css3 is packed with some new, great features, which simplifies the styling of lists. We’ll show you how to use Alternative row styling with pure css. This is something that you typically would have to use either javascript or programming (php,asp) to achieve earlier, but here you will see how to do this with just a few lines of css.
Be aware that not all browsers are yet supported to use css3. IE does not yet support this, but if you give it a try in Firefox, Opera or Safari, you’ll see how nice this plays!
This is the result:
As you can see, the even and odd is ehh..even and odd! The Every third line can be set to whatever you want. Take a look at the css:
/* Css3 selector demo by www.csstemplatesweb.com */
* { margin: 0; padding: 0; outline: 0; }
body { background-color: #2f3135; color: #fff; }
h1 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 40px 0; }
h2 { font-family: "Tahoma"; color: #ececec; font-weight: normal; margin:0 0 30px 30px; }
h3 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 10px 30px; }
img { border: none; }
#container { width: 960px; margin: 20px auto; }
ul { margin: 0 0 15px 60px; }
ul.odd li:nth-child(odd) { color: blue; margin-left: 15px; }
ul.even li:nth-child(even) { color: green; margin-left: 15px; }
ul.every3 li:nth-child(3n) { color: orange; margin-left: 15px; }
p {margin:20px 0 0 40px;}
a {color:#fff;} |
The only thing you need to look at here, is the 4 lines starting with ul. It’s pretty self explaining 
The html markup looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Css3 selectors</title>
<link rel="Stylesheet" href="styles.css" />
</head>
<body>
<div id="container">
<h1>Css3 Selector demo</h1>
<h2>Alternate row styling</h2>
<h3>Even</h3>
<ul class="even">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
</ul>
<h3>Odd</h3>
<ul class="odd">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
</ul>
<h3>Every third row</h3>
<ul class="every3">
<li>A sample text here 1</li>
<li>A sample text here 2</li>
<li>A sample text here 3</li>
<li>A sample text here 4</li>
<li>A sample text here 5</li>
<li>A sample text here 6</li>
</ul>
<p>For more tutorials, articles and css templates, please visit <a href="http://www.csstemplatesweb.com">www.csstemplatesweb.com</a></p>
</div>
</body>
</html> |
That’s it! You can download the files below if you want to play with it. Please share this if you like it!
Continue reading...
Tags: css, css3, design, html, layout, web design, webdesign
admin » 30 April 2009 » In Css Articles »
Css3 is around the corner, well, at least for non IE users. The new beta of Firefox (3.5b4) has built in feature for support, which allows us to test some of the new features in css3.
Let’s start by looking at one of these features, which is rounded corners
As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:
<p class="roundedbox">The rounded box</p> |
And the css code:
.roundedbox
{
background-color: #0066cc;
color: #fff;
line-height: 20px;
width: 120px;
padding: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
} |
It’s only the 2 last lines in the css code that applies the rounded corners effect. The decleration of this css3 code will be border-radius, as seen in line number 3 from the bottom. But until this is in place, we need to use the 2 lines to tell the browsers to use prefixes. The first: -webkit- is for Safari, and the last one: -moz- is for Firefox.
Continue reading...
Tags: css, css3, web 2.0, web design, webdesign
admin » 28 April 2009 » In Css Articles »
It is very easy to make an image transparent, by using opacity, using only 1 line in your css. In this example, I’ll set the opacity to 40%. This is the html code:
<img src="#" width="150" height="150" alt="image" class="transparent" /> |
You can see that we call for the class “transparent”, in the css class transparent, we have the following code:
.transparent{ opacity:0.4;filter:alpha(opacity=40) } |
This is all that it takes to show a tranparent image in css. You can also use the same code for transparency on text. Note that Firefox uses the property opacity:value for transparency, IE uses filter:alpha(opacity=value). This works in all modern browsers.
Here you can see a screenshot, one with the opacity set, and one without the opacity:
In CSS3, the syntax for transparency/opacity will be “opacity:value”.
Continue reading...
Tags: css, css3, html, opacity, transparent, web design, webdesign
admin » 23 April 2009 » In Css Articles »
It looks promosing with the new CSS3, many new features is on it’s way. Today, we took a look on how to make a 2 column list layout, using CSS3 properties.
The result, viewed in Firefox 3:
css3-two-column-layout
As you can see, the column is split in 2. This is done by using the following css code:
body {
font-size: 62.5%;
padding: 30px;
}
ol {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
margin-bottom: 1.5em;
}
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
} |
A width is defined and the column-count and column-gap properties automatically split up the space and position the list elements. Note that the prefixes -webkit- and -moz- are used here. In the long run, these will be dropped, but for now, they are required to make these properties work in Firefox, Safari and Google Chrome.
The html code is pretty straight forward:
<body>
<h1>Testing two column list layout with CSS3</h1>
<ol class="twoColumnList">
<li>Testing CSS3</li>
<li>Looks like Firefox has the best support</li>
<li>Chrome is also good</li>
<li>IE, well...it's still IE</li>
<li>Venenatis</li>
<li>Nam magna enim</li>
<li>Accumsan eu</li>
<li>Blandit sed</li>
<li>Blandit a eros</li>
<li>Quisque facilisis</li>
<li>Try it out yourself</li>
</ol>
<p>Check out more stuff on <a href="http://www.csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body> |
Try it out for yourself, good luck!
Continue reading...
Tags: css, css3, web 2.0, web design, webdesign
