Assignment 4: Rounded Corners

Add rounded corners to something on your site or make a special page to demonstrate rounded corners. This can be done using CSS/images or a JavaScript library.
Add a link to this assignment on your project portal. This page must be published and complete before class starts next Tuesday.

Reading

Book: CSS Mastery
Chapter: 3 & 4 (rounded corners + styling links)
Section: all
Pages: 43-83

Lecture Notes

Backgrounds

Review of background properties:

body {
  /* the long way */
  background-color:#000000;
  background-image: url('http://intellectualpirates.net/img/Adam_Hand_4.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
 
  /*   The short way: this overrides all the background
    properties above (since it appears later in the CSS) */
  background:#036 url('http://farm4.static.flickr.com/3353/3219638385_cd034bf14b.jpg?v=0') repeat-y fixed -10px 200px;
}
 
h1 {
  padding-left: 30px;
  background: url('http://intellectualpirates.net/img/32/10.png) no-repeat left center;
}

CSS Sprites

A list apart has a good article on this.

h1 {
  padding-left: 40px;
  background: url('http://img.min3.net/Icons/32/sprites.png) no-repeat left center;
}

h1 {
  padding-left: 40px;
  background: url('http://img.min3.net/Icons/32/sprites.png) no-repeat left center 0 0;
}
h1 .icon {
  width:32px;
  height:32px;
}
.icon_idea {
  background: url('http://img.min3.net/Icons/32/sprites.png) no-repeat 0 0;
}

<h1><div class="icon icon_alert"></div>This is the header</h1>

CSS Sprites + Rounded Corners

There’s a great demo with notes that I’m not going to rewrite here: http://cssglobe.com/post/3714/css-sprites-rounded-corners/

Karate Corners is another great tutorial and method.

Rounded Corner Libraries

Even more rounded corners with CSS

Rounded Corners in JS

There are many JavaScript Libraries that will help you make rounded corners dynamically:

Vertical Alignment

#gallery>div{
line-height:110px;
height:110px;
width:110px;
}
#gallery img{
vertical-align:middle;
}

In Class Example

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
	<head>
		<title>CSS Sprites</title>
        <style type="text/css"><!--
 
		--></style>
	</head>
	<body>
    	<div id="headerLeft"></div>
    	<div id="headerMid"></div>
        <div id="headerRight"></div>
        <div id="pageContent">
            <h1><div class="icon iconAlert"></div>Alert Message</h1>
            <h1><div class="icon iconIdea"></div>Idea Message</h1>
            <h1><div class="icon iconQuestion"></div>Question Message</h1>
            <h1><div class="icon iconRadioactive"></div>Radioactive Message</h1>
            <h1><div class="icon iconInfo"></div>Info Message</h1>
        </div>
	</body>
</html>

Complete Version

Week4_sprites.htm

Fading Stretchable Background

Quick and Dirty Demo

Intellectual Pirates

Week 4

Assignment 4: Rounded Corners