More CSS

Lecture Overview CSS3 Crash Course What makes a good selector? CSS Reference

CSS3 Crash Course!!! CSE 33453

CSS3 Outline 1.Borders 2.Background images 3.RGBA 5.Transform 6.Transition

CSS3 Outline 1.Borders 1.Border-radius 2.Box shadow 3.Border-image 2.Background images 3.Color 5.Transform 6.Transition

Border-radius Helpful for rounded corners, ellipses, circles, etc. No longer have to cheat and use images. CSE 33456

Border-radius border-radius: 1em 5em; First value specifies horizontal radius Second value specifies vertical radius If a second value is omitted the first is applied to both CSE 33457

Box-shadow Attaches one of more drop-shadows to the box Shadow will match border-radius CSE 33458

Box-shadow box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ First length is horizontal offset of shadow Second length is vertical offset of shadow Third length is blur radius of shadow Four length is spread distance CSE 33459

Border-image Developers can use images for borders instead of border styles. No more settling for borders that are just solid, dash, groove, etc. CSE

CSS3 Outline 1.Borders 2.Background images 1.Background-size 2.Background-origin 3.Multiple background images 3.Color 5.Transform 6.Transition

Background-size Specifies the size of background images. background-size: dimension | contain | cover CSE

Background-size Contain – scale the image, while preserving aspect ratio, to make the image contained by the background area. Cover – scale the image, while preserving aspect ratio, to make the image cover the background area. See demo for clarificationdemo CSE

Background-origin Specifies the position of the origin of an image specified using the background-image CSS property.background-image Background-origin: padding-box, border-box, content- box CSE

Multiple Background Images Allows developers to specify multiple background images for box elements CSE

Multiple Background Images Each images generates a separate ‘background layer’. The first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively. background-image: url(sheep.png), url(grassandsky.png); CSE

CSS3 Outline 1.Borders 2.Background images 3.Color 1.Color keywords 2.RGBA 3.HSLA 5.Transform 6.Transition

Color Keywords Case-insensitive identifiers which represent a specific color, e.g. red, blue, green, lightblue. Over a 100 named colors, see here.here These colors have no transparency. CSE

RGB Represents 3 channels – Red, green, and blue Hexadecimal notation – 6 character format: #FF00FF – 3character format: #F0F – Both formats represent the same color CSE

RGB Functional notation – rgb (R, G, B); – Integer format : Valid values are rgb (255, 0, 255) – Percentage format: Valid values are 0%-100% rgb (100%, 0%, 100%) CSE

RGBA Extends the RGB model to include “alpha” to specify opacity Alpha value is float number from 0.0 – 1.0 Alpha = 0 – Transparent Alpha =.5 – Semi transparent Alpha = 1 – opaque CSE

RGBA rgba(255,0,0,0.1) rgba(255,0,0,0.4) rgba(255,0,0,0.7) rgba(255,0,0, 1) CSE /* 10% opaque red */ /* 40% opaque red */ /* 70% opaque red */ /* 100% opaque red */

CSS Moment of Clarity Setting the css opacity property on an element applies to its children element as well. When you want an element’s bg to have transparency in it, but not its children, use rgba. CSE

HSLA Hue, saturation, lightness, alpha Hue – represents an angle of color (0-360). Red = 0 = 360 Green = 120 = 480 Blue = 240 = 600 CSE

HSLA Saturation – refers to the dominance of hue in a color – Possible values are 0-100% 100% is full saturation 0% is a shade of grey CSE

HSLA Lightness – how light or dark a color is – Possible values are 0-100% 100% is white 0% is black 50% is normal Alpha – same as rgba CSE

Benefits of HSLA Far more intuitive. You can guess at the colors you want then tweak. Easier to create sets of colors by finding a hue and then varying lightness and saturation Produces better randomized values than rgb. CSE

CSS3 Outline 1.Borders 2.Background images 3.Color 5.Transform 6.Transition

@font-face Allows developers to specify online fonts to display text. This eliminates the need to rely on fonts installed on the user’s computer. CSE

