Andrzej Mazur - kim jestem?
Ponad 5 lat doświadczenia w branży: Roche, Plus, GTech, Veikkaus, Britenet, Mediarun, SunWeb, Enzo, Forge Studio.
Dlaczego się tym zajmuję?
- Robię to co lubię...
- ...i jeszcze mi za to płacą!
- Jeśli jesteś dobry, to praca szuka Ciebie, a nie odwrotnie
- Najnowsze technologie
- Przecieranie szlaków
- Maksymalne wykorzystywanie nowych narzędzi
- Zabawa!
Plan prezentacji CSS3/CSS4
- CSS, którego możemy używać już teraz
- Ekperymentalne elementy, które są w fazie testów
- Szkice, plany, dyskusje
CSS3 - kaskadowe arkusze stylów 3
- Język opisujący wygląd strony
- CSS3 jest nowy, szybko się rozwija
- CSS3 daje duże możliwości
- Nie wszystkie przeglądarki go wspierają
- Aktualnie używane przeglądarki internetowe: Firefox 11, Chrome 18, Safari 5.1, Opera 11.6, Internet Explorer 9
Najciekawsze elementy CSS3
- Cień tekstu
- Cień elementu
- Zaokrąglone rogi
- Własne fonty
- Gradienty
- Transformacje
- Animacje
Cień tekstu
Teoria: text-shadow: h-shadow v-shadow blur color;
Praktyka: text-shadow: 2px 2px 5px #666;
Przykład:
Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 4+, Opera 10.6+, IE 10+
Cień elementu
Teoria: box-shadow: h-shadow v-shadow blur spread color inset;
Praktyka: box-shadow: 2px 2px 5px #ccc;
Przykład:
Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 5.1+ (Safari 3.2+ z -webkit-), Opera 10.6+, IE 9+
Zaokrąglone rogi
Teoria: border-radius: topleft topright bottomright bottomleft;
Praktyka: border-radius: 5px;
Przykład:
Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 5+ (Safari 3.2+ z -webkit-), Opera 10.6+, IE 9+
Własne fonty
Teoria: @font-face { font-family: fontName; src: url(fontUrl); } elem { font-family: fontName; }
Praktyka: @font-face { font-family: myFont; src: url('maven.ttf'); } div { font-family: myFont; }
Przykład:
Przeglądarki: OK. Firefox 4+, Chrome 11+, Safari 3.2+, Opera 10.6+, IE 9+ (IE 6+ z .eot)
Gradienty
Teoria: w zależności od przeglądarki
Praktyka: background-image: linear-gradient(top, red 30%, green 60%, blue 80%);
Przykład:
Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 5.1+ (-webkit-, częściowo od 4.0), Opera 12+ (-o-, częściowo od 11.1), IE 10+ (-ms-)
Transformacje
Teoria: transform: scale(num) rotate(deg) skew(deg,deg) translate(px,px);
Praktyka: transform: scale(0.8) rotate(5deg) skew(10deg, 15deg) translate(10px, 30px);
Przykład:
Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 3.2+ (-webkit-), Opera 10.6+ (-o-), IE 9+ (-ms-)
Animacje z transition
Teoria: transition: co ile_czasu jaki_efekt;
Praktyka: -moz-transition: color 1s ease-out;
Przykład:
Przeglądarki: Częściowo. Firefox 4+ (-moz-), Chrome 11+ (-webkit-), Safari 3.2+ (-webkit-), Opera 10.6+ (-o-), IE 10+ (-ms-)
Animacje z animation
Teoria: animation: animacja czas tryb; @-keyframes nazwa { animacja }
Praktyka: -moz-animation: pulsowanie 3s infinite alternate;
@-moz-keyframes pulsowanie { from { font-size: 80%; } to { font-size: 180%; } }
Przykład:
Przeglądarki: Częściowo. Firefox 5+ (-moz-), Chrome 11+ (-webkit-), Safari 4+ (-webkit-), Opera n/a, IE 10+ (-ms-)
...i wiele więcej!
Opacity, multiple backgrounds, word-wrap, box-sizing, text-overflow, colors, media queries, background-image, multiple column layout, border images, 3D transforms, object-fit/object-position.
Nowe specyfikacje CSS
Mogą wejść w skład CSS4 lub być rozwijane niezależnie
- Filtry
- Shadery
- Wartości
- Zmienne
- Detekcja funkcjonalności
- Powtarzalne fragmenty
Filtry (Filter Effects level 1)
- grayscale
- blur
- sepia
- hue-rotate
- saturate
- brightness
- contrast
- invert
Grayscale
img { filter: grayscale(100%); }
Blur
img { filter: blur(5px); }
Sepia
img { filter: sepia(100%); }
Hue-rotate
img { filter: hue-rotate(90deg); }
Saturate
img { filter: saturate(300%); }
Brightness
img { filter: brightness(50%); }
Contrast
img { filter: contrast(300%); }
Invert
img { filter: invert(100%); }
Mac OS X: Cmd + Alt + Ctrl + 8
Wszystkie filtry
Shadery
Grafika 3D z desktopowych gier pojawia się w sieci jako WebGL
Vertex shader, fragment shader
.old-book-page { filter: custom(url('ksiazka.vs') url('stary-papier.fs')); }
Wartości (values)
Możliwość przeliczania wartości bezpośrednio w kodzie CSS
width: calc((12em * 3) + 10px);
height: min(3em, 30px);
font-size: calc(max(2em, 20px) - 4px);
Zmienne (variables)
Napisz raz, używaj wielokrotnie - gdzie tylko chcesz
@var $kolorTekstu #FF0000;
h1 { color: $kolorTekstu; }
article { color: $kolorTekstu; }
Detekcja funkcjonalności (feature detection)
Natywny Modernizr
@supports (display: grid) {}
@supports (background: linear-gradient)
and (transform: rotate3d) {}
Powtarzalne fragmenty (mixins)
Tak jak zmienne, tylko więcej!
@mixin fragment { color: #F00; font-size: 14px; }
h1 { @mix fragment; margin: 10px; }
@mixin innyFragment($mojKolor #F00) {
color: $mojKolor; font-size: 14px; }
h1 { @mix innyFragment(#00F); margin: 10px; }
Dlaczego warto się tym zainteresować?
- Rozwijaj się
- Kreuj przyszłość
- Bierz udział w procesie kształtowania Sieci
- Sugeruj pomysły
- Twórz standardy
- Pomagaj innym
- Być może Twoja praca za kilka lat będzie używana przez miliony osób na całym świecie!
