FOR NEXT WEEK’S CLASS BECAUSE I SAID SO.

THAT IS MY FINAL ANSWER.NO IFS, ANDS, OR BUTS.

( INSERT OTHER AFFIRMATIVES HERE)

GET UGCS

FUN CSS TRICKS

PA 70c – Giordon Stark

Table of Contents

Review of Last TimeLet’s learn some tricks!

More on Floats Absolute Positioning inside Relative Positioning

Positioning in General Vertical Alignment Child and Sibling Selectors CSS Transparency Sprites, Efficiency, and Cool Date Display

BECAUSE NOT EVERYONE HAS PERFECT MEMORY RECALL.

A Review of Last Time

The Box Model (again)

The Clean Slates

Have you ever thought that it would make sense to have a ‘blank slate’ html tag that had absolutely zero styles?

For Block Level elements: division tag. Div, nav, section, aside, header, footer, etc… (HTML5)

For Inline elements: span tag. <span></span>

Neither really have any HTML attributes which makes them perfect canvases for styling pages.

CSS Properties

Float Push it as far as possible to the right or to the left, and

allow text to wrap around it Required with variable height columns

Clear Used on a floated element to force it below adjacent

floatsThese are very hard to master. If you ever get

confused on how they work, Google “CSS Floats” for examples. http://css.maxdesign.com.au/floatutorial/tutorial0801.ht

m http://css.maxdesign.com.au/floatutorial/tutorial0901.ht

m

CSS Properties

Absolute & Fixed Positioning Position is determined by its offset values (top, left, right,

bottom) from its containing element Removed from the normal flow The containing block is the nearest element outside it that has

a position of absolute, relative or fixed If there is no such element, the browser window is used If it is fixed positioning, the browser window is ALWAYS used

Relative Positioning Position is determined by its offset values Not removed from normal flow The containing block of their closest, block-level ancestor

For absolute elements the containing element can be an inline element (not for relatively positioned elements)

CSS Properties

Stacking Order – use the z-index! Two things determine the stacking order: the stacking

context and the z-index value An element with a higher z-index appears in front of an

element with a lower z-index When two elements have the same value (or if neither has

been assigned a value) the source order is used Stacking context also determines the stacking order

http://www.brainjar.com/css/positioning/stackdemo.html

Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins”

Example: http://www.its.caltech.edu/~kratsg/ (if time permits)

Summary

For a quick reference to other properties and their values, just use w3schools website: Categorized (in particular, look at pseudo-elements)

http://www.w3schools.com/cssref/default.asp

For a list of supported units http://www.w3schools.com/cssref/css_units.asp

For a (short) list of colors http://www.w3schools.com/cssref/css_colors.asp

For a list of selectors http://www.w3schools.com/cssref/css_selectors.asp

When in doubt, Google is your friend.

TIME TO SPICE UP YOUR CODE

Tips and Tricks

A brief word…

I don’t intend to rewrite the world of CSS as it is.I’ll explain many of the CSS tricks and tips using

website blogs as I feel they have the best explanation.

I will try to summarize key points of each website as needed.

Want a background image that stretched the whole page…? Here’s how to do it (note, not very simple!) http://css-tricks.com/perfect-full-page-background-image/

More on Floats

http://css-tricks.com/all-about-floats/ CSS Positioning Property “Floated elements remain a part of the flow of the web page.” -

“Absolutely positioned page elements are removed from the flow of the webpage…”

“…floats can be used to create entire web layouts.” “An element that has the clear property set on it will not move up

adjacent to the float like the float desires, but will move itself down past the float.”

“If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.”

Three Methods of Clearing Floats: Empty Div Method, Overflow Method, Easy Clearing Method

Overflow Method is explained here: http://css-tricks.com/the-css-overflow-property/

Absolute Positioning inside Relative Positioning

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

“A page element with relative positioning gives you the control to absolutely position children elements inside of it.”

Why do we want it? Certain buttons, functionality, and simplicity

Combining this with the :after , :before selectors and the content attribute – we can insert anything possible! http://www.w3schools.com/cssref/pr_gen_content.asp

Positioning in General

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

To kind of drive the point home from last week… 4 values: Static (default), Relative, Absolute, Fixed Static

“the element will flow into the page as it normally would” Relative

“What it really means is “relative to itself”.” Absolute

Position anywhere you want; use top/left/right/bottom to position “Remember that these values will be relative to the next parent element with

relative (or absolute) positioning.” Trade-Off: “these elements are removed from the flow of elements on the

page” Fixed

“A fixed position element is positioned relative to the viewport, or the browser window itself.”

Vertical Alignment

http://css-tricks.com/what-is-vertical-align/Really no summary, just look at the link and

check out the images for examples of each value.

Possible values are: Top and Bottom Text-Top and Text-Bottom Baseline Middle Sub and Super

*Note: it makes sense only for tables and images*

Child and Sibling Selectors

http://css-tricks.com/child-and-sibling-selectors/Descendant Selector

“… select any list items that are anywhere underneath an unordered list in the markup structure…”

Child Combinator Selector “… select list items that are direct children of an unordered list...”

Adjacent/General Sibling Combinator Selector “… select an element that is directly after another specific

element…” “… element being selected doesn’t need immediately succeed the

first element, but can appear anywhere after it…”For list of the specifications from W3C:

http://www.w3.org/TR/css3-selectors/#selectors

CSS Transparency

Use opacity or rgba! Opacity applies to the whole element while rgba allows you to create semi-transparent background or font colors.

p, nav {background-color: rgba(0,0,0,0.5);

}

div {opacity: 0.75;

}

Sprites and Efficiency

http://css-tricks.com/css-sprites/A sprite is a HUGE image.Why have sprites?

Calling and loading one file of 10 KB size is faster than calling and loading 10 files of 1 KB size each.

How to do it? Use Paint or GIMP and a lot of elbow grease Use http://spriteme.org/

What can’t they do? Repeating graphics

Sprites and Date Display

http://css-tricks.com/date-display-with-sprites/

http://learningjquery.com/Somewhat self-explanatory.The text-indent method is used for hiding the

text and replacing it with an image http://css-tricks.com/css-image-replacement/

It also applies the ability to have multiple classes inside one tag

Lists to Links

http://css.maxdesign.com.au/listamatic/Similar to ZenGarden, it applies many

different stylesheets to the same list to create amazing displays

We’ll use the links on my website as a basic example… and see how flexible it can be!

More CSS3 Stuff

It’s pretty hard to go over EVERYTHING out there, but for a list of cool things: http://www.zenelements.com/blog/css3-introduction/

We’ll also look at the transform/transition examples that I’ve created so you get an idea of it.

MAKING MAGIC

Practice Session (last week)

Exercise/Homework

This is the second week of creating your layout page (one page) for your student website. You should have1. Visualized your site layout2. Developed a skeleton.3. Developed the CSS.

This week, you will improve upon your code Use as many html5 features as you can

Instead of divs everywhere, try grouping them into nav or section or aside or header or footer (learn.caltech.edu example)

Use as many accessibility attributes (title, alt, etc…) Make the site visually appealing using the latest features of CSS3

Transparency, gradients, transformations, hovers

Make sure to put your website online (using ugcs for instance) with index.html and main.css as your files.