Archive | June, 2008

Image Replacement using CSS

30 Jun

Image Replacement using CSS

November 21, 2007 • 0 comments

Most web designers have all used one sort of image replacement technique somewhere. (This blog uses sIFR for the title) However the most common method for image replacement is the Revised Phark Method. This method still allows for semantic XHTML code and is accessible to screen readers.

The technique is quite simple, you use the text-indent CSS property and indent your text negatively so far off the screen it doesn’t show up. Designers have come to adopt -9999px or -9000px. This value insures that if you have a right aligned header and the site is being displayed on a large monitor, your text will still be pushed off screen.

Using this method you can put push your text off the screen and replace it with an image or logo and still have semantic and accessible XHTML. Of course you can also link it so that it returns to your home page as is generally practiced.

Company Name

In the CSS you want to make sure that you define a width and height for the image, otherwise the element will colapse onto itself.

/* css */
#header {
text-indent: -9999px;
background: url(logo.gif);
width: 300px:
height: 25px;
}

This code shows how you can replace an tag with an image, yet keeping the visible to screen readers and search engine robots. However Firefox creates slight problem with links. Theres a thin dotted outline around the tags. Ever since version 1.5 Firefox has started to include the -9999px indention, so the border goes to the far left of the screen at when the link is clicked.

In the next entry we’ll see how to get rid of the dotted line border on the links in Firefox.

Advertisements

Css Triks

30 Jun

Css Triks
Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know
1. Rounded corners without images







.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2. Style your order list

  1. This is line one

  2. Here is line two

  3. And last line

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3. Tableless forms

Name

Address

City

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

4. Double blockquote

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

5. Gradient text effect

CSS Gradient Text

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

6. Vertical centering with line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

Content here

7. Rounded corners with images

<img src=”tl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />

CONTENT

<img src=”bl.gif” alt=””
width=”15″ height=”15″ class=”corner”
style=”display: none” />

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

8. Multiple class name

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9. Center horizontally

#container {
margin:0px auto;
}

10. CSS Drop Caps

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Prevent line breaks in links, oversized content to brake

a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12. Show firefox scrollbar, remove textarea scrollbar in IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height

selector {
min-height:500px;
height:auto; !important
height:500px;
}

3. PNG transparency
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear

.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

5. Reset CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:””;
}
blockquote, q {
quotes:”” “”;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

6. Scrolling Render IE

html {
background : url(null) fixed no-repeat;
}

7. Opacity

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

8. PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

9. Li Background Repeat IE

10. Good to know

@charset “UTF-8”;

/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}

/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}

/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/

/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/

Levels of HTML knowledge

30 Jun

