<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TEmelie - web design blog &#187; css</title>
	<atom:link href="http://www.temelie.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.temelie.com</link>
	<description>are you ready ?</description>
	<lastBuildDate>Fri, 31 Dec 2010 08:08:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Web Layouts &#8211; Keep it simple</title>
		<link>http://www.temelie.com/web-design-articles/web-layouts-keep-it-simple/</link>
		<comments>http://www.temelie.com/web-design-articles/web-layouts-keep-it-simple/#comments</comments>
		<pubDate>Tue, 01 Apr 2008 00:12:37 +0000</pubDate>
		<dc:creator>TEmelie</dc:creator>
				<category><![CDATA[Web design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[monitor]]></category>
		<category><![CDATA[resolution]]></category>
		<category><![CDATA[simple]]></category>
		<category><![CDATA[text]]></category>
		<category><![CDATA[web layout]]></category>

		<guid isPermaLink="false">http://www.temelie.com/?p=17</guid>
		<description><![CDATA[Manage your space and your whitespace The vast majority of people are often so focused on creating a great layout that the only aspects they analyze are tables, CSS, frames etc. This is great but in most cases it leads to ignoring the basics of Web Layout, which in turn translates into mistakes that could [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Manage your space and your whitespace</strong><br />
The vast majority of people are often so focused on creating a great layout that the only aspects they analyze are tables, CSS, frames etc. This is great but in most cases it leads to ignoring the basics of Web Layout, which in turn translates into mistakes that could have easily been avoided. For instance use the whole space without giving the impression that you are trying to do just that. An easy way to realize that is by using relatively sized layout sections. In this way they will contract and expand to adjust the browser window.<span id="more-17"></span></p>
<div style='float:right'><script type="text/javascript"><!--
google_ad_client = "pub-";
google_ad_slot = "8935106775";
google_ad_width = 250;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<p>One more important aspect of Web Layout is represented by the monitor resolution. The days of 640&#215;480 are long gone and you need to be aware of that. You should kick yourself upside the head if you lose customers because the only thing they can see on their monitor is a logo.<br />
Here is an easy way to make your Web page look like it’s resizing for different browser windows. This is how you do it: define the spaces by using colors. What this means is that by centering the page on the browser and adding a background of a different color, the page will display nicely both on large browsers, which will display more background color,  as well as on smaller browsers which will have little or no background color at all.</p>
<p><strong>Images and Graphics</strong><br />
One of the Top 10 killers of Web Layout are images. Slap an image at random on your page and that will be the end of it. The img tag followed by text will get you an image and a line of text to it’s right. Try using instead the align attribute which will help you with you’re layout. Also keep mind that you need to maintain a balance between graphics and text. Don’t get carried away and use lots of images as this will make your page extremely difficult to read. What you need to remember is that images are a major part of the design so choose your layout carefully.</p>
<p><strong>Text</strong><br />
In this part I would like to say a couple of things about the so called “scan length”. This refers to the number of words that people can read at a comfortable level on a single line. Most browsers respond best at a scan length to 7 to 11 words per line. Anything higher than that leads to a text that is hard to read, anything less means a text distracting. In conclusion make sure that the main text area displays the text in readable width.</p>
<p><strong>Centering</strong> isn’t something that you want to undertake because is very difficult to do well and is hard to read.</p>
<img src="http://www.temelie.com/?ak_action=api_record_view&id=17&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.temelie.com/web-design-articles/web-layouts-keep-it-simple/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Color and CSS</title>
		<link>http://www.temelie.com/web-design-articles/color-and-css/</link>
		<comments>http://www.temelie.com/web-design-articles/color-and-css/#comments</comments>
		<pubDate>Fri, 28 Mar 2008 01:42:40 +0000</pubDate>
		<dc:creator>TEmelie</dc:creator>
				<category><![CDATA[Web design]]></category>
		<category><![CDATA[colors]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[rgb]]></category>
		<category><![CDATA[w3c]]></category>
		<category><![CDATA[web colors]]></category>

		<guid isPermaLink="false">http://www.temelie.com/web-design-articles/color-and-css/</guid>
		<description><![CDATA[What is color? Well according to W3C the definition is quite simple actually. In the W3C perspective a CSS color is one of two things: a number or a keyword. In reality an artist for instance doesn’t create a painting by simply writing on the canvass the numbers or the keywords corresponding to the colors [...]]]></description>
			<content:encoded><![CDATA[<p>What is color? Well according to W3C the definition is quite simple actually. In the W3C perspective a CSS color is one of two things: a number or a keyword. In reality an artist for instance doesn’t create a painting by simply writing on the canvass the numbers or the keywords corresponding to the colors he pictured in his head. The same applies to Web designers. <span id="more-13"></span></p>
<div style='float:right'><script type="text/javascript"><!--
google_ad_client = "pub-";
google_ad_slot = "8935106775";
google_ad_width = 250;
google_ad_height = 250;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<p>HTML uses 4 color keywords as follows aqua, black, blue, fuchsia, gray, and green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Sounds fairly simple doesn’t it? Well before you get to excited you should know that there is a second list of keywords first introduced by Netscape, which was the first browser to support color keywords. As if this wasn’t complicated enough spellings comes into action. What I mean by this is that Internet Explorer is very picky when it comes to the way we spell gray or grey. No matter what the name is or who first introduced them, color keywords are a big pain in the “side” (if you don’t know what you are doing, that is).<br />
A second way to define colors is by using numbers.  Right off the bat CSS 2 provides us with two ways of specifying colors as numbers: RGB and Hexadecimal RGB.<br />
<strong>RGB color numbers</strong><br />
RGB stands for red, green and blue and every other color is obtained by mixing these three colors in different proportions. There are two ways in which you can define a color in RGB: the first way assigns each of these three colors a number between 0 and 255 e.g. rgb (255, 0, 0) whilst the second uses percentage values e.g. rgb (100%, 0%, 0%).<br />
<strong>Hexadecimal color numbers</strong><br />
Are the same thing as standard RGB color numbers just converted in base-16. What this means is that every number is formed by three pairs of numbers which take a value from 00 to FF. In this case the color red becomes #ff0000.<br />
<strong>CSS color numbers</strong><br />
A more complex system of defining colors by numbers is presented in three categories by CSS 3:<br />
-the transparent keyword<br />
-RGBA color values<br />
-HSL color values<br />
<strong>The transparent keyword</strong> evolved from CSS 1 to CSS 2 and then finally reached the form we now see in CSS 3. What this mean is that the keyword can be used in any property that has anything to do with color.<br />
<strong>RGBA color values</strong> simply mean you can set the opacity of the color on a scale that ranges from 0.1 to 1.0. In practice this is achieved as follows :</p>
<p align="center"><strong>rgb (red, green, blue, opacity)</strong></p>
<p>Some browsers don’t recognize the last value, the one used to define the opacity. In this case theoretically the color should return to fully opaque. In practice however there is a different story: the color value is completely ignored.<br />
<strong>HSL color values</strong><br />
RGB has two major problems that need mentioning. Firstly, in order to display the colors RGB assumes the CRT color model which can lead to problems when trying to print something. This translates into a poor printing on some ocassions because most printers are based on CMYK. Secondly RGB is non-intuitive. This means that while people think of colors in order of hue, saturation and lightness, RGB sees colors in a machine generated way.<br />
In order to adress this problems, HSL color values define hue, lightness and saturation by assigning them numerical codes. For instance red in HSL would be written hsl (0, 100%,50%). Although HSL resolves this problem it too has a drawback in the way that it’s not supported by most browsers.</p>
<img src="http://www.temelie.com/?ak_action=api_record_view&id=13&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.temelie.com/web-design-articles/color-and-css/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

