more css. lecture overview css3 crash course what makes a good selector? css reference
TRANSCRIPT
More CSS
Lecture Overview
• CSS3 Crash Course• What makes a good selector?• CSS Reference
CSE 3345 3
CSS3 Crash Course!!!
CSS3 Outline
1. Borders2. Background images3. RGBA4. @Font-face5. Transform6. Transition
CSS3 Outline
1. Borders1. Border-radius2. Box shadow3. Border-image
2. Background images3. Color4. @Font-face5. Transform6. Transition
CSE 3345 6
Border-radius
• Helpful for rounded corners, ellipses, circles, etc.
• No longer have to cheat and use images.
CSE 3345 7
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 3345 8
Box-shadow
• Attaches one of more drop-shadows to the box
• Shadow will match border-radius
CSE 3345 9
Box-shadowbox-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 3345 10
Border-image
• Developers can use images for borders instead of border styles.
• No more settling for borders that are just solid, dash, groove, etc.
CSS3 Outline
1. Borders2. Background images
1. Background-size2. Background-origin3. Multiple background images
3. Color4. @Font-face5. Transform6. Transition
CSE 3345 12
Background-size
• Specifies the size of background images.
background-size: dimension | contain | cover
CSE 3345 13
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 clarification
CSE 3345 14
Background-origin
• Specifies the position of the origin of an image specified using the background-image CSS property.
Background-origin: padding-box, border-box, content-box
CSE 3345 15
Multiple Background Images
• Allows developers to specify multiple background images for box elements
CSE 3345 16
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);
CSS3 Outline
1. Borders2. Background images3. Color
1. Color keywords2. RGBA3. HSLA
4. @Font-face5. Transform6. Transition
CSE 3345 18
Color Keywords
• Case-insensitive identifiers which represent a specific color, e.g. red, blue, green, lightblue.
• Over a 100 named colors, see here.
• These colors have no transparency.
CSE 3345 19
RGB
• Represents 3 channels– Red, green, and blue
• Hexadecimal notation– 6 character format: #FF00FF – 3character format: #F0F– Both formats represent the same color
CSE 3345 20
RGB
• Functional notation– rgb (R, G, B);– Integer format:
• Valid values are 0-255• rgb (255, 0, 255)
– Percentage format: • Valid values are 0%-100%• rgb (100%, 0%, 100%)
CSE 3345 21
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 3345 22
RGBA
• rgba(255,0,0,0.1) • rgba(255,0,0,0.4) • rgba(255,0,0,0.7) • rgba(255,0,0, 1)
/* 10% opaque red */
/* 40% opaque red */
/* 70% opaque red */
/* 100% opaque red */
CSE 3345 23
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 3345 24
HSLA
• Hue, saturation, lightness, alpha
• Hue – represents an angle of color (0-360). Red = 0 = 360Green = 120 = 480Blue = 240 = 600
CSE 3345 25
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 3345 26
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 3345 27
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.
CSS3 Outline
1. Borders2. Background images3. Color4. @Font-face5. Transform6. Transition
CSE 3345 29
@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 3345 30
@font-face
@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; }
• Check out Google Web Fonts for a collection of over 500 fonts.
• Use fonts that you upload to a server
CSS3 Outline
1. Borders2. Background images3. Color4. @Font-face5. Transform
1. Translate2. Rotate3. Scale4. skew
6. Transition
CSE 3345 32
Transform
• Lets you translate, rotate, scale, and skew elements.
• Based on matrix math
CSE 3345 33
Translate
• Specifies a 2D translation
transform: translate( tx[, ty]) /*one or two <length> values.
transform: translateX(tx) /*translates along x axis*/
transform: translateY(ty)/*translates along y axis*/
CSE 3345 34
Rotate
• Rotates the element clockwise around its origin by the specified angle.
transform: rotate(angle); /* rotate(30deg) */
CSE 3345 35
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 3345 36
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 3345 37
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*
CSS3 Outline
1. Borders2. Background images3. Color4. @Font-face5. Transform6. Transition
1. Transition-property2. Transition-duration3. Transition-timing-function4. Transition-delay
CSE 3345 39
Transition
• Allows developers to define transitions between two states of an element.
CSE 3345 40
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 3345 41
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 3345 42
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 3345 44
Transition-delay
• Defines how long to wait between the time a property is changed and the transition actually begins
CSE 3345 45
Animatable Properties
• See here for an exhaustive list
CSE 3345 46
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 3345 47
Let the web move you
• Read more about transition and animations here
CSE 3345 48
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 3345 49
Vendor Prefixes
• Internet Explorer: -ms-propertyName
• Firefox: -moz-propertyName
• Opera: -o-propertyName
• Safari /Chrome: -webkit-propertyName
CSE 3345 50
Vendor Prefix Example
-ms-transform : rotate (7deg);
-moz-transform : rotate (7deg);
-o-transform : rotate (7deg);
-webkit-transform : rotate (7deg);
CSE 3345 51
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 3345 52
Vendor Prefix
• Always consult a CSS reference to determine if a CSS3 feature is implemented or uses a vendor prefix.
CSE 3345 53
Addition CSS Info
CSE 3345 54
Semantic Class Names
• Use class names that describe the content, not its presentation.
<div class=“largeText”></div><div class=“standOut”></div>
• Use class names that describe the status of the content.
<div class=“red”></div><div class=“fail_message”></div>
CSE 3345 55
Don’t use class/id names that are visual
.red { font-size: 16px; color: green; }
.standardBlue { color: purple; }
<p class=“red”>CSS is so cool!</p>
<p class=“standardBlue”>CSE!</p>
<p>Sample text</p>
CSE 3345 56
What class name would you use for the green content?
CSE 3345 57
Concise Selectors
<div> <ol> <li>Item 1</li> </ol></div>
CSE 3345 58
CSS References
• Mozilla Developer Network
• W3schools
• W3