Attribute Selectors

Not just classes and ids any more!

• E[foo^="bar"]
  an element whose "foo" attribute value begins exactly with the string "bar"
• E[foo$="bar"]
  an element whose "foo" attribute value ends exactly with the string "bar"
• E[foo*="bar"]
  an element whose "foo" attribute value contains the substring "bar"

:nth-child pseudo-class selector

Say WHAT???

Ever want to style a table so that every other row was a different color?

Or have a gallery of images so that each row is 3 images wide?

:nth-child pseudo-class is used to style every 2nd, 3rd, 4th, or "nth" element

:nth-child pseudo-class selector

matches an element that has position an+b

element:nth-child(an + b) { style properties }
          

some examples

• 3 - selects the third element
• 4n - selects every fourth element
• even - selects even elements
• odd - selects odd elements

Some other pseudo-class Selectors

• E:last-child
  an element, last child of its parent
• E:only-child
  an element, only child of its parent
• E:empty
  an element that has no children (including text nodes)
• E:not
  an element that does not match simple selector

Let's Develop It!

Enhance our Women in Computing web site to use HTML5 & CSS3

Use a pseudo-selector

We need to clear every 4th famous woman

Previously, this was done by manually adding a break class to every 4th element

Replace this with an :nth-child selector

Example solutions

Make the rows of women three long

#famous article:nth-child(4n) {
  clear: both;
}
          

#famous div:nth-child(4n) {
  clear: both;
}
          

Vendor Prefixes

HTML5 and CSS3 are still new!

This is great, but it means that not all browsers treat new CSS3 properties the same

Vendor Prefixes

Vendor Prefixes

• Flags it as a work-in-progress
• When finished, the browser should support the non-prefixed name

Vendor Prefixes

each browser has their own

• -webkit-
• -moz-
• -ms-
• -webkit-
• -o-

Vendor Prefixes

.example{
  -moz-property: value;
  -ms-property: value;
  -webkit-property: value;
  -o-property: value;
  property: value;
}
          

order matters

the non-prefixed property should always go last

Vendor Prefixes

• A little annoying, but totally worth it!
• Tools available to help (e.g. Compass)

border-radius

Allows you to create rounded corners

border-radius

#example4, #example5 {
  border-radius: 50%;
}

Creates an ellipse

Creates a circle if height == width

Border-Radius

Remember vendor prefixes? This is where we would use one

#example1 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
          

rgba colors & opacity

In CSS, we can choose colors with hexadecimal #00ff00 or rgb(0, 255, 0)

In CSS3, there are ways to control opacity of a color too!

• rgba - control the opacity of a color
• opacity - control the opacity of an element

rgba colors & opacity

rgba colors

control the opacity of a color

.example2.rgba {
  background-color: rgba(255, 0, 0, 0.8);
}
          

color property using (red, green, blue, opacity)

opacity is a decimal value from 0 to 1

• 0 - not visible
• 1 - fully visible

opacity

control the opacity of an element

.example2.opacity {
  opacity: 0.8;
}
          

decimal value from 0 to 1

• 0 - not visible
• 1 - fully visible

gradients

Build gradients with CSS

linear gradients

.linear-example1 {
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
.linear-example2 {
background-image: linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
}
.linear-example3 {
background-image: linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);
}

linear gradients

.linear-example4 {
background-image: linear-gradient(red, white);
}
.linear-example5 {
background-image: linear-gradient(right, red, white);
}
.linear-example6 {
background-image: linear-gradient(bottom right, red, white);
}

radial gradients

.radial-example1 {
  background-image: radial-gradient(circle cover, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example2 {
  background-image: radial-gradient(0 0, circle, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example3 {
  background-image: radial-gradient(0 50%, circle, red, orange, yellow, green, blue, indigo, violet);
}

radial gradients

.radial-example4 {
  background-image: radial-gradient(circle cover, red, white);
}
.radial-example5 {
  background-image: radial-gradient(0 0, circle, red, white);
}
.radial-example6 {
  background-image: radial-gradient(0 50%, circle, red, white);
}

gradients

Let's Develop It

Enhance our Women in Computing web site to use HTML5 & CSS3

Enhance the site using CSS3 properties

• Tackle one small problem at a time
• You have 10-15 minutes to get started
• You won't be able to change everything - if we have time, you can continue at the end of the workshop

Suggestions

• Give the navigation links rounded corners
• Turn the famous women images into circles
• Give the section headings a text shadow
• Give the famous women images a box shadow
• Change the opacity of a famous woman on hover
• Change the opacity of organization logos on hover
• Add text shadow to the page title

Transitions

Allow property changes in CSS values to occur smoothly over a specified duration

Create some awesome effects without any JavaScript

Transition Triggers

• Hover
• Mouse click
• Focus state
• Active state
• Changes to the element

Transition Properties

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

transition-property

the names of CSS properties that should be transitioned

.example1 { transition-property: background-color; }
          

set to all to transition all CSS properties

.example2 { transition-property: all; }
          

transition-property

animatable examples

full list of supported properties

Transforms

Allow elements rendered by CSS to be transformed in space

Transform: Scale

scales the element

transform: scale(sx[, sy]);

Transform: Rotate

rotates the element degrees around its origin

transform: rotate(angle);

Transform: Translate

move element using x and y coordinates

transform: translate(ax[, ay]);

Transform-origin

the x and y origin for transformation

transform-origin: x-offset y-offset;

3D transforms

Animations

animate transitions from one CSS style configuration to another

Animations

Two Components

1. style describing the CSS animation
2. a set of keyframes that indicate the start and end states of the animation's style

Animations

@-webkit-keyframes background-color{
  from { background-color: slategray }
  to { background-color: black }
}
#background-color {
  -webkit-animation: background-color 1s infinite alternate;
  background-color: slategray
}

Benefits of CSS3 Animations

Over JavaScript Animations

• Easy for simple animations (no JavaScript required)
• Performance

Let's Develop It!

Enhance our Women in Computing web site to use HTML5 & CSS3

Continue enhancing the site using HTML5 & CSS3

• Tackle one small problem at a time
• Ask for help when you need it
• Continue migrating to HTML5
• Continue enhancing using CSS3

Suggestions

• Add transitions to the navigation links
• Rotate the famous women images on hover
• Add transitions to the jump arrows
• Add transitions to the organization images on hover
• Add a gradient to the footer background