Retina displeje pro webdesignéry
Upcoming SlideShare
Loading in...5
×
 

Retina displeje pro webdesignéry

on

  • 991 views

Ukázkové slajdy z chystaného dvoudenního školení v Ostravě — http://www.ovladnifrontend.cz/

Ukázkové slajdy z chystaného dvoudenního školení v Ostravě — http://www.ovladnifrontend.cz/

Statistics

Views

Total Views
991
Views on SlideShare
991
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Retina displeje pro webdesignéry Retina displeje pro webdesignéry Presentation Transcript

  • Displeje typu Retina pro webdesignéry
  • Hardware pixel ≠ CSS pixel Zdroj: apple.com 1px v CSS = 1 pixel na displeji? To už neplatí.
  • Hardware pixel ≠ CSS pixel HW pixel CSS pixel Apple displeje Retina dodává už na smartphonech, tabletech i laptopech.1 CSS pixel = 4 HW pixely, tzn. poměr 1:2. Android zařízení mívají poměr 1:1,5–2.
  • Hardware pixel ≠ CSS pixel Hardware pixel 480 × 320 960 × 640 CSS pixel 480 × 320 480 × 320Naštěstí nám do CSS ty zařízení posílají přepočítané rozměry. iPhone do verze 4 má stejné „CSS rozlišení” jako předchozí verze.
  • Retina technicky1) Jedna verze bitmapy + zmenšení HTML <img … height=”50”> CSS background-size: 50% auto;S nativní grafikou typu CSS stíny si prohlížeče poradí samy, ale pokud chceme na Retině krásné fotky, musíme jim je dodat ve vyšším rozlišení.
  • Retina technicky 2) Dvě verze bitmapy (Retina.js)Normal Retina<img src="image.png"> <img src="image@2x.png">.element { @media all and background-image: url(image.png); (-webkit-min-device-pixel-ratio: 1.5) {} .element { background-image: url(image@2x.png); } } http://retinajs.com/ Pokud máme bitmapovou grafiku v CSS, ve dvojnásobné velikosti ji můžeme dodat s media-query podmínkou (min-device-pixel-ratio: 1.5) nebo pomocí Retina.js.
  • Retina technicky 3) Vektory a pseudovektory ★ CSS3 (stíny, přechody) ★ Font ikony ★ CSS3 ikony ★ SVGhttp://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/ http://icomoon.io/app/ http://nicolasgallagher.com/pure-css-gui-icons/ Jak je vidět, s bitmapami jsou na displejích typu Retina komplikace. Tam kde to má smysl je lepší používat pseudovektory.
  • Autor Martin Michálek www.vzhurudolu.czwww.twitter.com/machal Dotazy?martin@vzhurudolu.cz