Posts Tagged ‘CSS’
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 »
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 »