→ and → to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

Course Outline

  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features

Part 7: Fonts, Shadows & Text Effects

@font-face

@font-face {
  font-family: 'blah';
  src: url('blah.eot');
  src: url('blah.eot?#iefix')
         format('embedded-opentype'),
     url('blah.woff') format('woff'),
     url('blah.ttf') format('truetype'),
     url('blah.svg#blahRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'blah', arial, san-serif;
}

@font-face

@font-face {
  font-family: yourFontName;
  src: url(fontfile) [, url(fontfile)]*;
  [font-weight: bold|normal];
  [font-style: italic|normal];
  [charset: characterSet;]
}
File Chrome Firefox Opera Safari Internet Explorer iOS mobile Android
EOT ✓
TTF/OTF ✓ ✓ ✓ ✓ 9 ✓ 4.2 ✓ 2.2
SVG ✓ ✓ ✓ ✓ ✓ 3
WOFF ✓ ✓ ✓ 11.1+ ✓ 5.1 ✓ 9 ✓ 5 ✓ 4.4

Issues

Who owns the font?
Do you have the legal right to distribute your chosen font?
No? There are services!
FOUT
Flicker of Unstyled Content
File Size
Character sets can be huge, so file sizes can be huge
Need a different file for each font style
Font services

Google Fonts

Google Fonts

font-squirrel

FontSquirrel @font-face generator

Shadows

Text Shadows

  • text-shadow: left top blur color;
  • Transparent Shadows 
    .trans { text-shadow: 0 5px 1px rgba(0,0,0,0.2);}
  • Solid Shadows 
    .solid { text-shadow: 0 5px 1px #999;}

Text Shadow

text-shadow:  0 2px 5px hsla(0, 0%, 0%, 0.2);
text-shadow: [horiz] [vert] [blur] [color];
.textshadow { text-shadow:
    0 1px #cccccc,
    0 2px #c9c9c9,
    0 3px #bbbbbb,
    0 4px #b9b9b9,
    0 5px #aaaaaa,
    0 6px  1px  rgba(0, 0, 0, 0.1),
    0 0    5px  rgba(0, 0, 0, 0.1),
    0 1px  3px  rgba(0, 0, 0, 0.3),
    0 3px  5px  rgba(0, 0, 0, 0.2),
    0 5px  10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}
  • Chrome
  • Safari
  • Firefox 3.5
  • Opera 9.5
  • IE 10
Visit Site

Text-Shadow

Visit Site

box-shadow

box-shadow:
	inset 3px 3px 0 3px yellow,
	inset -3px -3px 0 5px blue,
	3px 3px 0 5px #666,
	-3px -3px 0 3px red;
box-shadow:
    inset? [horiz] [vert] [blur] [spread] [color];
  • Last shadow drawn 'first', under previous shadow
  • Should still be -webkit- and -moz- prefixed for best support
  • Chrome / Chrome 10
  • Safari 3 / Safari 5.1
  • Firefox 3.5 / Firefox 4.0
  • Opera 9 / Opera 10.5

  • IE 9

Multiple Borders with Box Shadow

Try it out

Text-Stroke (not in spec)

Visit Site
Visit Site

Specifications

W3C Text Module
hanging-punctuation
none | [ first || [ force-end | allow-end ] || last ]
hyphens
none | manual | auto
letter-spacing
<spacing-limit>
line-break
auto | loose | normal | strict
overflow-wrap
normal | break-word
tab-size
<integer> | <length>
text-align
[ [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end
text-align-last
auto | start | end | left | right | center | justify
text-decoration
<text-decoration-line> || <text-decoration-style> || <text-decoration-color> || blink
text-decoration-color
<color>
text-decoration-line
none | [ underline || overline || line-through ]
text-decoration-skip
none | [ objects || spaces || ink || edges ]
text-decoration-style
solid | double | dotted | dashed | wavy
text-emphasis
‘<text-emphasis-style>’ || ‘<text-emphasis-color>’
text-emphasis-color
<color>
text-emphasis-position
[ above | below ] && [ right | left ]
text-emphasis-style
none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
text-indent
[ <length> | <percentage> ] && [ hanging || each-line ]?
text-justify
auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida
text-shadow
none | [ <length>{2,3} && <color>? ]#
text-space-collapse
collapse | preserve | preserve-breaks
text-transform
none | [ [ capitalize | uppercase | lowercase ] || full-width || full-size-kana ]
text-underline-position
auto | alphabetic | [ below || [ left | right ] ]
text-wrap
normal | none | avoid
white-space
normal | pre | nowrap | pre-wrap | pre-line
word-break
normal | keep-all | break-all
word-spacing
<spacing-limit> (%)
word-wrap / overflow-wrap
normal | break-word
Visit Site

Borders & Backgrounds

Next ➹