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 43

CSS transition function manipulator

• http://cssglue.com/cubic

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