rs79.vrx.palo-alto.ca.us

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

old back

01 Introduction How to specify and use CSS in your HTML pages: there are different ways to do it. 02 Selectors Advanced Advanced selector use Intro Introduction to selectors CSS Syntax 03 Gradients Angle Specifiying the angle of a gradient Color Specifying color and transparency in a gradient Direction Specifiying the direction of a gradient Radial Introduction to the radial-gradient command Repeat Repeating gradients Simple Introduction to the linear-gradient command. Stops Specifying additional color stops in a a gradient Tests Browser compatibility tests. Between 2008-2012 browser writers made programmed gradients work, both linear and radial although at this time of writing (dec 2012) none have made the commands work per the spec and all require browser prefixes still. Update: 2017; they all work, mostly. Some phones not so much, but prefix-less gradients are a reality now. 04 Color New methods for using color and transparency. 05 Div Autosize Brainjar Divs Max width Radius Sizing Why div Examples 06 Background Attachment scroll | fixed | local Clip border-box | padding-box | content-box Color any color value Image image = url | image() | image-set() | element() | cross-fade() | gradient Origin Position-x Position-y Position Repeat repeat | no-repeat | space | round | repeat-x | repeat-y Size contain | cover | px | % When using the shorthand property the order of the property values is: background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color 07 Fonts Font all Font family face Font size size Font style style Font-variant variant Font-weight weight Metrics 08 Borders/Lines All Color Style Thickness Top Right Bottom Left Border: size style color where style is one of: dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset The HTML <HR> element is controlled the same way. The default behaviour is given by: hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }

09 Conics Shapes and Geometry - Conical Sections Advanced : Geometry for programmers The mathematical foundation of css curve theory and practice of rendering curves in css3 Curves can make any shape in nature. Bezier splines approximate these curves well and is what Adobe Postscript/Acrobat is based on. CSS has zero support for this state of the art 1987 technology but curves can be approximates as sections of an eclipse. 10 Characters All Dingbats ☞ ☠ ☢ ☣ ☷ ♆ ♖ ♜ ♣ ♨ ♬ ✉ ✏ ✒ ✤ Languages Popular HTML5 has 40960 characters. No single font in the world has all of them (some come close) and many useful odd characters can be found in many common fonts. 11 Flexbox Container Flex Container Items Flex Items 12 Variables CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation or a double-dash (or hyphen) prefix before the identifier. e.g. --main-color: black; accessed using the var() function e.g., color: var(--main-color); . 13 Shadow Box Text Box shadow and text shadow are the only two forms of shadow effect available. box-shadow: [inset] <x-offset> <y-offset><blur><radius><color> 14 15 Units of measurement Absolute Absolute Units Relative Relative units Test dir There's more than just PX! There are over a dozen different ways to specify dimension other than with PX old back Backgrounds