CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1
CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2
Nasza przykładowa strona 3
Typowa struktura folderów /css/ tu umieszczamy nasze pliki.css /css/fonts/ tu umieszczamy fonty /img/ tu umieszczamy obrazki /js/ skrypty JavaScript /index.html pliki.html /strona1.html 4
Ćwiczenie 1 menu 1. Dodaj podświetlenie na fioletowo elementu menu po najechaniu na niego myszką (selektor CSS a:hover {} ). 2. Zmień pozycję menu na taką jak poniżej: 5
Ćwiczenie 2 gradient w tle 1. Dodaj gradient w tle całej strony: Spraw by gradient nie przesuwał się wraz ze stroną (aby zawsze był przyklejony do góry okna przeglądarki. 6
Ćwiczenie 3 przyklejone menu Spraw aby menu wylądowało z prawej strony i tkwiło stale w tym miejscu, nawet gdy użytkownik przescrolluje stronę: 7
Ćwiczenie 4 tekst na obrazku i opacity Zmień układ strony na poniższy: 8
Ćwiczenie 4 cd.: opacity Opacity: Sprawdź jak działa zmiana opacity rodzica na zagnieżdżone w nim elementy HTML. Alternatywy: 1. background: rgba(0, 0, 0, 0.6); Uwaga! Nie działa w IE nawet 8, zamiast tego używamy:.alpha60 {filter:progid:dximagetransform.microsoq.gradient(startcolorstr=#99000000, endcolorstr=#99000000);} #argb, gdzie a = 0.6 * 255 > HEX hyp://css tricks.com/rgba browser support/ 2..png 9
Ćwiczenie 4 cd.: z index Właściwość z index określa w jakiej kolejności elementy HTML są nakładane jeden na drugim. Domyślna kolejność jest taka, jak kolejność elementów w pliku HTML. Uwaga! Elementy pozycjonowane (rela ve, absolute,..) tworzą nowy kontekst (stos) z index zaczynający się od 0! W CSS3 elementy z opacity różnym od zera także tworzą nowy kontekst! hyp://pl.html.net/tutorials/css/lesson15.php 10
Image sprites Technika optymalizacyjna używana najczęściej w przypadku ikon, małych kontrolek UI, obrazków wypunktowania list, etc. 1. Umieszczamy w równych odstępach wszystkie obrazki na jednym obrazie i zapisujemy go do /img/ 2. W CSS deklarujemy tła dla kolejnych elementów ustawiając odpowiednie background posi on 3. Uwaga na zmianę tła np. na :hover! Opis techniczny (EN): hyp://www.bookofspeed.com/ chapter3.html 11
Image sprites przykłady Amazon.com Gmail.com Zadanie: Znajdź (używając Firebuga) image sprites na stronach onet.pl i wp.pl 12
Ćwiczenie 5 image sprites Dodaj ikonki do menu używając CSS image sprites. Zestaw przykładowych ikonek znajdziesz na: hyp://tomsieron.com/wit/przyklad/icons.png 13
Ćwiczenie 6 tła Zaokrąglone rogi: hyp://dochub.io/#css/border radius Gradienty: hyp://gradientsmotherfucker.com/gradients.css 14
Typografia fontsquirrel.com Google Web fonts Płatne: typekit.com, fontdeck.com,... 15
Osadzamy fonty via fontsquirrel.com 1. Wybieramy font 2. Pobieramy @font face kit i rozpakowujemy go lokalnie 3. Umieszczamy pliki w odpowiednich folderach (fonty na przykład w /css/fonts/) 4. Wklejamy CSS deklarujący fonty 5. Upewniamy się, że ścieżki do plików są poprawne 6. Dodajemy w CSS selektory nadające właściwość font family odpowiednim elementom HTML 7. Voilà! 16
Osadzamy fonty via Google Web Fonts 1. Wybieramy fonty, z polskimi znakami diaktrycznymi 2. Pobieramy kod JS do wklejenia na naszej stronie 3. Dodajemy w CSS selektory nadające właściwość font family odpowiednim elementom HTML 4. Voilà! 5. Sprawdzamy jak ilość zadeklarowanych fontów wpływa na czas ładowania strony (za pomocą Firebuga) 17
Ćwiczenie @font face Zmień font nagłówków na Museo Slab, font paragrafów na Museo Sans używając Fontsquirrel i Google Web Fonts. Podmień także font w menu na Museo Sans. 18
Dziękuję za uwagę. Tomasz Sieroń t.sieron@wit.edu.pl www.linkedin.com/in/tomsieron www.goldenline.pl/tomasz-sieron twitter.com/tomsieron 24