DOC PREVIEW
UW-Madison COMARTS 155 - W3C, HTML5 and CSS 3

This preview shows page 1 out of 3 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 3 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 3 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

Arts 155 1nd Edition Lecture 12Outline of Last Lecture Review of CSSTextLayoutMidterm ReviewOutline of Current Lecture W3CHTML5CSS3Current LectureW3COlympicsLondon: Interesting moment in ceremony where they mention “Tim” who is one of the founders of the internetSir Tim Berners-LeeIn 1989, innovated process for connecting HTTP client and serverBeyond people just using their own computers. Having them connected with HTML documents and hypertextIn 1994, he founded and became director of the world wide web consortium (W3C)Advocate for open source, inter-operable technologies and web standardsWeb took off because there were inter-operable concerns. Don’t have to worry about compatibility issues with hardware. W3CMembers come from the technology industryMission is to insure inter-operabilityDraft and publish standards for royalty-free web technologiesW3C tells what code the browser would accept in rendering engine Standards move through series of stages: working draft; candidate recommendation; proposed recommendation; W3C recommendationHTML 5HTML 5: Exciting FeaturesEnhanced video and audio options, including video animation with CanvasRobust support for new APIs (Application Programming Interfaces), including File API, Media API, and drag and Drop APILet different software packages speak to each other. The end of plug-ins as we know them! Maybe.These notes represent a detailed interpretation of the professor’s lecture. GradeBuddy is best used as a supplement to your own notes, not as a substitute.Gradual move to phase out plug-ins, but we’re not totally there yet.HTML5: New ElementsAllows you to write cleaner, better code. Easier <nav><aside><article><section><header><footer>CSS 3CSS 3: New Features for Layout, Graphic Design, Interactivity and Visual DepthGroup of new features and new standards that moved through the W3C. Summarize with these designing features. Box ModelCan define areas individually (ex. Margin-top: 50px) or define all 4 sides at once (ex. margin: 50px)960 pixel grid systemThink mathematically. Define a width for your body. Can divide 960 pixels so many different ways.CSS 3Kokogames: CSS3 gone wild. A ton of background stuff going on. A ton of drop shadows. Rounded corners everywhere. It’s gone to the point where it drives art people crazy. Mr. Simon Collision: Interesting font choices and interactivity. Can move mouse and it will light upBackgroundCan modify opacity of just the background colors. The background colors overlap. Can do that fairly easily.“color” is content color (writing)“background-color” is the color in the backgroundHue Saturation / Lightness and RGBA shows opacityBackground Gradients in CSS3You say you want a linear gradient, and have it move from one color to another. 0,0,0,100 is pretty even.Greater Background Image Control in CSS3Manipulating Background ImagesRepeating Position imageBack up with gradients and solid colorYou can use a fall back in case the browser can’t render the image properlyDrop Shadows in CSS3Drop shadows: “box-shadow” effect is the sense that there is a shadow. It gives sense of depthText shadows are easy to create in CSS3, but not always so easy to read!Box ShadowHorizontal first, then Vertical, then Blur radius (how defined the shadow is), then add colorVertical Margin Collapse (W3C standards that can catch you by surprise)W3P has the assumption that the users want to see as much as they can. Want most important content to be there. If there are two vertical margins, it takes the greater number and drops the other andeverything moves up in position. Can correct by having top or bottom be 0 and then the other can have the total.Rounded CornersLaw Suit: Apple patented rounded corner of iPhone body and apps. However, HTML an CSS is fine to do rounded corners“border-radius” it applies evenly define them all as one number. You can make it unequal as well. CSS3 Animations and InteractivityStyling LinksHyperlink by default appears as blue and underlinedCan change color or remove underline: “text-decoration: none”Effect with hover, simple level of interactivityA:active, moment they clickSprites and Image Rollover: This is big with mobile app design. Can load multiple images at one time. Animations with Keyframes: from particular background to new background*Watched more of Side by


View Full Document

UW-Madison COMARTS 155 - W3C, HTML5 and CSS 3

Download W3C, HTML5 and CSS 3
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view W3C, HTML5 and CSS 3 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view W3C, HTML5 and CSS 3 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?