Tag Archive > web design

Free Css Templates

» 17 January 2010 » In Misc » No Comments

free css templatesI 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!

Still reading? Go download some css templates!

Continue reading...

Tags: , , , ,

Css Selectors Demo

» 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:

css selector demo

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:

?View Code 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:

?View Code HTML4STRICT 

 
<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!

Download: Css3 Selectors demo  Css3 Selectors demo (975 bytes, 294 hits)

Continue reading...

Tags: , css3, , , , ,

10 Free fonts

» 20 December 2009 » In fonts » No Comments

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.

  1. Fontin
    This font is best used as a small font, great for webdesign
  2. Calluna Regular
    Designed by Jos Buivenga, this is a very popular typeface
  3. Medio
    This font is designed by dotcolon, a very good font
  4. Sling
    Sling is available in normal, bold and light version
  5. Salernomi
    Designed by Julius B. Thyssen, this typeface is an elegant font
  6. Tex Gyre Schola
    Another fine font to use for your web or print project
  7. Steinem
    Another beautiful free serif font
  8. Novello Pro
    Although the name of this font says “Pro”, it’s still free, but it’s still pro! A modern and pro typeface
  9. Lido STF
    This is a font based of the Times New Roman font
  10. 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: , fonts, , typefaces, typography, ,

How to warn IE6 users

» 23 June 2009 » In Web developer tips » No Comments

First of all, do not dump support for Internet Explorer 6, that is not the intention of this article. The point is to, where possible, ensure that your site works in IE6. But where it’s not possible, or you would have to spend too much time and energy on writing “hacks” to make it work, you can apply a warning/information to consider upgrading IE or to use another browser.

What not to do

The point is to encourage the user to upgrade, not to force an upgrade (telling how dumb the user is by using IE6). If a site is already works as it should in IE6, or if you could invest very little time in getting it working, it’s better if you don’t include a warning at all. At least you could try to integrate the IE7 JavaScript library, available from , or by overriding some of the CSS via an IE6-specific style sheet. The image below shows Joe Levi’s one-line upgrade method, “scaring” people to upgrade by pretending an OS alert, but encouragement is better than underhand methods.

Scaring users to upgrade

When to warn

Generally, you should only show warnings when they’re directly beneficial to the user, such as a major part of the site is based on functionality that does not work or render properly in IE6. If you misuse your trust as a website owner, and force the user to upgrade for no practical reasons, it will just be an unnecessary hassle for the user. And when they return to the site with a new or updated browser, only to see that site has no changes, they’ll lose all trust in it.
If you get too “hung-up” in hating IE6, and decide to block access to all IE6 users, you can be pretty sure that they will never return, regardless of what browser they later end up with. The choice must always always rest with the user, they have to be in control of making the decision. And if they don’t want to upgrade, that’s down to them and it’s their loss. However, with the right approach, you can encourage them by explaining the benefits of switching or upgrading their browser, you’re more likely to get a positive result this way. The image below is from Travellerspoint, and it looks nice.

A nice warning message

Be kind

The truth is, while you and me know that it is better to either upgrade or switching your browser, many users aren’t even aware that alternatives to Internet Explorer exists. Also, many people still have to use IE6 at work. With this in mind, we should create the warnings-text in a kind way. Tell the user that they’re using an old browser and that, because of this, the site they’re currently on won’t look its best, and some functionality might be unavailable. Then suggest that, for a better browsing expreience, they should consider upgrading.

Applying the warning

It only takes a few lines of html code to apply the IE6 warning. You need to make use of conditional comments to apply it to your website. The code below is one way of doing it. It wraps a conditional comment around the relevant code block:

?View Code HTML4STRICT

Modern, compliant browsers will just ignore this block of code. But versions of IE below version 7 will read it and treat it as html. So, if this was read by an IE6 browser, it would generate the html placed in the block, but if it was by IE7 or IE8, it would ignore it.

So, the conclusion would be: Keep it simple, keep it polite, and reassure and assist IE6 users, rather than showing them the finger.

Continue reading...

Tags: , , web, , , ,

How to create a favicon

» 05 May 2009 » In Web developer tips » No Comments

faviconsA 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:

?View Code HTML4STRICT 
<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: , , , , , , , ,

Css3 rounded corners demonstration

» 30 April 2009 » In Css Articles » No Comments

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

roundedcorners

As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:

?View Code HTML4STRICT 
<p class="roundedbox">The rounded box</p>

And the css code:

?View Code CSS 
.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: , css3, web 2.0, ,

Transparent images using css

» 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:

?View Code HTML4STRICT 
<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:

?View Code CSS 
.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:
transparencytest
In CSS3, the syntax for transparency/opacity will be “opacity:value”.

Continue reading...

Tags: , css3, , opacity, transparent, ,

Generate backgrounds online

» 23 April 2009 » In Web developer tips » No Comments

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
patterncoolercom

2. BgPatterns.com
bgpatternscom

3. Patterns from Colourlovers.com
patterns-by-colourloverscom

4. StripeGenerator.com
stripegeneratorcom

5. StripeMania.com
stripemaniacom

6. StripedBgs.com
stripedbgscom

7. StripeDesigner.com
stripedesignercom

8. TartanMaker.com
tartanmakercom

9. Dotter by PixelKnete.de
dotter-by-pixelknetede

10. Gradient Image Maker by DynamicDrive
gradient-image-maker-by-dynamicdrivecom

11. Ogim – Online Gradient Image Maker
ogim-online-gradient-image-maker

12. Gradient-Maker by SecretGeek.net
gradient-maker-by-secretgeeknet

13. Background Image Maker by Rails2u.com
bgmaker-by-rails2ucom

14. TileMachine.com
tilemachinecom

15. bgMaker by Ventdaval.com
bgmaker-by-ventdavalcom

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 generator, gradients, , online design tool, patterns, stripes, , tartans, ,

CSS3 two column layout

» 23 April 2009 » In Css Articles » 3 Comments

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

css3-two-column-layout


As you can see, the column is split in 2. This is done by using the following css code:

?View Code CSS 
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:

?View Code HTML4STRICT 
<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="https://csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body>

Try it out for yourself, good luck!

Continue reading...

Tags: , css3, web 2.0, ,

» 20 April 2009 » In Ajax Articles »

This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.

You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.

We will start with the html file, in this case: index.html. You need to add the following code in the head section:

?View Code HTML4STRICT 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script>

And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).

?View Code HTML4STRICT 
<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="#" width="16" height="16" />
<div id="list-twitter" style="display: none;"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script>
</body>

As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).

?View Code JAVASCRIPT 
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
 var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} 
else if (delta < 120) {return 'about a minute ago';
}
else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if (delta < (120 * 60)) {
return 'about an hour ago';
}
else if (delta < (24 * 60 * 60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
}
else if (delta < (48 * 60 * 60)) {
return '1 day ago';}
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
 
function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '
  • '
    •  +
twitters[i].text + ' (' +
relative_time(twitters[i].created_at) +')';
}
 $('list-twitter').innerHTML = '
      '
     + statusHTML + '';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}

    You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
    Good luck!

    Download: Twitter_Example   (43.3 KiB, 983 hits)

    Tags: ajax, Feed, , web 2.0, ,