Css Selectors Demo
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 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:
<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="https://csstemplatesweb.com">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!
Css3 Selectors demo (975 bytes, 296 hits)
Continue reading...
Tags: css, css3, design, html, layout, web design, webdesign
10 Free fonts
admin » 20 December 2009 » In fonts »
For any web designer, it’s good to have a collection of fonts too choose among. Over the past i’ve stumbled upon many great fonts, and some of the fonts are for free. All the fonts in this list is serif typefaces that is suited both for the web and print, and they are free of charge.
-
Fontin
This font is best used as a small font, great for webdesign
-
Calluna Regular
Designed by Jos Buivenga, this is a very popular typeface
-
Medio
This font is designed by dotcolon, a very good font
-
Sling
Sling is available in normal, bold and light version
-
Salernomi
Designed by Julius B. Thyssen, this typeface is an elegant font
-
Tex Gyre Schola
Another fine font to use for your web or print project
-
Steinem
Another beautiful free serif font
-
Novello Pro
Although the name of this font says “Pro”, it’s still free, but it’s still pro! A modern and pro typeface
-
Lido STF
This is a font based of the Times New Roman font
-
Jura
The Jura font is a font is just wonderful
As you can see, you don’t have to spend hundreds of dollars on fonts, there are actually many great fonts available for free. Give them a try in your upcoming project!
Continue reading...
Tags: design, fonts, layout, typefaces, typography, web design, webdesign
How to create a favicon
admin » 05 May 2009 » In Web developer tips »
A favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.
Favicon information
Favicons have the extension .ico, and they must be named favicon.ico. The dimension of the icons must be 16×16.
Photoshop
To make .ico files in Photoshop, you need to download a plugin. This can be found here, it’s a Windows Icon Photoshop plugin. When you have done this, then you can start by creating a new file, but remember that it needs to be downsized to 16×16, so you can create a new file with the dimensions 128×128, 64×64 and so on (you get the idea?). Then, design your new amazing looking favicon, and last but not least, go to Image Size and click on Resample Image. This option is better than just selecting Image Resize, because it will make sure that the image does not blur when you scale it down.
Upload the icon
The only thing you need to remember here, is to upload it to your sites root directory.
Edit your header
You also need to edit the header section of the files in your website. It should look like this:
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
|
That’s it! Now you can test in your favourite browser, it looks better now, right?
Continue reading...
Tags: design, html, layout, logo, style, web design, webdesign, website, xhtml
Generate backgrounds online
admin » 23 April 2009 » In Web developer tips »
A nice background is very important on every website. But sometimes it can be hard to come up with a good idea on what background image or pattern to use. Luckily, there are some good online background generators on the web. This is a list of 15 background generators, that will create patterns, stripes, gradients and tartans!
1. Patterncooler
2. BgPatterns.com
3. Patterns from Colourlovers.com
4. StripeGenerator.com
5. StripeMania.com
6. StripedBgs.com
7. StripeDesigner.com
8. TartanMaker.com
9. Dotter by PixelKnete.de
10. Gradient Image Maker by DynamicDrive
11. Ogim – Online Gradient Image Maker
12. Gradient-Maker by SecretGeek.net
13. Background Image Maker by Rails2u.com
14. TileMachine.com
15. bgMaker by Ventdaval.com
As you see, there are a lot of options for making background for your website available on the net. Have you tried/used any of these resources? Please, write your opinion in the comment field below.
Continue reading...
Tags: color, color scheme, colorschema, colorscheme, design, design generator, gradients, layout, online design tool, patterns, stripes, style, tartans, web design, webdesign
Web 2.0 Design Generators
admin » 08 May 2008 » In Web developer tips »
What about spicing up your website with some Web 2.0 design? Web 2.0 styles have been very popular in the last couple of years, and thus, many online generators have been made. If you’re looking for web 2.0 buttons, badges, logos or backgrounds, there is a free online generator waiting for you!
Stripe Generator:
Stripe Designer:
Quick Ribbon:
Web 2.0 Logo Creator:
Ajax Loader Generator:
Tabs Generator:
Buttonator:
Web 2.0 Badges:
Freshbadge:
[ad#PostsBottom]
Continue reading...
Tags: design, design generator, logo, online design tool, web 2.0, web design
