Posts Tagged ‘world wide web consortium’

Opacity in CSS

Wednesday, November 7th, 2007

Example of Opacity

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;

(more…)

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> 

(more…)

Create Rollover Image in CSS

Wednesday, October 24th, 2007

Create Rollover Image in CSS ( You can see the final result HERE )

I made two buttons for this tutorial, save it if you want to work with them.


(more…)

CSS Classes and them selections

Sunday, October 7th, 2007

Learn how to select the CSS classes and use them in a short tutorial and with an HTML page exemple:

(more…)

HTML vs. XHTML

Thursday, October 4th, 2007

vs

XHTML 1.0 is a reformulation of HTML 4.0. What this really means is that learning XHTML is basically the same as learning HTML. The main difference is a few simple rules - as XHTML is more strict than standard HTML.

[1] Stricter adherence to the HTML specification
Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn’t allow that. The best way to correct this is to use an XHTML validator such as HTML Tidy.

[2] Write well formed documents
What this generally means is avoiding overlapping elements. The following nested code is acceptable: <p>Paragraph <em>emphasized</em></p> because the <em> tag is opened and closed within the <p> tag. However, this is not allowed: <p>Paragraph <em>emphasized</p></em> because the <em> tag overlaps the <p> tag.
(more…)