1 / 24

GET UGCS

GET UGCS. For Next Week’s class because I said so. That is my final answer. No Ifs, ands, or Buts. (insert other affirmatives here). PA 70c – Giordon Stark. Fun CSS Tricks. Table of Contents. Review of Last Time Let’s learn some tricks! More on Floats

merv
Download Presentation

GET UGCS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. GET UGCS For Next Week’s class because I said so. That is my final answer. No Ifs, ands, or Buts. (insert other affirmatives here)

  2. PA 70c – Giordon Stark Fun CSS Tricks

  3. Table of Contents • Review of Last Time • Let’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

  4. A Review of Last Time Because not everyone has perfect memory recall.

  5. The Box Model (again)

  6. 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.

  7. 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 floats • These 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.htm • http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

  8. 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)

  9. 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)

  10. 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.

  11. Tips and Tricks Time to spice up your code

  12. 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/

  13. 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/

  14. 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

  15. 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.”

  16. 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*

  17. 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

  18. 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; }

  19. 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

  20. 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

  21. 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!

  22. 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.

  23. Practice Session (last week) Making Magic

  24. Exercise/Homework • This is the second week of creating your layout page (one page) for your student website. You should have • Visualized your site layout • Developed a skeleton. • 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.

More Related