CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites

Transkrypt

1 CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1

2 CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2

3 Nasza przykładowa strona 3

4 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

5 Ć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

6 Ć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

7 Ć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

8 Ćwiczenie 4 tekst na obrazku i opacity Zmień układ strony na poniższy: 8

9 Ć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=# , endcolorstr=# );} #argb, gdzie a = 0.6 * 255 > HEX hyp://css tricks.com/rgba browser support/ 2..png 9

10 Ć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

11 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:// chapter3.html 11

12 Image sprites przykłady Amazon.com Gmail.com Zadanie: Znajdź (używając Firebuga) image sprites na stronach onet.pl i wp.pl 12

13 Ć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

14 Ćwiczenie 6 tła Zaokrąglone rogi: hyp://dochub.io/#css/border radius Gradienty: hyp://gradientsmotherfucker.com/gradients.css 14

15 Typografia fontsquirrel.com Google Web fonts Płatne: typekit.com, fontdeck.com,... 15

16 Osadzamy fonty via fontsquirrel.com 1. Wybieramy font 2. 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

17 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

18 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

19 Dziękuję za uwagę. Tomasz Sieroń twitter.com/tomsieron 24