View
214
Download
0
Category
Tags:
Preview:
Citation preview
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 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.
Recommended