→ and → to change slides. 2 for comments. www.standardista.com/webstock

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

Part 7: Fonts

@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 ✓ ✓ (3.5+) ✓ (10+) ✓ (iOS 4.2) (9) ✓ 4.2 ✓ 2.2
SVG ✓ Χ ✓ ✓ Χ ✓ ✓ (3)
WOFF ✓ (5+) ✓ (3.6+) ✓ (11.1+) ✓ (5.1) ✓ (9) ✓ (5) Χ

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
cat Google Fonts
FontSquirrel @font-face generator

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
Visit Site

box-shadow

 
box-shadow: 
	inset 3px 3px 0 3px #C7573A, 
	inset -3px -3px 0 3px #BDD9D5, 
	3px 3px 0 3px #BDD9D5, 
	-3px -3px 0 3px #C7573A;
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
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>
Visit Site

multi-column text

Next ➹