CSS Properties Tag Cloud
Tuesday, January 15th, 2008
Yesterday I was playing with Adobe Photoshop and I decide to (try) make a Tag Cloud with CSS 2 Properties. The result is ok! If you use the image please tell the source. Thank you!
(more…)
Archive for the ‘CSS’ Category
Opacity in CSS
Wednesday, November 7th, 2007
Today we learn about opacity in CSS! I made an example here and here you have the files.
Information about opacity in CSS:
The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through.
So to set an element to 50% transparent, you would write: opacity:0.5;
Neither IE 6 nor 7 support the CSS 3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property “alpha filter”. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:
Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;
Validate HMTL & CSS from your page.
Tuesday, November 6th, 2007
Hy! Today we learn how to validate HTML and CSS from your page. This tip is usefull if you have a website about webdesign where you have tools for development! Here is the final result
with a design what i made, you have all files in the archive HERE. Let’s Start.
[1] Open your text editor and type the next HTML code
<html>
<head>
<title>Validate CSS, HTML, XHTML from your page</title>
</head>
<body>
<div>
<form method=”get” action=”http://jigsaw.w3.org/css-validator/validator” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate CSS” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
<br>
<div>
<form method=”get” action=”http://validator.w3.org/check” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit”><input type=”submit” value=”Validate HTML” /></label>
<label title=”Clear”><input type=”reset” value=”Clear” /></label>
</form>
</div>
</body>
</html>
Create a simple MENU in CSS
Tuesday, October 30th, 2007
Today we create a simple MENU in CSS. Click here to see the final result!
[1] Let’s to create the CSS:
<style type=”text/css”>
body {
text-align: left;
background-image: url(”bg.gif”);
}
div {
width: 100px;
height: 20px;
background-color: #338ce8;
}
div:hover
{
background-color: #085ea6;
}
a {
color: white;
font-size: 18px;
text-decoration: none;
}
</style>
(more…)
Links and Pseudo-Classes in CSS
Sunday, October 28th, 2007
Create Rollover Image in CSS
Wednesday, October 24th, 2007
CSS id and them selections
Sunday, October 7th, 2007Learn how to create and select the CSS ids and use them in a short tutorial and with an HTML page exemple:
CSS Classes and them selections
Sunday, October 7th, 2007Learn how to select the CSS classes and use them in a short tutorial and with an HTML page exemple:
3 Methods to implement CSS in your website
Sunday, October 7th, 2007First Method:
<style type=”text/css”>
Next is the HTML code and CSS in a simple webpage
<html>
<head>
<title>CSS Implement v1</title>
<style type=”text/css”>
P {background-color: grey;}
</style>
</head>
<body>
<p>CSS Implements v1 with paragraph background color GREY</p>
</body>
</html>
Second Method:
(more…)
Create smaller CSS files
Friday, October 5th, 2007This article will tell you how to make your CSS files a bit smaller. You can ask yourself one question; Why shouldn’t you? Read on to find out how to do this.
There are only advantages of making your CSS files some smaller. When your website uses a 5k CSS file, you might not see the difference in loading time, but when using bigger (25k) files, you can notice your website will load a bit faster when using some of the steps below. Another thing is that your file will become more organized and clean. Read on to get tips of improvement.
The main idea of this article is to reduce the number of characters you have used in your CSS. The less characters, the smaller your file.
Comments
You have different ways of using comments. Comments may be something you can not delete in your CSS, because you might forget something (or your fellow-workers). But, there are a couple ways of using them.
/*———————-*/
/*—-Comment—-*/
/*———————-*/
These lines of code do the same as:
/*Comment*/
You can still read what it says and what tips it gives. The only thing you did is to save space.
Color prefixes
