Saturday, October 2, 2010

Facebook Tab Styles for Web Developers


This is pretty much it... the Facebook Tab's CSS Stylesheet!!
It uses a couple of CSS 3.0 styles.

body{background:#fff;
font-family:Tahoma,Verdana,Arial,Sans-serif;
font-size:11px;
color:#333;margin:0;
padding:0;
text-align:left;
direction:ltr;
unicode-bidi:embed
}

ul.quicktabs-style-facebook {
background:transparent none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
font-size:1em;
height:21px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 0 10px;
padding:0 0 3px;
}

*html ul.quicktabs-style-facebook li{
margin-bottom:-5px;
}

ul.quicktabs-style-facebook li {
background:transparent none repeat scroll 0 0;
float:left;
margin:0;
padding:0 0 0 5px;
}

ul.quicktabs-style-facebook li a {
-x-system-font:none;
background:#D8DFEA none repeat scroll 0 0;
border-left:1px solid #D8DFEA;
border-right:1px solid #D8DFEA;
border-top:1px solid #D8DFEA;
display:block;
font-family:Verdana;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:185%;
margin:0;
padding:2px 12px;
text-decoration:none;
color: #3b5998;
}

ul.quicktabs-style-facebook li:hover a{
background: none;
}
quicktabs-style-facebook li:hover{
background:none;
}

ul.quicktabs-style-facebook li.active a,
ul.quicktabs-style-facebook li.active a:hover {
background:#FFFFFF none repeat scroll 0 0;
border-left:1px solid #D8DFEA;
border-right:1px solid #D8DFEA;
border-top:1px solid #D8DFEA;
text-decoration:none;
color: #000;
}

ul.quicktabs-style-facebook li a:hover {
background: #627aad;
border-left:1px solid #627aad;
border-right:1px solid #627aad;
border-top:1px solid #627aad;
color: #fff;
}

ul.quicktabs-style-facebook li.active{
background: none;
}

</style>
</head>

<body>
<ul class="quicktabs-style-facebook">
<li><a href="#">Wall</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Boxes</a></li>
<li><a href="#">Top Friends</a></li>
<li><a href="#">Notes</a></li>
</ul>
</body>

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think
Posted by at 1 comment:
Labels: , , , ,

Tuesday, August 10, 2010

The Seam Framework

Seam is a powerful open source development platform for building rich Internet applications in Java. Seam integrates technologies such as Asynchronous JavaScript and XML (AJAX), JavaServer Faces (JSF), Java Persistence (JPA), Enterprise Java Beans (EJB 3.0) and Business Process Management (BPM) into a unified full-stack solution, complete with sophisticated tooling.

Seam has been designed from the ground up to eliminate complexity at both architecture and API levels. It enables developers to assemble complex web applications using simple annotated Java classes, a rich set of UI components, and very little XML. Seam's unique support for conversations and declarative state management can introduce a more sophisticated user experience while at the same time eliminating common bugs found in traditional web applications.

See the full article found on
http://seamframework.org/

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think
Posted by at No comments:
Labels: ,

Introducing Scala


Scala is a general purpose programming language designed to express common programming patterns in a concise, elegant, and type-safe way. It smoothly integrates features of object-oriented and functional languages, enabling Java and other programmers to be more productive. Code sizes are typically reduced by a factor of two to three when compared to an equivalent Java application.

Twitter and LinkedIn are done using this programming language

If you are interested Read more on
http://www.scala-lang.org/

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think
Posted by at No comments:
Labels: ,

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
Posted by at No comments:

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
Posted by at No comments:

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/
Posted by at No comments:

Wednesday, June 16, 2010

CSS white-space

Through a number of possible values, the white-space property gives us, via CSS, a way of defining how the browser handles multiple white space characters and line breaks. Of course, the portion of the document that you can target is limited to whatever can be targeted via CSS selectors.



Here are the different values for the white-space property.

normal, nowrap, pre, pre-line, pre-wrap
Posted by at No comments:
Subscribe to: Posts (Atom)