I have decided to release many of the css templates for free, and have also removed the earlier need for registration to be able to download the free templates.
The reason for doing this, is that I’m tired of registrating at all the sites that offers something for download. Most of the sites just send out spam mails that I’m not interested in anyway, so I made myself a “fake” email address to receive all these registration and spam emails (sounds familiar?). So, from now on, all the css templates that is available for free, requires no registration in order to download.
Well, I’m happy about this, and I hope that you are too!
admin »23 December 2009 »In Css Articles »No Comments
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:
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Css3 selectors</title><linkrel="Stylesheet"href="styles.css"/></head><body><divid="container"><h1>Css3 Selector demo</h1><h2>Alternate row styling</h2><h3>Even</h3><ulclass="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><ulclass="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><ulclass="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 <ahref="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 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:
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.
admin »28 April 2009 »In Css Articles »No Comments
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:
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”.
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.
<body><h1>Testing two column list layout with CSS3</h1><olclass="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 <ahref="https://csstemplatesweb.com"title="Csstemplatesweb">Csstemplatesweb.com</a></p></body>
admin »20 November 2008 »In Css Articles »No Comments
Are you tired of pulling your hair when you test your new, amazing website in different browsers? Maybe the div’s is not where you want them to be, the font-size is different etc. There is hope!
The purpose of css reset / stylesheet reset is to neutralize the areas where the different browsers is inconsistent, e.g margin, line-height, padding and so on. When using a css reset, all the styles that are reset in the stylesheet is reset to “zero”, giving all the browsers the same starting point.
Applying the css reset is simple. Luckily there are many examples of reset stylesheets on the web. I like to use . All you have to do to apply the css reset from Yahoo, is to include the following line in your html file, before you link to your own stylesheet:
You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.
It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.
This is how you can style a link to an external site, using css:
What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” – which of course is an external link.
And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:
This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.
To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.
How to make the css tooltip:
You have to put the tooltip text inside the span attributes. The html look like this:
This is just some text, and if you <ahref="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!
admin »20 February 2008 »In Affiliate »No Comments
If you’re a webdesigner, why not sell your templates at CssTemplatesWeb? It’s easy!
You don’t even know how to code (x)html. Just send your layout that you’ve made in Photoshop as a .PSD file, and I will make the necessary steps to code it to a valid css template, or send the finished template. Either way, you’ll make money!
What’s in it for me?
Money, fun and learning.
If you send a finished coded web template, including all images, css, htm and psd files, you’ll get 70% of the selling price at CssTemplatesWeb
If you send the layout as a psd file only, you’ll get 50% of the selling price of the finished coded web template sold at CssTemplatesWeb
What type of templates?
There’s no limitation on what type of templates that is put out for sale on CssTemplatesWeb. Here’s a list of the most common types of templates:
xhtml/css based templates, with psd file included
WordPress themes
Zen Cart themes
Flash templates
Photoshop files (buttons, logos etc.)
And so on..
Pricing
The price for xhtml/css templates will be $9. The other types of templates is up to you to decide the selling price. But the price can not be more than $50. This is because we want to have a price guarantee for all our customers.
Payment
All payment is done with Paypal. This is a secure payment provider, offering options to pay with Visa, Mastercard, AMEX and Discover. Customers do not have to create Paypal account to pay. If you want to sell your templates, you have to create a Paypal account, because your payment will be done with Paypal.
Submit
Are you ready to submit? Then go ahead! Submit Form
admin »19 February 2008 »In Xhtml Articles »No Comments
XHTML stands for EXtensible HyperText Markup Language
XHTML is aimed to replace HTML
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is a W3C Recommendation
XHTML 1.0 became a W3C Recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.
XHTML is compatible with HTML 4.01, and all new browsers have support for XHTML.
Why XHTML?
We have reached a point where many pages on the WWW contain “bad” HTML, the following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:
XML is a markup language where everything has to be marked up correctly, which results in “well-formed” documents.
XML was designed to describe data and HTML was designed to display data.
Today’s market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a “bad” markup language.
Therefore – by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future – XHTML.
XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write “well-formed” documents now, that work in all browsers and that are backward browser compatible
I have decided to release many of the css templates for free, and have also removed the earlier need for registration to be able to download the free templates.
Css3 Selectors demo (975 bytes, 294 hits)
