Thursday, July 29, 2010

Do you know about /robots.txt file?

Web site owners use the /robots.txt file to give instructions about their site to web robots; this is called The Robots Exclusion Protocol.

It works likes this: a robot wants to vists a Web site URL, say http://www.example.com/welcome.html. Before it does so, it firsts checks for http://www.example.com/robots.txt, and finds:

User-agent: *
Disallow: /

The "User-agent: *" means this section applies to all robots. The "Disallow: /" tells the robot that it should not visit any pages on the site.

There are two important considerations when using /robots.txt:

* robots can ignore your /robots.txt. Especially malware robots that scan the web for security vulnerabilities, and email address harvesters used by spammers will pay no attention.
* the /robots.txt file is a publicly available file. Anyone can see what sections of your server you don't want robots to use.

So don't try to use /robots.txt to hide information.
Remember to use all lower case for the filename: "robots.txt", not "Robots.TXT.

Read the full article on
http://www.robotstxt.org/robotstxt.html

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think

Text Rotation with CSS

The Sample HTML Code

span class="day">31
span class="month">July
span class="year">2009

The CSS Code for the class "month"
n order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively

Readmore on "Working with CSS transitions" fountd on
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
and the the source blog for this post
http://snook.ca/archives/html_and_css/css-text-rotation

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think

Tuesday, July 6, 2010

CSS Property "content" and HTML Property "title"

CSS has a property called content. It can only be used with the pseudo elements :after and :before.

CSS Code
email-address:before {
content: "Email address: ";
}

HTML Code
li class="email-address">chriscoyier@gmail.com

Browser Will Render
Email address: chriscoyier@gmail.com


Tooltips from the title attribute
a title="A web design community." href="#">CSS


a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}


Source: http://css-tricks.com/css-content/