I wanted to share few important qoutations from this book from the next 2 chapters ( 4-5).
1) Fancy link underlines
We can create some very interesting effects by using images to create link underlines.
Example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Styled Underlines</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font: 140%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
color: #666;
background: #fff;
}
/* styled underline
================================== */
a:link, a:visited {
color:#666;
text-decoration: none;
background: url(images/underline1.gif) repeat-x left bottom;
}
a:hover, a:active {
background-image: url(images/underline1-hover.gif);
}
-->
</style>
</head>
<body>
<p><a href="#">This is a link</a></p>
<p>And here is a reasonably long line of text containing our <a href="#">nice, custom styled link</a> and then some more text.</p>
</p>
</body>
</html>
2) Highlighting different types of link
On many sites it is difficult to tell if a link points to another page on that site or to a different site altogether. We have all clicked a link expecting it to go to another page in the current site, only to be whisked away somewhere different and unexpected. To combat this problem, many sites will open external links in a new window. However, this is not a good idea as it is taking control away from the user and potentially littering their desktops with unwanted windows.
The best solution is to indicate external links somehow, and let the user decide whether they want to leave the site, open the link in a new window, or more probably these days,in a new tab. You can do this by adding a small icon next to any external links. Sites like wikipedia.com already do this and an icon convention for offsite links has started to appear: a box with an arrow.
The easiest way to do this is to add a class to any external links, and then apply the icon as a background image. In this example I have created space for the icon by giving the link a small amount of right padding, and then applied the icon as a background image at the top right of the link.
<html>
<head>
<style>
.external {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
</style>
</head>
<body>
<a href="two.html" class="external">External</a>
</body>
</html>
3) Simple rollovers
In the bad old days, people used large and overly complicated JavaScript functions to create rollover effects. Thankfully, using the :hover pseudo-class allows us to create rollover effects without the need of JavaScript.
a:hover {
background-color: #369;
color: #fff;
}
4) Visited-link styles
Designers and developers often forget about the visited-link style and end up styling visited links the same as unvisited ones. However, a separate visited-link style can help orientate users, showing them which pages or sites they have already visited and avoiding unnecessary backtracking. Visited-link styles can add clutter to the main content area of your site, so use them wisely. However, they come into their own when used in sidebars or
subnavigation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visited Links</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1em;
}
/* visited links
================================== */
ul {
list-style:none;
}
li {
margin: 5px 0;
}
li a {
display: block;
width: 300px;
height: 30px;
line-height: 30px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/visited.gif) no-repeat left top;
text-indent: 10px;
}
li a:visited {
background-position: right top;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="http://www.andybudd.com/">Andy Budd's Blogography</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li>
<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li>
<li><a href="http://www.clagnut.com/">Clagnut</a></li>
<li><a href="http://www.htmldog.com/">HTML Dog</a></li>
<li><a href="http://adactio.com/journal/">Adactio</a></li>
<li><a href="http://www.allinthehead.com/">All In The Head</a></li>
<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li>
<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li>
</ul>
</body>
</html>
5) Pure CSS tooltips
Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom, stylized tooltips using a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by using CSS positioning techniques. This technique requires a modern, standardscompliant browser like Firefox to work properly. As such, it is not a technique you would add to your day-to-day arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of what will be possible when CSS is better supported.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tooltips</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
line-height: 1.2;
}
/* css tooltip
================================== */
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win */
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
-->
</style>
</head>
<body>
<p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>
</body>
</html>
6) Basic list styling
Basic list styling is very simple. Say you start with this simple to-do list:
<ul>
<li>Read emails</li>
<li>Write book</li>
<li>Go shopping</li>
<li>Cook dinner</li>
<li>Watch Scrubs</li>
</ul>
To add a custom bullet you could use the list-style-image property. However, this doesn’t give you much control over the position of your bullet image. Instead, it is more common to turn list bullets off and add your custom bullet as a background image on the list element. You can then use the background image positioning properties to accurately control the alignment of your custom bullet.Internet Explorer and Opera control list indentation using left margin, whereas Safari and Firefox choose to use left padding. As such, the first thing you will want to do is remove this indentation by zeroing down the margin and padding on the list. To remove the default bullet, you simply set the list style type to none:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Adding a custom bullet is very straightforward. Adding padding to the left side of the list item creates the necessary space for your bullet. The bullet is then applied as a background image on the list item. If the list item is going to span multiple lines, you will probably want to position the bullet at or near the top of the list item. However, if you know the contents of the list items won’t span more than one line, you can vertically center the bullet by setting the vertical position to either middle or 50%:
li {
background: url(bullet.gif) no-repeat 0 50%;
padding-left: 30px;
}
7) Creating a vertical nav bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple List</title>
<style type="text/css">
<!--
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom;
text-indent: 50px;
text-transform: uppercase;
}
a:hover, .selected a {
background-color: #369;
background-position: right bottom;
color: #fff;
}
.first a {
height: 40px;
line-height: 40px;
}
-->
</style>
</head>
<body>
<ul>
<li class="first selected"><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</body>
</html>
8) Creating a horizontal nav bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Nav</title>
<style type="text/css">
<!--
/* Basic Styling
=======================*/
body {
font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}
/* mainNav
=======================*/
ul {
margin: 0;
padding: 0;
float: left;
width: 720px;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
list-style: none;
text-transform: uppercase;
}
ul li {
float: left;
}
ul a {
padding: 0 2em;
line-height: 2.1em;
background: url(images/mainNavBorder.gif) repeat-y left top;
text-decoration: none;
color: #fff;
float: left;
display: block;
}
ul a:hover {
color: #333;
}
ul .first a {
background: none;
}
-->
</style>
</head>
<body>
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
</body>
</html>
About the Authors
Andy Budd
Andy Budd is a user experience designer and web standards developer living and working in Brighton, England. As the creative director of web design consultancy Clearleft (www.clearleft.com), Andy enjoys building attractive, accessible, and standards-compliant websites. His online home can be found at www.andybudd.com, where he writes about modern web design practices.
Andy is a regular speaker at international design conferences, workshops,and training events, and organized the UK’s first web 2.0 conference (www.dconstruct.org). Passionate about the quality of education in the industry, Andy runs SkillSwap (www.skillswap.org), a free community training and networking project. Andy also helped set up the Web Standards Awards (www.webstandardsawards.com), a project that aims to recognize websites for their use of web standards. When he’s not building websites, Andy is a keen travel photographer. Never happier than when he’s diving some remote tropical atoll, Andy is also a qualified PADI dive instructor and retired shark wrangler.
Cameron Moll
Cameron Moll, recognized as one of the industry’s most balanced new media designers, is proficient in functional web design, elegant interfaces, and clean markup. Cameron has been involved in the design and redesign of scores of websites, and his influential techniques have found favor in circles across the Web. A marketing background and a keen eye for design lead him to merge form and function in the form of compelling visual experiences.
Cameron's work has been recognized by respected organizations and notable individuals such as National Public Radio (NPR), Communication Arts, and Veer. His personal site, CameronMoll.com, delivers design how-tos in the form of
engaging conversation, on-topic banter, and downloadable artwork source files.
Simon Collison
Simon Collison is Lead Web Developer at Agenzia (www.agenzia.co.uk), and has worked on numerous web projects for record labels,high-profile recording artists, and leading visual artists and illustrators,including The Libertines, Black Convoy, and Project Facade. Simon also oversees a production line of business, community, and voluntary sector websites, and passionately ensures everything he builds is accessible and usable, and complies with current web standards. Simon regularly reviews CSS-based websites for Stylegala, and does his best to keep his
highly popular blog (www.collylogic.com) updated with noise about web standards, music, film, travels, and more web standards.
On those rare occasions away from the computer, Simon can be found in the pub, or trying to con free gig tickets out of his clients. A little too obsessed with music, he is very likely to bore you with his latest musical Top 100, or give you a potted history of the UK indie scene from 1979 to the present day. Simon has lived in many cities, including London and Reykjavik, but now lives happily in Nottingham with Emma and a cat called Ziggy.
No comments:
Post a Comment