Archive for: ‘CSS Tips & Tricks’
Transparent background in CSS
Monday, October 26th, 2009
Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.
There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.
The below example will show a box using the background colour of white and an alpha of 50%.
Transparent Box CSS
#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
Here’s what it looks like
50%
30%
10%
Advantages
The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.
Disadvantages
This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.
Tags: CSS, web design, website design
Posted in CSS Tips & Tricks, website design | No Comments »
Min-height hack for Internet Explorer 6
Monday, September 28th, 2009
Yes thats correct, another css hack for i.e 6 this time it’s ‘min-height’. As some of you are probably aware i.e 7 now supports the ‘min-height’ css property making our lives much simpler, or rather even more complicated as we have to create hacks or work arounds for old browsers such as i.e 6.
Show below i have included the css for creating a div element with a minimum height, of course this could be applied to any element of your html document. For the div example that i am showing, this method is incredibly usefull when you have content that does not fill a specified area on your webpage. By using the min-height property you will effectivley allow your div to scale and expand but the hight will go no lower than the specified pixel size (e.g. 200px).
What you will see below is the basics of getting your div to display correctly on nearly all browsers (I haven’t managed to find any that dont support this method).
Example of min-height code
mydivname {
min-height:200px;
height:auto !important;
height:200px;
}
Try it out and see how easy it is to use.
Posted in CSS Tips & Tricks | No Comments »
CSS Navigation Examples
Monday, September 28th, 2009
Navigation / Drop down Navigation in CSS can cause many problems across different browsers browsers.
After crawling the net i managed to stumble across a good site with some very nice examples, both build wise and visually.
The site links to a number of Horizontal and Vertical drop down menus.
Click here to check them out.
Posted in CSS Tips & Tricks | No Comments »
IE only CSS Hacks & IE 6 or below Hack
Monday, September 28th, 2009
If you’ve created your website but want to style or change the formatting of your css depending on the users browser version, ie allows you to set a different css style sheet using this handy little hack.
Internet explorer recognises the following:
If you need to target any users browser that is just internet explorer simply use the follwoing code and place in your <head> </head> tags.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" mce_href="css/ie.css" />
<![endif]-->
If you need to target any users browser that is internet explorer below version 7, e.g. 6, 5, 5.5… use the following code and place in your <head> </head> tags.
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6orlower.css" mce_href="css/ie6orlower.css" />
<![endif]-->
Posted in CSS Tips & Tricks | No Comments »
CSS Star hack * {your css here}
Sunday, September 27th, 2009
The CSS star hack is one of my favorite hacks when developing any good website design in CSS. This CSS star hack effectively allows you to reset any attribute to all HTML elements of your web page, saving you time and code if used correctly. It’s a great way to remove padding or margin on all HTML elements on your website giving you a blank canvas to start developing on especially when you have ie6, ie7 and ie8 to deal with!
How to apply the CSS Star Hack
Firstly I will begin by explaining how and where I generally use the star hack within your css document.
Begin by opening your stylesheet, and paste the CSS below into the very top of your stylesheet :
Code:
* {
margin:0;
padding:0;
border:none;
}
What does it do?
By doing this we are effectively setting every element of the HTML document to have no margins, no padding and no borders.
This can be of major benefit to you when building a website from scratch, mainly due to the fact that almost all browsers apply different padding, margin and border defaults. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements from its previous default style.
Pros:
- Can increase productivity and reduce development time.
- Could reduce your code dramatically.
- Resets all HTML elements so they have no predefined styles allowing you to eliminate browser compatibility issues.
Cons:
- Could put more load on you browser.
- Technically it might increase code if not used appropriately.
Things to consider:
The CSS star hack is great for removing the margin and padding etc but don’t get too carried away. For example if you set the colour to be black, this will apply this to every element of your web page and can be very annoying. This will mean you have to set the colour on everything that is different thereafter and will increase your code dramatically.
Give it a go and see how much time and coding it can save you. I’ve never looked back since implementing it into every website I create.
Tags: CSS, web design, website design
Posted in CSS Tips & Tricks | No Comments »
Shorthand CSS – reduce your CSS in minutes
Sunday, September 27th, 2009
Anyone who works with css knows the great potential and flexibility that it has given designers, enabling us to create beautifully designed and well coded websites. By taking advantage of simple css shortcuts (e.g a line of code relating to one property) you will be able to reap the benefits of time saving and effective code, not only helping you create, but also eliminate any issues that might arise and also make updating much faster.
A common assumption by newbie cssers is to specify each individual property line by line (this is by all means not wrong, but it is however a longwinded way of writing your css). Below in the next set of examples i will try to explain some of the basic methods for shortening your css.
Inefficient code
#selector {
margin-top:25px;
margin-right:0px;
margin-bottom:25px;
margin-left:0px;
}
Efficient code
#selector{
margin:25px 10px 25px 10px;
}
As you can see we have manage to shorten the css styling from 6 lines to only 3. The way this works is by setting the properties in order: Top, Right, Bottom and then Left.
Similarly to simplify your code further you could use the following for the padding attribute:
Even more eficient code
#selector{
margin:25px 10px;
}
This works by setting the top and bottom margin to 25px and the left and right margin to 10px;
If the all of the attributes are the same (e.g top, right, bottom and left) you can simplify your code once again:
#selector{
margin:40px;
}
The example above shows an example where a 40px margin is required on the top, right, bottom and left of your div.
This method isn’t just used for the margin attribute it can also be used for things such as padding and the same principle can be carried into things such as font, background, border etc. Below i will show some example of long winded css compared to shorthand css.
Fonts
Example 1
#selector {
font-weight: bold;
font-family: verdana;
font-size: 115%;
}
Example 1 in shorthand
#selector{
font: bold 115% verdana;
}
Background
Example 2
#selector {
background-color:#003366;
background-image:url(images/background.gif);
background-position:top;
background-repeat:no-repeat;
}
Example 2 in shorthand
#selector{
background:#003366 url(images/background.gif) top no-repeat;
}
Borders
Example 3
#selector {
border-weight:1px;
border-style:solid;
border-color:#ffcc00;
}
Example 3 in shorthand
#selector{
border:1px solid #ffcc00;
}
As you can see the above examples show a clear demonstration of how to code more efficiently.
Body is your friend
Another common mistake that i often see when editing other peoples work is the constant use of font this, font that, and its used on nearly every div, or element of the xhtml document.
For example
#mydiv{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
.mytextarea{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
By utilising the body tag correctly you can save your self a lot of hassle and extra code.
Simply start by setting everything in the body tag like below:
body{
font:bold 62.5% Arial, Helvetica, sans-serif;
colour:#000;
}
Additionally if you know that you want everything to have the same font, whether it be an input element or just a standard div, make use of the star hack:
*{font-family:Arial, Helvetica, sans-serif;}
To find out more regarding the star hack click here
Posted in CSS Tips & Tricks | No Comments »
Transparent Boxes using CSS
Sunday, September 27th, 2009
Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.
There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.
The below example will show a box using the background colour of white and an alpha of 50%.
Transparent Box CSS
#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
Here’s what it looks like
50%
30%
10%
Advantages
The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.
Disadvantages
This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.
Posted in CSS Tips & Tricks | No Comments »
How to Validate an Entire Website – XHTML, CSS, RSS & Links
Sunday, September 27th, 2009
So you’ve just build your complete website and its almost read to go live…. but have you validated it making sure its compliant to w3c standards?
Where to validate
Of course you can head straight over to the w3c.org website where you can:
But fingers crossed someone has already or they are working on creating an all inclusive validator to do all of these things in one go.
Dont forget to spell check!! I advise you use the default spell checker in what ever software you are using to create your website, another way you could check is by using an online checker such as http://www.wellho.net/demo/spell.php how ever please bare in mind that this is a free service and only checks single pages.
In my travels i also stumbled accross the WDG HTML Validator, which is available at http://htmlhelp.com/tools/validator/ not only can you check a websites validation, you can check to see if the entire site is validating, this is also very hand as one of its features enabled you to see if your internal pages are linking to pages that dont exist.
Why validate?
Well there are many reason too validate, take a look at the following website for an explanation of reasons to validate – click here to read more.
Give it a go, it worked well for me.
Posted in CSS Tips & Tricks | No Comments »