CSS3 - IT Courses

CSS3
Paweł Rajba
http://itcourses.eu/
[email protected]
Agenda
• Wprowadzenie
• Przegląd wybranych możliwości
o
o
o
o
o
o
o
o
Czcionki
Selektory
Czcionki
CSS Flexible Box Layout
Szpalty
Tło
Border
Transitions
Wprowadzenie
• Dużo nowych możliwości
• Problem ze wsparciem w przeglądarkach
o Gdzie co działa: http://caniuse.com/
o Acid test: http://acid3.acidtests.org/
• Własne implementacje w przeglądarkach
o
o
o
o
o
WebKit
Mozilla
Internet Explorer
Opera
W3C
-web-kit-property
-moz-property
-ms-property
-o-property
property
• Mnóstwo zestawień, co nowego w CSS w Internecie
o Np. http://tutorialzine.com/2013/10/12-awesome-css3-features-you-canfinally-use/
Czcionki
• Możemy definiować i używać własnych czcionek
• Dwie części
o Deklaracja
@font-face {
font-family: 'NazwaNowejCzcionki';
src: url('PTC55F-webfont.eot');
src: url('PTC55F-webfont.woff') format('woff'), … (dodatkowe pliki)
… opcjonalnie font -weight, -style, -stretch,…
}
o Użycie
body { font-family: NazwaNowejCzcionki, Arial, sans-serif; }
• Generatory CSS i pliki czcionek
o www.fontsquirrel.com
• Czcionki od Google
o https://fonts.google.com/
Czcionki
• Cienie wokół tekstu
o text-shadow:
2px /* horizontal */
2px /* vertical */
4px /* blur */
#444 /* color */
Demo
• 01-fonts.html
Selektory
•
•
•
•
•
•
•
•
•
•
•
•
:first-of-type
:last-of-type
:only-of-type
:nth-child(#)
:nth-last-child(#)
:nth-of-type(#)
:nth-last-of-type(#)
:last-child
:root
:empty
:not(…)
::selection
•
•
•
•
•
•
•
:enabled
:disabled
:checked
:valid
:invalid
:optional
:required
Demo
• 02-selectors.html
CSS Flexible Box Layout
• Krótka historia layoutu
o HTML tables
o Float layout
o Problemy z mnogością rozdzielczości
• Fixed width vs. Fluid
o Flexible box layout
o CSS Grid Layout Module
• słabe wsparcie przeglądarek, nie będziemy omawiać
• Responsive Web Design?
o Do tego wrócimy później…
CSS Flexible Box Layout
• Nowy sposób budowania layoutu strony
• Poziom wsparcia: http://caniuse.com/#feat=flexbox
• Określa relacje pomiędzy parentem (flex container) a
child items (flex items)
• Utworzenie kontenera flex
o display: flex
• Terminologia
o box (2009): https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
o flexbox (2012): https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
o flex (bieżąca): https://drafts.csswg.org/css-flexbox/
CSS Flexible Box Layout
• Podstawowa terminologia
• Przejdźmy do szczegółów
o …wspierając się obrazkami z
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Flexible Box Layout
• Układanie elementów
o Kierunek układania
• flex-direction: row | row-reverse | column | column-reverse
o Sposób zawijania, gdy brakuje miejsca
• flex-wrap: nowrap | wrap | wrap-reverse
o Jedno property do obu powyższych, np.
• flex-flow: column wrap | row-reverse wrap-reverse | …
• Kolejność wyświetlania elementów
o Pojęcie Ordinal Group
o Składnia: order: liczba
• Określa nr grupy (domyślnie wszystkie elementy mają order: 0)
• Uwaga: jest to grupa, może być zatem więcej niż 1 element
CSS Flexible Box Layout
• Automatyczne dopasowywanie wielkości elementów
o Powiększanie, gdy jest wolne miejsce: flex-grow
• Im większa liczba, tym bardziej element będzie powiększony
• Wartość 0 oznacza brak powiększania
o Pomniejszanie, gdy brak wolnego miejsca: flex-shrink
• Im większa liczba, tym bardziej element będzie pomniejszony
o Wartość wyjściowa: flex-basis (analogiczne do width)
o Kombinacja wszystkich elementów: flex
• Składnia: flex: flex-grow flex-shrink flex-basis
• Domyślne: flex: 0 1 auto
CSS Flexible Box Layout
• Wyrównywanie elementów
o Trzy główne property
• justify-content: flex-start | flex-end | center | space-between |
space-around
o rozłożenie elementów w kontenerze względem main-axis
• align-items: flex-start | flex-end | center | baseline | stretch
o rozłożenie elementów w kontenerze względem main-axis
• align-content: flex-start | flex-end | center | space-between |
space-around | stretch
o rozłożenie wierszy/kolumn (lines) kiedy jest ich więcej
o nie ma znaczenia, gdy jest tylko jeden wiersz/kolumna (line)
o Można też nadpisać align-items dla wybranego elementu poprzez
property align-self
CSS Flexible Box Layout
• Do poczytania:
o https://www.w3.org/TR/css-flexbox-1/
o https://css-tricks.com/snippets/css/a-guide-to-flexbox/
o https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
o http://blog.end3r.com/113/css3-flexbox-flexible-box-model/
Demo
• 03a-flex-grow.html
• 03b-flex-ordinal-group.html
• 03c-flex-main-layout.html
Szpalty
• Multiple columns
o Dowolny blok można podzielić na szpalty
o Właściwości:
• column-count
• column-gap
• column-rule
• Do poczytania:
o https://css-tricks.com/almanac/properties/c/columns/
Demo
• 04-multiplecolumns.html
Tło
• Nowe możliwości w ustawianiu tła
• Wiele obrazków
o background:
url(img1) [position],
url(img2) [position],
…,
#color;
o background-repeat: no-repeat | repeat-y,…
o background-origin: content-box | padding-box | border-box
o background-size: length|percentage|cover|contain;
Tło
• Gradienty
o Liniowy
background: gradient(
start-gradientu,
kolor punkt-stopu,
…)
o Kołowy
background: gradient(
środek,
kształt [elipsa lub koło]
rozkład-kolorów-na-promieniu,
kolor punkt-stopu, …);
• Fajny tutorial
o http://jportal.pl/css3-gradienty.html
Demo
• 05-background.html
Border
• Również border ma nowe możliwości
• Właściwości
o border-radius
o box-shadow
o border-image
Demo
• 06-border.html
Transitions
• Dynamiczna zmiana właściwości
o Właściwość transition
o Po przecinku lista właściwości wraz z czasem przejścia
Demo
• 07-transitions.html
• AnimatedButtons