Levels of HTML knowledge
Inspired by Emil Stenström’s Levels of CSS knowledge, I started thinking about the extreme difference in HTML knowledge among people working in the web industry. It spans all the way from people who know next to nothing about it to those who know it well enough to write the actual HTML specifications.
I thought I’d describe a few different levels of HTML knowledge. For some people, these levels are stages that they pass while learning more and more about HTML, gradually understanding concepts such as web standards, semantics, and accessibility. Others are at a certain level because it matches their attitude towards HTML and coding in general. Many people never advance beyond the first few levels. For some that is just fine, while for others it is not.
This is all written in a tongue-in-cheek way and is just my personal opinion. Please don’t over-react if you don’t agree or think some of the descriptions are a bit harsh. Try laughing instead.
The levels then:
HTML Level 0
People at this level have never seen HTML except by mistake, like when accidentally opening an HTML email in text mode. These people do not work in the web industry and never will, so they have no wish or reason to move beyond Level 0. They are included in this article to provide a kind of bottom line.
Typical quote:
Age-tee-em-what?
HTML Level 1
These people use the web enough to know that some kind computer programming magic is going on behind the scenes of the websites they use. When trying to publish anything on the Web, they are helpless without a WYSIWYG editor of some kind. It could be Photoshop, Dreamweaver, Frontpage, or the editor built into the CMS they have been told to use.
People keeping a website’s content up to date can often be found at this skill level, and some argue that there should be no need for them to move to a higher level. A lot of visually oriented designers are firmly stuck here by choice, often defending that choice by saying that “Nobody in the print world edits PostScript code by hand, so why should the web be any different?” Many web project managers unfortunately fail to progress beyond Level 1.
Typical quote:
HTML? It’s those tags you use to make text bold or italic.
HTML Level 2
This level contains people who know enough about HTML to be able to find their way around an HTML document as long as they stick to the few tags (everything is called a tag at this level) they recognise. They don’t really want to touch the HTML though.
Many Level 2 people are back-end programmers who prefer the safety of Visual Studio or whatever IDE they are using. They think HTML is too simple for them to bother with and that applications should be smart enough to handle it all for them. Level 2 developers seem very popular with CMS vendors.
Typical quote:
The controls I drag and drop in my IDE work fine in Internet Explorer, so why should I have to even look at the HTML?
HTML Level 3
A lot of old school web developers who have been in the business since the late nineties can be found at this level. Up until the end of last century these people coded HTML by hand, so they know all about nested tables and spacer GIFs. Since then, WYSIWYG editors like GoLive and Dreamweaver have improved to the point where Level 3 people see no reason to learn more about HTML. These days most of their HTML-related work is done in their editor’s design view anyway, so they would rather spend their time learning a specific application instead of finding out more about what is going on behind the scenes.
Typical quote:
Yeah yeah, I’ve heard about those fancy new ul and h1 tags, but I’m doing just fine with my trusty old table, img, and br tags.
HTML Level 4
This level is where people start intentionally using doctypes. The first step is almost always a transitional doctype, often XHTML 1.0 Transitional. XHTML is more recent than HTML after all, so it’s got to be better, right? People at this level are also the biggest fans of XHTML 1.1, since they think a higher version number has to be better.
After hearing from someone that you shouldn’t use tables for layout, a lot of Level 4 people use div elements to recreate a table-like structure. This of course leads to tag soup being replaced by div mania, and a lot of presentational markup, classitis, and inline CSS are produced by people at this level.
Most web developers who have reached Level 4 are willing to keep learning, and they understand that there are advantages to the methods being promoted by web standards oriented blogs and books. But they haven’t yet grasped why those methods are better.
Typical quote:
How can I create a data table with divs and spans instead of tables?
HTML Level 5
Most standards aware web professionals can be found here. These people tend to think about structure and semantics first and presentation later. Strict doctypes are generally used at this level to encourage the separation of semantic and presentational markup. Whether the markup language is HTML 4.01 or XHTML 1.0 is less important to many. In fact, some people at Level 5 are questioning the use of XHTML. Level 5 people tend to get into endless discussions about tiny markup details. They can waste hours thinking about class names or reorganising their HTML and CSS files to make their code look pretty.
If you have reached this level I think you’re doing extremely well. For most people there is no compelling reason to move beyond this Level 5.
Typical quote:
Hmm. I wonder which type of list is the most semantic way to mark up this part of my document.
HTML Level 6
These people are the thinkers of the industry. They spend a lot of time contemplating what will be useful in the future instead of right here and now. The results of much of their work will probably not be of any practical use to the average web professional for at least another five years.
At Level 6 you may have moved beyond actually building websites for a living. Instead you may be concentrating on writing future specifications or interpreting existing ones for browser vendors.
Typical quote:
I think the HTML 4.01 and XHTML 2 specs are too semantically limited, so I am working on a new markup language.
Finding the right level
It isn’t necessary for everybody to reach HTML Level 6. I consider myself a Level 5 person, and I’m quite happy reading the specs instead of writing them so I don’t really feel like I need to reach Level 6. People whose task is to keep a website’s content up-to-date can even get by at Level 1, provided that their CMS is good enough. It all depends on your needs.
What does not, however, is your attitude towards HTML. Even if you don’t need or want to learn all there is about HTML, you have to acknowledge that it is the most important language on the web.
What level of HTML knowledge are you at, and what level are you aiming for?
Levels of CSS knowledge
As you might have understood by now I’m very much pro web standards. The current widely accepted standards are: (X)HTML for page structure, CSS for design, and Javascript for behaviour. HTML is pretty well known by now, it has been there since the beginning of the web and there are tutorials everywhere that gets you started. CSS is starting to get a grip, large companies are switching their sites to CSS based layouts and the webdev blogosphere reaches more and more people.
When you promote web standards, like many of us do, you get to talk to a lot of people. If you promote it in a live chat room like #CSS on EFNet it gets even clearer: there are a lot of different levels of CSS knowledge out there. This article is going to list some of those levels along a rating of how this kind of developer will affect the web. Here we go:
Level 0
“CSS? Isn’t that a multiplayer game?”
These people have probably never made a webpage in their life. If they did it was pure HTML and they barely knew what they were doing. We get some of these people in #CSS, not because they want to start learning but because they think they’ve come to another channel, often looking for CS:S. No need to worry about these people, they probably won’t do many webpages in their lives so they can’t do much harm.
Level 1
“Yeah, I use it to remove underlines on links sometimes”
Different from Level 0, the people in this level do actually know basic HTML. They probably learned it at least five years ago and have made a couple of simple sites. They use very little CSS, only when they need to do simple stuff you can’t do with HTML only, like removing underlines and setting line-height (No! don’t even think about setting line-height with HTML). While these people could present us with some badly coded sites they rarely have any large and well visited ones. This means that they won’t do much harm either.
Level 2
“No, I don’t like divs; tables are much easier to work with”
Instead of just playing with HTML, like those from Level 1, some continued their quest. They mastered HTML tables and started using it to make things look just like they wanted. Somewhere around reaching HTML mastery they stopped looking at new ways of working. They heard about other people using “divs to design their pages” and even took some time one day to try to learn what the fuss was about. After a few hours of not getting it they gave up, went back to the familiar land of tabled layouts, and stayed there. Many do know CSS syntax and sometimes even some background but they believe it’s far too hard and ill-supported to use instead of tables.
Watch it! These are dangerous people, some even webmasters of big corporate websites. Since they have been in the business for a while many are leaders for their web departments. These are the people it’s most important to reach, and if we do it means a lot for the web. Concentrate on these people all you standards advocates.
Level 3
“Yes I’ve heard it’s good, but I can’t use it because of…”
While people in this group still don’t use CSS for positioning they do know some CSS and perhaps heard good things about it. They’ve tried making simple layouts and some even liked how it felt to work with. Problem here is that something is stopping them. Perhaps they have a Level 2 boss, perhaps their website needs to cater for Netscape 4 users, there might be many different reasons but something is in the way.
These people need to know that while CSS does not work everywhere that isn’t the end of the world. Old browsers will still get all your content, just pure content. Instead of them you will reach a new audience: there may be accessibility and usability benefits, newer browsers will get a richer experience and the site might even get easier to add content to (which will lead to more content). Tell this to the people in this group. If you’re unlucky they are not be the ones making decisions but in that case their influence on Level 2 Bosses will still be worth it.
Level 4
“CSS? Oh! Yes, I use divs for all my layouts”
It’s not unusual that these people use only divs on their sites. Each part of their page gets a div, often with a carefully crafted id (#toprightredline or even #r5_c7 with r standing for row and c for column), and then they position their divs with absolute positioning by the pixel. The result looks good, hey, it even validates as XHTML 1.1(!) but what they have missed is that most of the benefits of CSS has been lost. These pages are terrible when it comes to a screen reader interpreting it. Same with older non-CSS browsers, they won’t get the content… they will get one big block of text. When using bad class names and ids you loose the possibility to change the layout: if that red line needs to be changed to black you’ll need to change all your HTML documents too (can be hundreds). Don’t fall into the trap of telling them they are stupid or make them google “css”, they know they are smart people and they did learn about CSS from google in the first place. Tell them exactly what could be improved on their sites. Tell them what the benefits are. Keep your cool and tell them why.
People of Level 4 produce sites that are rather bad. The damage is reduced though by them often being open to new ideas. After all, not to long ago they did manage to learn and start to use CSS.
Some of the reasons for people thinking this way is because of what WYSIWYG editors are doing. Most such editors produce terrible div-only code but I’m hearing that there are gradual improvements in this field. This is a good thing and hopefully this will help people move from Level 4 to the higher levels.
Level 5
“I use CSS for design, it’s better than tables because of…”
After a lot of reading, talking to people and thinking most people arrive at Level 5. This is where you both can use CSS and know why it’s better. Some people in this level have minor problems on the sites they produce but it’s nothing serious. When asked they can argue why separating structure and design is a good thing and they have worked with CSS long enough to know the common pitfalls. I’m guessing many of the readers of this article are on this level and I feel I am. But this is not the best we can do…
Level 6
“What version of CSS? Yes, I do. Did you read my book about…”
For some people knowing how and why isn’t enough. These people strive to improve how CSS is used and are publishing great articles on new ways of using it. They constantly go back to the basic needs CSS is filling and attack problems from new angles, often resulting in more great articles. Some have actually read the whole W3C specification on CSS (sic) and they certainly know which parts are supported by which browsers. They function as role models for beginners and do great things for the web with their influence. Many work with the Web Standards Project. If you ever find an error on their site there is a reason for it. Ask them and they’ll tell you why.

That’s it. I hope this article gave you some inspiration to keep pushing the web to new victories. At which level are you? Do you have examples of people in last level?
January 11th, 2006 by Emil Stenström
Posted in CSS

Creating Tableless Sites – Why and Some Basics

18 Jun

n a time of web developers who just like to say that ‘Tables are Evil’ and can’t (or won’t) explain why, this article will attempt to give you some solid reasons that people create tableless designs. Included are six major benefits of creating tableless sites, and how to sell your desire to alter your website to a resistant manager.

Let’s begin with the benefits of a tableless layout. These are only in the order that I feel they should go in, some things are more important to other people, so rank them as you will.

Forces You To Write Well-Formed Code

You cannot have a properly made tableless layout, and use improper and non-standard code. Well, let me correct that – you can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design, you should be using standards compliant code. I think that anything that makes you get into the habit of always writing clean code is a good thing.

Faster Loading Time This is absolutely a benfit of a tableless layout, and for several reasons. First, on a fundamental level – tables load slowly. For the most part, unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itself to the page. Of course, this is what so many people loved about tables isn’t it? The fact that they were so easily sizeable. The downside is how much more time they take to load.

Okay, so the solution to that loading time is to set all the values explicitly, right? So now we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take alot of code. How many td open and close tags does your average table based layout have? Tons. Having to set all the values explicitly only adds to the page size and loading time. There are many experiments that have been done on this topic, I’ll point you toward this one that StopDesign did on a remake of the Microsoft website from a tablebased site to a tableless layout. That remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, calculated that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes of bandwidth per year. For any company that pays for bandwidth, these things are important.

Easier to Read Code If you are using standard code, semantic document conventions, and a tableless layout, your code can be so clean that it looks practically like just regular text with a few extra symbols.

That is a great benefit because it not only makes it easier for you to update, but it makes it easier for a non-technical user to make small alterations to. Additionally, if you work as a web developer in a more freelance capacity, it is common for there to be a full-time web developer who has to maintain that site. Clean and simple to read code makes that a easy transition. We like it when people leave us easy to understand code, right? Let’s return the favor.

Print Alternate Views When you create a page using a table-layout, you are rather unfortunately locked into a certain layout. Developers who have created table-based websites, as most of us have at some point – particularly if you were in the the industry before the big tableless movement, know that you often have to create a separate printable version of your pages. This can be, needless to say, quite tiresome.

Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style that applies to all your pages, instead of making them individually. That alone is a huge time saver, but there is more.

While you can control all elements with this approach, the biggest key is organization of information within the page itself. Using the example, let’s assume that the display order we want all our pages to print using the following order: The page header first, the content next, the special news after that, then the link list, and then the footer. However! We still want it to display as it would normally when viewing (meaning the header at the top, the links on the left, content in the middle, news on the right, and footer at the bottom). With a table-based layout, you would have to create a new page to do that special printing organization because the print style will read your columns left to right. With a table-less layout, you are not bound by this. You can order the content in your page however you like, and still control the way it looks… all by using the CSS only !

Additionally, because we can put the content in whatever order we want in the HTML, and then move the content blocks around for website viewing using CSS – we can have ultimate control over presentation.

That is very important because the clean code, and ability to alter presentation, means that your site can be viewable by someone on a small mobile phone screen, a PDA, in all text format can be perfect for someone using a text-to-speech reader, or a braille device, and since the code is clean, it is both backward compatible (with older browsers seeing mostly just the text) and forward compatible with new technologies to come. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML, and adding in support in your pages for microformats, or taking advantage of using RSS / ATOM feeds from your site to develop a base of regular readers.

Search Engine Optimization Due to the fact that you can organize your most important content at the top of your page, without affecting the layout, your page can be better optimized for search engines. For instance, say that I have a navigation bar on the left side of the page that lists tons of parts of the site that are actually great keywords. I could move that navigation bar code higher up in my actual HTML, without changing the layout, because I’m using the CSS to position the navigation where I want it.

Those search engines can also more clearly find common words throughout your document without having to filter through code. Search engines prioritize websites that have a higher content to code ratio, so putting all your style elements into your external CSS stylesheet makes your site highly content based to a search engine. Tableless layouts, as previously mentioned, decrease page size and loading time – another bonus to search engines.

Additionally, being able to take advantage of the RSS/ATOM feeds (see the section directly above) will aid you in some new technology for site indexing as used by all search engines called ROR. (ROR is an XML format summary of your website, like a sitemap, that search engines can access for additional information about your website.)

Presentation Flexibility Making changes to a CSS based Tableless layout is simple. You can alter the CSS file only, changing as many styles and graphics as you want. The affects cascade through all the pages on your website, and eliminate the need for manually updating many pages.

For one of the best known examples of how powerful presentation can be, you can visit the CSS Zen Garden and navigate through the ‘Select a Design’ links to see the differences. Each of the different designs uses exactly the same HTML file content. The only thing that changes is the CSS file for each one.

Selling Yourself On Standards Sometimes knowing how to code for standards, and create flexible tableless layouts is not enough. There are some web designers who meet with difficulties from their management. Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content and CSS driven layout.

If you want to design for standards, but you work for a company that is not very forward-thinking in allowing you the time to work on the changes — try this: Make them think about their pocket-book. Point out the cost saving benefits.

For instance, try grabbing a single page of existing code. Clean it up to standards. Compare the page size to before (including image optimization), and count the difference in bytes saved. Multiply that across the number of site pages, and the number of days per month. Then explain to them the amount of bandwidth cost saved monthly if this was done across the whole site. If that isn’t enough, show them how quickly you can make changes to a website once it is CSS driven, and push the idea that you will be able to change the site more rapidly when there are needed updates, and you will have more time to focus on adding in new functionality to the site – instead of spending your time doing maintenance.

Summary Hopefully, this little article will serve as a way to get you started on understanding why to use a tableless layout, what the benefits are, and you can easily take a look at Layout Gala and download just 1, or all 40 of the tableless layout examples to get you started. However, the best step toward moving to a tableless design is to slowly move your website toward a standard compliant version first, before you get rid of the tables. To get to that point, study as much on CSS as you can, read through the articles here and elsewhere on the web, and moving from table layouts to tableless will be just a matter of time.

About the Author:

Nicole Hernandez is a web developer with a specialty in web standards and accessibility. She is the owner of Website Style and publishes technical articles on her blog called Beyond Caffeine.

Author’s URL: http://www.goarticles.com

Search Engine Friendly Web Design – 3 Ways to Use CSS

18 Jun

This article will point out 3 simple and highly effective web design techniques that use cascading style sheets to improve your web design and make your website perform better in the major search engines.

First of all, what is CSS? CSS stands for cascading style sheets and CSS is a way of separating presentation code from your actual content in web design. Usually you build up a set of CSS style rules that are stored in a separate file that has a .css file extension. You then link to the CSS file from your web pages using an HTML link tag.

There are many, many web design advantages to separating your presentation code off into separate CSS files and this article will tell you 3 excellent ways that you can use CSS to make your web design more search engine friendly.

Web Design Technique 1 – Us CSS to Structure Your Document

Let’s consider the facts that we know about search engines. They send their search engine robots to your site to read the content that you have there and the easier it is to find for them the better because they don’t waste much time looking. So having said this, what is the point of bogging down your pages with lots of un-necessary presentation markup that could quite easily be stored off in a separate CSS file. Most often this means removed any extraneous table tags and replacing them with a smaller number of HTML div tags which can be formatted using CSS rules. This removes the vast majority of presentational markup and leaves you with nicely formatted content that the search engines can easily find and index.

Web Design Technique 2 – Us CSS to Style Your Header Tags

We also know that search engines place a huge amount of importance on the header tags – h1,h2,h3 e.t.c. that they find in your pages. The thing that puts most inexperienced web designers off using header tags is that by default modern browsers render them in massive black text that looks really ugly. This is where CSS comes in. CSS can be used to easily make your header tags appear in nicely formatted, attractive text that both scores well with search engines and is pleasing to the eye of the user – perfect!

Web Design Technique 3 – Us CSS to Create Rollover Images

Traditionally rollover images are created using 2 graphics for the on and off states that are toggled on and off using some complex JavaScript code. This JavaScript code can bloat your web pages and since it is not content and just appears as gibberish to search engines it can adversely affect your rankings to have lots of embedded JavaScript in your web pages. A much better way to accomplish the same web design effect is to use CSS. Your still need your 2 graphics but you actually create a normal text link in your (that can also have keyword targeted anchor text) and use CSS to format its appearance. This is as simple as making the link a block level element in your HTML, setting it a height and width and then defining it 2 different background images, 1 for when the link is in its ‘off state’ and when for when the user is hovering over the link.

Conclusion:

Cascading style sheets are a very powerful way of separating presentation code from your actual content and the search engine optimisation benefits the CSS will bring to your web design are undeniable. Why not put these CSS web design techniques to work on your website today?

About the Author:

Stuart is a freelance web designer from Barnsley, Yorkshire, UK. Stuart specialises in search engine friendly website design in barnsley for businesses of all types.

Author’s URL: http://www.goarticles.com

Rounded Corners Using CSS

3 Jun

Rounded corners add a nice little design to any page – using rounded corners can be image heavy; So, this post I am going to show you how to make rounded corners using only CSS! This is such a neat little trick and can be very handy.

There are a lot of different methods to make rounded corners – you can use images, JavaScript, CSS or a combination of all three! I am going to make this simple and show you how to make the rounded corners using nothing but CSS. The rounded corners are made using a layering technique – you use (bold) tags and layer them on top of each other to create the rounded corner effect.

image 1

The HTML


content here

The CSS

.b1, .b2, .b3, .b4 {font-size:1px; overflow:hidden; display:block;}

.b1 {height:1px; background:#000; margin:0 5px;}

.b2 {height:1px; background:#000; margin:0 3px;}

.b3 {height:1px; background:#000; margin:0 2px;}

.b4 {height:2px; background:#000; margin:0 1px;}

.content {background: #000;}

.content div {margin-left: 5px; color: #FFF;}

..and of course the speech bubble!

image 2

The HTML





content here






The CSS

.bubble {background: transparent; margin:1em;}

.bubble span.s1 {display:block; width:0; height:0; color:#999; overflow:hidden;

border-top:12px solid #000; border-left:12px dotted transparent; border-right:12px dotted

transparent; margin-left:50px;}

.bubble span.s2 {display:block; width:0; height:0; color:#000; overflow:hidden;

border-top:10px solid #999; border-left:10px dotted transparent; border-right:10px dotted

transparent; margin-left:52px; margin-top:-15px;}

.b1, .b2, .b3, .b4, .b5, .b6, .b7 {display:block; overflow:hidden; font-size:0;}

.b1, .b2, .b3, .b4, .b5, .b6 {height:1px;}

.b4, .b5, .b6, .b7 {background:#999; border-left:1px solid #000; border-right:1px solid #000;}

.b1 {margin:0 8px; background:#000;}

.b2 {margin:0 6px; background:#000;}

.b3 {margin:0 4px; background:#000;}

.b4 {margin:0 3px; background:#999; border-width:0 5px;}

.b5 {margin:0 2px; background:#999; border-width:0 4px;}

.b6 {margin:0 2px; background:#999; border-width:0 3px;}

.b7 {margin:0 1px; background:#999; border-width:0 3px; height:2px;}

.content {display:block; background:#999; border:3px solid #000; border-width:0 3px;

color: #FFF;}

Author’s URL: doolittleproductions.com

The Colors of Love

3 Jun

In this tutorial, I used this photo:

image 1

Open that photo then press Ctrl+B to open Color Balance, set properties like this:

image 2

image 3

image 4

You will get:

image 5

Create a new layer and set Blend mode: Screen

image 6

Pick Brush tool, set something like this:

image 7

Brush some colors in the picture, in this tutorial I used color blue, green, pink, red and set opacity 76%

image 8

You will get the result:

image 9

Create a new layer, choose the brush like this:

image 10

Put that brush several times in the picture

image 11

Pick Custom shape tool then choose heart shape

image 12

image 13

Make a heart shape then Ctrl+Click on heart’s layer

image 14

Select Background and press Ctrl+J 2 times

image 15

Move 2 heart layers to the top of layer palette

image 16

Select the under layer in those 2 layers then do as the picture below:

image 17

image 18

Continue to press Ctrl+J to duplicate this layer

image 19

Select the top layer then go to Layer Style, do as these pictures below:

image 20

image 21

You will get:

image 22

Use Eraser tool to blur the border of heart

image 23

After finishing above steps, you will get the final result:

Final Result

Author’s URL: photoshop8x.com