Learning: CSS3 First Look

http://www.lynda.com/CSS-tutorials/css3-first-look/73288-2.html

1. Introducing CSS3
1.2 The current status of CSS3
http://www.w3.org/Style/CSS/current-work

1.4 Can you use CSS3 now?

CSS3 PIE
http://css3pie.com/

Modernizr
http://www.modernizr.com/

1.5 Detecting support for CSS3 - quite important
http://www.lynda.com/home/Player.aspx?lpk4=77246&playChapter=False
use Modernizr
http://www.modernizr.com/

1.6 Understanding vendor prefixes

eCsstender
http://ecsstender.org

Css3 Generator
http://css3generator.com

2. CSS3 Selectors
2.1 An overview of child and sibling selectors

2.2 Using child and sibling selectors

2.3 An overview of attribute selectors
http://www.lynda.com/home/Player.aspx?lpk4=77251&playChapter=False

This video also tells how to use each attribute selector.

2.4 Using attribute selectors
http://www.lynda.com/home/Player.aspx?lpk4=77252&playChapter=False

2.5 Pseudo-class UI selectors - out of my interest
http://www.lynda.com/home/Player.aspx?lpk4=77253&playChapter=False

2.6 Negation pseudo-class selectors
http://www.lynda.com/home/Player.aspx?lpk4=77254&playChapter=False

the border image in CSS3 is interesting.

2.7 Target pseudo-class selectors - out of my interest
http://www.lynda.com/home/Player.aspx?lpk4=77255&playChapter=False

2.8 Structural selectors - quite powerful and complex
http://www.lynda.com/home/Player.aspx?lpk4=77256&playChapter=False

2.9 Nth-child selector syntax - quite powerful and complex
http://www.lynda.com/home/Player.aspx?lpk4=77257&playChapter=False

2.10 First, last, and only structural selectors - quite useful
http://www.lynda.com/home/Player.aspx?lpk4=77258&playChapter=False

2.11 Using structural selectors to write more efficient code
http://www.lynda.com/home/Player.aspx?lpk4=77259&playChapter=False

3. Working with Color in CSS3
3.1 Color formats in CSS3

3.2 Transparency in CSS3
http://www.lynda.com/home/Player.aspx?lpk4=77262&playChapter=False

3.3 CSS3 gradients
http://www.lynda.com/home/Player.aspx?lpk4=77263&playChapter=False

3.4 Creating linear gradients
http://www.lynda.com/home/Player.aspx?lpk4=77264&playChapter=False

a page bg gradient - from 0.25 to 0.65 of the page height

3.5 Creating radial gradients
http://www.lynda.com/home/Player.aspx?lpk4=77265&playChapter=False

4. CSS3 Typography
4.1 Working with web fonts

https://typekit.com

http://www.fontsquirrel.com
http://theleagueofmoveabletype.com
http://www.fontslive.com
http://www.extensis.com/en/WebINK
http://kernest.com

4.2 @font-face syntax
http://www.lynda.com/home/Player.aspx?lpk4=77268&playChapter=False

4.3. Downloading sample fonts
http://www.lynda.com/home/Player.aspx?lpk4=77269&playChapter=False

4.4 Writing @font-face declarations
http://www.lynda.com/home/Player.aspx?lpk4=77270&playChapter=False

(the image was copied from HTML5 First Look)

4.5 Using web fonts
http://www.lynda.com/home/Player.aspx?lpk4=77271&playChapter=False

(the image was copied from HTML5 First Look)

4.6 Using text shadows - broadly supported
http://www.lynda.com/home/Player.aspx?lpk4=77272&playChapter=False

4.7 Creating multi-column text
http://www.lynda.com/home/Player.aspx?lpk4=77273&playChapter=False

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

(the above two images were copied from HTML5 First Look)

5. CSS3 and Page Layout
5.1 An overview of the flexible box model
http://www.lynda.com/home/Player.aspx?lpk4=77275&playChapter=False

5.2 Controlling box orientation
http://www.lynda.com/home/Player.aspx?lpk4=77276&playChapter=False
vertical is the default orientation for DIVs
#container has five child div tags.
#container { width: 960px; display: -webkit-box; display: -moz-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; }

5.3 Setting element flexibility - need to watch it again to remember
http://www.lynda.com/home/Player.aspx?lpk4=77277&playChapter=False

5.4 Distributing boxes
http://www.lynda.com/home/Player.aspx?lpk4=77278&playChapter=False

5.5 Controlling box alignment
http://www.lynda.com/home/Player.aspx?lpk4=77279&playChapter=False
box align handles the vertical orientation
box pack handles the horizontal orientation

Vertically Centered!!!
(note: there is a wrapper div outside of the container div)

(there was a small padding on the right side of the container div box)

Absolutely Centered!!!
(note: there is a wrapper div outside of the container div)

5.6 Working with box-sizing - can be used NOW
http://www.lynda.com/home/Player.aspx?lpk4=77280&playChapter=False

6. The CSS3 Box Model
6.1 Using border-radius
http://www.lynda.com/home/Player.aspx?lpk4=77282&playChapter=False
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

6.2 Creating custom rounded corners
http://www.lynda.com/home/Player.aspx?lpk4=77283&playChapter=False

(same as above)

6.3 Understanding border images
http://www.lynda.com/home/Player.aspx?lpk4=77284&playChapter=False

for now: use "round" and ignore "repeat"

6.4 Using border images
http://www.lynda.com/home/Player.aspx?lpk4=77285&playChapter=False
border: 10px solid #cb7d20; // 10px border-width is twice the size of the 5px border image slice
-moz-border-image:url(../_images/border_image.png) 15 round;
-webkit-border-image:url(../_images/border_image.png) 15 round;
border-image:url(../_images/border_image.png) 15 round;

6.5 Creating box shadows
http://www.lynda.com/home/Player.aspx?lpk4=77286&playChapter=False
-webkit-box-shadow: 2px 2px 5px #000;
-moz-box-shadow: 2px 2px 5px #000;
box-shadow: 2px 2px 5px #000;
// 2px (x-offset) 2px (y-offset) 5px (blur value) #000 (shadow color)

-webkit-box-shadow: inset 2px 2px 3px #999, inset -2px -2px 3px #999, 2px 2px 5px #000; -moz-box-shadow: inset 2px 2px 3px #999, inset -2px -2px 3px #999, 2px 2px 5px #000; box-shadow: inset 2px 2px 3px #999, inset -2px -2px 3px #999, 2px 2px 5px #000;
// here are three separate shadows // the two inset values create the inner shadows or an emboss look

6.6 CSS3 backgrounds
http://www.lynda.com/home/Player.aspx?lpk4=77287&playChapter=False

6.7 Controlling background size - too much info - need to watch again
http://www.lynda.com/home/Player.aspx?lpk4=77288&playChapter=False
background: #e1d8b9 url(../_images/star_icon_large.png) no-repeat;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
// or background-size: 50px 50px;

6.8 Creating multiple background images
http://www.lynda.com/home/Player.aspx?lpk4=77289&playChapter=False
background-image: url(../_images/callOut_top.jpg), url(../_images/trivia_bottom.png); background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
padding-bottom: 100px; // to keep text away

6.9 Using background-origin
http://www.lynda.com/home/Player.aspx?lpk4=77290&playChapter=False
border: 10px solid rgba(212, 178, 220, .5);
background: #e1d8b9 url(_images/star_icon_large.png) no-repeat;
-moz-background-origin: content-box;
-webkit-background-origin: content-box; background-origin: content-box;
// background-origin: border-box;