{ font-family: ; src: [, ]*; [font-weight: ]; [font-style: ]; } Check out Google Web Fonts for a collection of over 500 fonts.Google Web Fonts Use fonts that you upload to a server CSE

CSS3 Outline 1.Borders 2.Background images 3.Color 5.Transform 1.Translate 2.Rotate 3.Scale 4.skew 6.Transition

Transform Lets you translate, rotate, scale, and skew elements. Based on matrix math CSE

Translate Specifies a 2D translation transform: translate( tx[, ty]) /*one or two values. transform: translateX(tx) /*translates along x axis*/ transform: translateY(ty) /*translates along y axis*/ CSE

Rotate Rotates the element clockwise around its origin by the specified angle. transform: rotate(angle); /* rotate(30deg) */ CSE

Scale A 2D scaling operation described by [sx, sy]. If sy isn’t specified, it is assumed to be equal to sx. transform: scale(sx[, sy]) /*1 or 2 unitless numbers*/ transform: scaleX(sx) /* scaleX(2.7) */ transform: scaleY(sy) /* scaleY(.5) */ CSE

Scale sx = 1 and sy = 1 results in no scaling. sx = 0.5 and sy = 0.5 results in the element being scaled to half its size. sx = 2.0 and sy = 2.0 results in the element being scaled to twice its size. transform: scale(sx[, sy]) /*1 or 2 unitless numbers*/ transform: scaleX(sx) /* scaleX(2.7) */ transform: scaleY(sy) /* scaleY(.5) */ CSE

Skew Skews the element around the X and Y axes by the specified angles Don’t use skew(). It has been removed from the standard. transform: skewX(angle); /* skewX(-30deg) */ transform: skewY(angle); /* skewY(30deg) */ *you need the deg following the angle* CSE

CSS3 Outline 1.Borders 2.Background images 3.Color 5.Transform 6.Transition 1.Transition-property 2.Transition-duration 3.Transition-timing-function 4.Transition-delay

Transition Allows developers to define transitions between two states of an element. CSE

Transition-property Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed in the property are animated during transitions; changes to all other properties occur instantaneously as usual. CSE

Transition-duration Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. CSE

Transition-timing-function Specifies a bezier curve for determining how intermediate values are computed. Pre-defined timing values ease, equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) linear, equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in, equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) ease-out, equivalent to cubic-bezier(0, 0, 0.58, 1.0) ease-in-out, equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) CSE

CSS transition function manipulator CSE

Transition-delay Defines how long to wait between the time a property is changed and the transition actually begins CSE

Animatable Properties See here for an exhaustive listhere CSE

Animations Very similar to transitions – Both animate a property over time – Both have duration – Both have an optional delay – Both have a timing function However, animations are different b/c – They allow multi step animations aka keyframes – Can repeat any number of times – Go forwards and backwards CSE

Let the web move you Read more about transition and animations here here CSE

Vendor Prefixes Many CSS3 properties are not supported by their actual property name. Instead, browsers provide a vendor specific prefix to the property name for usage. CSE

Vendor Prefixes Internet Explorer: -ms-propertyName Firefox: -moz-propertyName Opera: -o-propertyName Safari /Chrome: -webkit-propertyName CSE

Vendor Prefix Example -ms-transform : rotate (7deg); -moz-transform : rotate (7deg); -o-transform : rotate (7deg); -webkit-transform : rotate (7deg); CSE

Vendor Prefix Drama Unfortunately, the W3 has yet agree upon/complete the CSS3 standard. Fortunately, browsers are ahead of the standard and use prefixes for un-standardized features. CSE

Vendor Prefix Always consult a CSS reference to determine if a CSS3 feature is implemented or uses a vendor prefix. CSE

Addition CSS Info CSE

Semantic Class Names Use class names that describe the content, not its presentation. Use class names that describe the status of the content. CSE

Don’t use class/id names that are visual.red { font-size: 16px; color: green; }.standardBlue { color: purple; } CSS is so cool! CSE! Sample text CSE

What class name would you use for the green content? CSE

Concise Selectors Item 1 CSE

CSS References Mozilla Developer Network W3schools W3 CSE