HTMLCourse Basic/Notes/Week3
Download code for this week here: http://robynoverstreet.com/mozilla/week3/files
Part One : CSS Layout
Two-column Layout
Layouts with CSS can get tricky. So far, we've worked with two-column layouts where the sidebar floats to the left.
#sidebar{
width:200px;
float:left;
}
#main{
float:left;
width: 600px;
}
To float the sidebar to the right, we can first change the float property on the sidebar to "right".
#sidebar{
width:200px;
float:right;
}
#main{
float:left;
width: 600px;
}
You'll notice, though, that this makes the sidebar sit on the far right edge of the page, while the main div stays on the far left of the page. We could float them both to the right and they would sit next to each other, but then they'd both be on the far right of the page. To center elements on the page, we can wrap everything in another div. We'll call this div "container":
<div id="container">
<div id="header">
<h1>The Site.</h1>
</div><!--end sidebar -->
<div id="sidebar">
<h3>Sites I like</h3>
<ul>
<li>alistapart.com</li>
<li>apartmenttherapy.com</li>
<li>lifehacker.com</li>
</ul>
</div><!--end sidebar -->
<div id="main">
<h2>Welcome to my site</h2>
<p>But, soft! What light through yonder window breaks?
It is the east, and Juliet is the sun!</p>
</div> <!--end main -->
</div><!-- end container-->
To center the contents, we need to do two things to the container: give it a width and give it a left and right margin of "auto":
#container{
width: 705px;
margin: 0 auto;
}
Exercise
Create a two-column layout that centers on the page using a container div.
Absolute vs. Relative Postioning
Absolute positioning takes an element out of the flow of the page, and causes it to fix in place without regard to the other elements around it, sometimes causing it to overlap them. In contrast, relatively positioned elements, which are the default (and what we've been using so far), flow in relation to other elements on the page, so that they don't overlap. It's a good idea to use relative positioning when possible, but sometimes absolute positioning is the only way to accomplish a certain layout.
#sidebar{
position: absolute;
left: 0px;
width: 190px;
}
Notice the "left" propery in the style of this element. Absolutely positioned elements can use the offset properties of left, right, bottom, and top. These properties will position the sides of the element in relation to its containing block
Exercise
Try positioning one of your divs using the position:absolute property and value.
Three-column Layout
What about three columns? In many ways, three-column layouts work the same way the two-column layouts do. For example, if you give each column div a width and float them all to the left, they will sit next to each other on the left side of the page, provided there's enough space in the window for them to do so.
You may want to try having the left and right columns at a fixed size and letting the middle column adjust according to the size of the window. That's where things start to get tricky. First, you have to arrange your HTML so that the left and right sidebars come first in the code, before the main div. Secondly, you need to use absolute positioning. You can see an example of this here: <a href="http://www.intensivstation.ch/files/en_templates/temp05.html">http://www.intensivstation.ch/files/en_templates/temp05.html</a>
Displaying columns in any order
There will be times when you don't have the flexibility to change the HTML to suit your needs. Instead, you'll have to use CSS to change the position of divs on a page. For instance, your HTML may have the main content div first in the code, but you want the sidebar to come first from left to right. The way to acheive this layout is with negative margins. Let's look at a 3-column example:
<div id="main"> <h2>Welcome to my site</h2> <p>But, soft! What light through yonder window breaks?</p> </div><!--end main--> <div id="sidebar1"> <h3>Sites I like</h3> <ul> <li>alistapart.com</li> <li>apartmenttherapy.com</li> <li>lifehacker.com</li> </ul> </div><!--end sidebar1 --> <div id="sidebar2"> <p>All about me</p> </div><!--end sidebar2 -->
If we weren't able to change the order in which the divs appear in the HTML, we'd have to do some CSS trickery. Here's how negative margins work:
<img src="
" />
In this example, column 2 moves to the left -80% -- the width of itself plus the width of the column it's jumping over (column 1). Then column 1 takes a left margin of 20%, leaving room on its left for column 2 to fit. The CSS looks like this:
#column1{
float:left;
margin-left:20%;
width:60%;
}
#column2{
float:left;
width:20%;
margin-left:-80%;
}
#column3 {
float:left;
width:20%;
}
Layout Examples
<a href="http://layouts.ironmyers.com/">http://layouts.ironmyers.com/</a>
<a href="http://www.intensivstation.ch/en/templates/">http://www.intensivstation.ch/en/templates/</a>
Exercise
Find a layout of a site that you like, and attempt to implement it using CSS.
Layout and Design Inspiration:
<a href="http://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/">http://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/</a>
<a href="http://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/">http://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/</a>
<a href="http://designm.ag/inspiration/non-profit-websites/">http://designm.ag/inspiration/non-profit-websites/</a>
<a href="http://designm.ag/inspiration/30-beautifully-simple-websites/">http://designm.ag/inspiration/30-beautifully-simple-websites/</a>
Part Two: CSS 3
Note: Much of the documentation for this part of the class can be found on the slideshow at <a href="http://www.slideshare.net/robynover/css-and-css3">http://www.slideshare.net/robynover/css-and-css3</a>
CSS 3 is not one monolithic thing. Rather, i'ts a collection of modules, each of which can be implemented separately by different browsers. That way, a browser doesn't have to support all or nothing -- it can implement some modules and not others.
Some browsers implement particular CSS 3 properties in their own ways. When a vendor does this, they add a prefix to the beginning of the property: -moz- for Mozilla and -webkit- for Safari, Chrome, and iPhone. To see all vendor specific properties for Mozilla and Webkit browsers, see:
Mozilla properties <a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions</a>
Webkit properties <a href="http://qooxdoo.org/documentation/general/webkit_css_styles">http://qooxdoo.org/documentation/general/webkit_css_styles</a>
You can find which browsers support which CSS3 properties by checking the compatibility chart at <a href="http://caniuse.com">CanIUse.com</a>
New Visual Effects in CSS 3
RGBA
CSS 3 added opacity support to RGA colors. Before, you could specify red, green, and blue. Now you can specify alpha in addition; in other words, transparency. The alpha value is expressed as a decimal, with 1.0 being 100% opacity, .6 being 60% opacity, and so on.
background-color: rgba(255,70,280,.6);
Rounded Corners
A much-celebrated feature in CSS3, rounded corners add variety to box shapes without having to use images or javascript. Also known as border-radius, they follow the shape of an ellipse at the corner of a box. You define the horizontal and then the vertical radius of the ellipse to determine the shape of the corner. Mozilla now supports the border-radius property without the -moz- prefix. The webkit version is very similar to the standard version, as shown here:
border-radius: 55px / 25px; -webkit-border-radius: 55px 25px;
Shadows
Shadows can be applied to both boxes and text in CSS3. The property takes the following values: horizontal distance, vertical distance, blur, color. In Firefox 4.0, the -moz- prefix is no longer needed. In previous versions, it is required.
#mydiv{
box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
}
Gradients
Gradients are currently implemented with vendor-specific properties, and they differ from each other a bit. Both follow the same basic principles: the gradient has a start color and a stop color, is linear or radial, and goes in a certain direction.
Here's the webkit version:
background: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#fff));
The first property in the parentheses is the type of gradient -- either linear or radial. Next we have the start point followed by the end point of the gradient. Finally, we have colors for the start color and end color.
And the Mozilla version:
background: -moz-linear-gradient(top left -45deg,red,blue);
In Mozilla's case, the linear part of the gradient is defined in the property itself. There's also -moz-radial-gradient for radial types. For linear gradients, you can define a starting point ("top left" here) and/or an angle in degrees (-45deg). Unlike the webkit version, there's no end point, just an angle. Lastly we have the "to" and "from" colors, though they're not labeled as such like they are in the Webkit version.
Border Image
The border image property maps a rectangular image to the border of a box. The values you specify represent the way your image is sliced and shaped onto the box. More info about this feature here: <a href="http://www.lrbabe.com/sdoms/borderImage/">http://www.lrbabe.com/sdoms/borderImage/</a>
Multiple Backgrounds
CSS3 lets you add multiple background images by separating urls with a comma. If the images overlap each other, the one that is listed first will be on top.
#box{
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}
Reflection
The box-reflect property only works with webkit currently. It allows you to reflect an element on the page, specifying the location of the reflection (above, below, left, or right) and the distance of the reflection from the original.
img.reflected{
-webkit-box-reflect:below 5px;
}
Masks
Another webkit only property, mask-box-image lets you apply a mask to an image the way you would in Photoshop.
img.masked{
-webkit-mask-box-image: url(mymask.png);
}
Transformations
Transformations allow you to alter the way elements are rendered on the page. You can change the size, skew or rotate an image, for example.
scale
The scale property takes a number where 1 is 100%, 2 is 200% and .5 is 50%. If only one number is chosen, both the X and Y axes will be scaled the same. If there are two numbers separated by commas, the first is the X and the second is Y.
-webkit-transform: scale(2); -moz-transform: scale(2,4);
translate
Translate is another word for "move". The first value moves the element on the X axis and the second value moves it on the Y axis.
-webkit-transform: translate(50px,100px); -moz-transform: translate(50px,100px);
skew
Like scale, skew can take one value or two, but if only one value is given, then it will only skew on the X axis and not the Y. Use two values to scale both X and Y. The values here are expressed in degrees, denoted with "deg".
-webkit-transform: skew(45deg); -moz-transform: skew(45deg,20deg);
rotate
Rotate also uses degrees, and takes just one value.The rotation is clockwise, generally around the center point. (To rotate around a different point, see the "transform-origin" property.)
-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg);
For official documentation on transforms, see <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-functions">http://www.w3.org/TR/css3-2d-transforms/#transform-functions</a>
Animation
Transitions
You can animate transforms on your elements using transitions. Transitions take a time value in seconds for how long the transformation should take place. The transition property is defined in the CSS for the element, and then activates when something changes, as in a hover state. The final value is optional and defines the easing. Ease-in means that the animation will start slowly and then move faster. Ease-out is the opposite. Ease-in-out slows at the beginning and at the end of the animation.
#box1{
border:1px solid #333;
width:300px;
height:100px;
margin-top:100px;
-webkit-transition: all 3s;
-moz-transition: all 3s;
}
#box1:hover{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
#box2{
border:1px solid #900;
width:100px;
height:100px;
margin-left:100px;
margin-top:100px;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
}
#box2:hover{
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
}
The "all" here means that all properties that change are applied to the transition. If you only want the transition to happen on some of the properties, you can list the property you'd like to affect instead of "all" -- "color", for instance. If you need to list more than one property but not all, use transition-property. The other parts of the transition can be split out on their own as well, as below:
#box{
-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
Keyframes
New and exciting! Keyframing is something that used to only be available in an animation program like Flash. It refers to the process of setting different states that the animation should flow through and allowing the renderer to even out the difference between those states. See the diagram below.
<img src="
"/>
To create keyframes, define an animation by giving it a name (anything you want) and define at least the to and from states. Notice this happens outside of a CSS selector. Then apply the keyframe to a particular element.
@-webkit-keyframes movecat {
from {
-webkit-transform: scale(.8) translate(50px,50px) rotate(30deg);
opacity: 0.75;
}
to {
-webkit-transform: scale(1.2) translate(500px,200px) rotate(360deg) ;
opacity: 0.75;
}
}
img.catdiv{
width:145px;
height:122px;
-webkit-animation-name: movecat;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 3;
}
You can also add addition keyframes, by percent of the total time:
@-webkit-keyframes movecat {
from {
-webkit-transform: scale(.8) translate(50px,50px) rotate(30deg);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.0) translate(100px,100px) rotate(140deg);
}
to {
-webkit-transform: scale(1.2) translate(500px,200px) rotate(360deg) ;
opacity: 0.75;
}
}
More on CSS transition animations: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/">http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/</a>