Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00109 002589 20847664 na godz. na dobę w sumie
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie III - książka
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie III - książka
Autor: Liczba stron: 308
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-7066-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Kaskadowe arkusze stylów (CSS) to technologia, która pozwoliła oddzielić treść od formy jej prezentacji. Dzięki temu tworzenie stron stało się prostsze i przyjemniejsze. Uzyskanie spójnego wyglądu witryny i błyskawiczne wprowadzanie zmian graficznych w obrębie całej strony nie byłyby możliwe bez stylów CSS. Kolejna wersja - CSS3 - dostarcza jeszcze więcej możliwości. Atrakcyjne efekty wizualne czy obsługa wielu formatów ekranu to tylko niektóre z nich.

Kolejne wydanie tej książki zostało ulepszone, poprawione i zaktualizowane o nowe funkcje wersji CSS3. W trakcie lektury nauczysz się precyzyjnie pozycjonować elementy, ustawiać marginesy, umieszczać obrazy w tle oraz tworzyć eleganckie tabele. Ponadto zobaczysz, jak przygotować atrakcyjny formularz, menu lub listę. Twoją szczególną uwagę z pewnością zwrócą rozdziały poświęcone CSS3. Oszałamiające efekty specjalne, przystosowanie do obsługi różnych formatów ekranu oraz wsparcie dla urządzeń mobilnych to tylko część atrakcji czekających na Ciebie. Książka ta jest doskonałym kompendium wiedzy na temat kaskadowych arkuszy stylów - warto w nią zainwestować!

Sięgnij po tę książkę i zdobądź wiedzę na temat:

Obowiązkowa lektura dla każdego programisty WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Stylin’ with CSS: A Designer’s Guide, Third Edition Tłumaczenie: Maksymilian Gutowski na podstawie: „CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II” w tłumaczeniu: Łukasza Piwko ISBN: 978-83-246-7066-6 Authorized translation from the English language edition, entitled: STLIN’ WITH CSS: A DESIGNER’S GUIDE, Third Edition; ISBN 0321858476; by Charles Wyke-Smith; published by Pearson Education, Inc, publishing as New Riders Publishing. Copyright © 2013 by Charles Wyke-Smith. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Polish language edition published by HELION S.A. Copyright © 2013. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/csswi3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność v Spis treści Podziękowania  •  iii O autorze  •  iv Spis treści  •  v Wstęp  •  x rOzdział 1: KOd HTML i STruKTura dOKuMenTu  •  1 Podstawy kodu HTML  •  2 Znaczniki okalające — tekst  •  2 Znaczniki nieokalające — treści wskazywane poprzez odniesienie  •  3 Atrybuty  •  4 Nagłówki i akapity  •  5 Elementy złożone  •  5 Zagnieżdżone znaczniki  •  6 Budowa dokumentu HTML  •  7 Szablon strony HTML  •  7 Elementy blokowe i liniowe  •  10 Elementy zagnieżdżone  •  16 Obiektowy model dokumentu (DOM)  •  20 Podsumowanie  •  22 rOzdział 2: POdSTawy CSS  •  23 Budowa reguły CSS  •  24 Konwencje zapisu reguł CSS  •  26 Selektory kontekstowe  •  28 Wyspecjalizowane selektory kontekstowe  •  32 Selektor dziecka   •  32 Selektor sąsiadującego brata +  •  33 Ogólny selektor braci ~  •  33 Selektor uniwersalny *  •  34 Identyfikatory i klasy  •  35 Atrybut class  •  35 Atrybut id  •  38 spis treściPoleć książkęKup książkę vi Kiedy używać identyfikatorów, a kiedy klas?  •  39 Identyfikatory i klasy — podsumowanie  •  41 Selektory atrybutów  •  41 Selektor nazwy atrybutu  •  41 Selektor wartości atrybutu  •  42 Selektory atrybutów — podsumowanie  •  42 Pseudoklasy  •  43 Pseudoklasy interfejsu  •  43 Pseudoklasy strukturalne  •  46 Pseudoelementy  •  47 Dziedziczenie  •  49 Kaskadowość  •  50 Źródła stylów  •  50 Zasady kaskadowości  •  52 Obliczanie precyzji  •  53 Deklaracje reguł  •  55 Wartości słowne  •  55 Wartości liczbowe  •  56 Wartości kolorów  •  57 Podsumowanie  •  61 rOzdział 3: POzyCjOnOwanie eLeMenTów  •  62 Model polowy  •  62 Obramowanie  •  63 Dopełnienie  •  66 Margines  •  67 Scalanie marginesów  •  68 Wybieranie jednostek miary marginesów  •  69 Wielkość pola  •  70 Elementy pływające i oczyszczające  •  75 Właściwość float  •  76 Trzy sposoby włączania pływających elementów do kontenerów  •  78 Właściwość position  •  86 Pozycjonowanie statyczne  •  86 Pozycjonowanie względne  •  87 CSS. Witryny internetoWe Szyte na miarę. autorytety informatykiPoleć książkęKup książkę vii Pozycjonowanie bezwzględne  •  88 Pozycjonowanie stałe  •  89 Kontekst pozycjonowania  •  90 Właściwość display  •  93 Tła  •  93 Właściwości tła CSS  •  94 Kolor tła  •  95 Obraz tła  •  95 Powtórzenia obrazu tła  •  96 Położenie tła  •  97 Wielkość tła  •  99 Zaczepienie tła  •  100 Właściwość zbiorcza tła  •  101 Inne właściwości tła w CSS3  •  101 Większa liczba obrazów tła  •  102 Gradienty tła  •  104 Podsumowanie  •  107 rOzdział 4: STyLizOwanie fOnTów i fOrMaTOwanie TeKSTu  •  108 Fonty  •  108 Właściwość font-family  •  109 Właściwość font-size  •  112 Właściwość font-style  •  115 Właściwość font-weight  •  116 Właściwość font-variant  •  116 Właściwość font  •  117 Właściwości tekstu  •  117 Właściwość text-indent  •  118 Właściwość letter-spacing  •  119 Właściwość word-spacing  •  121 Właściwość text-decoration  •  122 Właściwość text-align  •  122 Właściwość line-height  •  123 Właściwość text-transform  •  124 spis treściPoleć książkęKup książkę viii Właściwość vertical-align  •  125 Fonty internetowe  •  126 Internetowe biblioteki fontów  •  127 Gotowe zestawy @font-face  •  128 Własne zestawy @font-face  •  130 Stylizacja tekstu  •  130 Podstawowy układ tekstu  •  131 Stylizowanie tekstu w siatce  •  135 Typografia klasyczna  •  141 Podsumowanie  •  150 rOzdział 5: LayOuTy  •  151 Podstawy tworzenia layoutów  •  151 Wysokość i szerokość layoutu  •  152 Tworzenie kolumn  •  153 Nadawanie kolumnom dopełnień i obramowań  •  161 Trzykolumnowe layouty z płynną środkową kolumną  •  172 Trzykolumnowy layout z płynną środkową kolumną i ujemnymi marginesami  •  172 Trzykolumnowy layout z płynną środkową kolumną, oparty na właściwościach CSS3 table  •  177 Layout wielorzędowy i wielokolumnowy  •  179 Praktyczne selektory CSS  •  182 Wewnętrzne elementy div w działaniu  •  184 Podsumowanie  •  185 rOzdział 6: KOMPOnenTy inTerfejSu  •  186 Tworzenie menu nawigacyjnych  •  186 Pionowe menu  •  186 Menu poziome  •  189 Rozwijane menu  •  191 Formularze  •  201 Elementy HTML formularza  •  201 Sposoby kodowania formularzy  •  209 Stylizacja formularza  •  210 Formularz wyszukiwania  •  221 CSS. Witryny internetoWe Szyte na miarę. autorytety informatykiPoleć książkęKup książkę ix Chmurka  •  224 Stosy i z-index  •  227 Tworzenie trójkąta w CSS  •  228 Podsumowanie  •  230 rOzdział 7: STrOna inTerneTOwa z CSS3  •  231 Struktura strony  •  231 Planowanie kodu HTML  •  232 Stylizacja nagłówka  •  236 Obszar tytułowy  •  237 Formularz wyszukiwania  •  239 Menu  •  242 Obszar treści  •  249 Stylizacja pola logowania  •  253 Odnośniki do wpisów  •  258 Obszar książek  •  260 Stopka  •  268 Podsumowanie  •  271 rOzdział 8: PrOjeKTOwanie SKaLOwaLne  •  272 Duże layouty na małych urządzeniach  •  272 Zapytania medialne  •  274 Reguła @media  •  274 Atrybut media znacznika link  •  277 Wartości graniczne  •  277 Wartość viewport znacznika meta  •  278 Optymalizacja layoutu na potrzeby tabletów  •  278 Optymalizacja layoutu dla smartfonów  •  282 Dostosowanie layoutu do orientacji pionowej  •  285 Ostatnie detale  •  287 Błąd ze skalowaniem w Safari Mobile  •  287 Rozwijane menu na ekranach dotykowych  •  287 Podsumowanie  •  290 dOdaTeK   •  291 SKOrOwidz  •  299 spis treściPoleć książkęKup książkę r o z d z i a ł 7 Strona internetowa z CSS3 W TYM ROZDZIALE WYKORZYSTAM techniki tworzenia lay- outów z rozdziału 5. oraz techniki stylizacji komponentów z rozdzia- łu 6., by stworzyć pełnoprawną witrynę. Zapoznasz się z wieloma funkcjami stylistycznymi CSS3, m.in. zaokrąglonymi rogami, cie- niami tekstu i pól, przejściami oraz przekształceniami, które nadają oprawie grafi cznej bardziej nowoczesny i profesjonalny wygląd. Witryna, którą stworzę w tym rozdziale, to ta, którą tworzę rów- nolegle z tą książką — jej nowa strona internetowa. Tak jak zawsze, zaprezentuję na tym przykładzie nowe techniki, z których będziesz mógł korzystać we własnych projektach, oraz zwrócę uwagę na utrudnienia, z którymi możesz się zetknąć. Pokażę Ci najpierw, jak rozplanować szkielet strony, a następnie przeprowadzę krok po kroku przez proces nadawania stylów CSS każdemu obszarowi strony. Po przeczytaniu tego rozdziału będziesz wiedział, czego potrzeba do stworzenia pełnej witryny, i będziesz gotów tworzyć własne. Struktura strony Kiedy tworzysz jakąkolwiek bardziej skomplikowaną stronę, musisz napisać setki linijek kodu HTML i CSS. Warto zatem, żeby był uporządkowany. Ważne jest, aby nadać kodowi logiczną strukturę i myśleć hierarchicznie, żeby porządek kodu CSS był zgodny z kodem HTML. Tak właśnie sformatowany jest kod kolejnego przykładu i zdecydowanie polecam przyjęcie takiego podejścia. Wymaga to pew- nej dyscypliny, ale zdecydowanie się opłaca, ponieważ łatwo dzięki temu znaleźć kod CSS odnoszący się do dowolnego fragmentu kodu HTML. Ponadto możesz dzięki temu uniknąć dezorientującej sytu- Poleć książkęKup książkę 232 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki acji, w której kilka rozrzuconych po kodzie reguł nadaje style jednemu elementowi. To podejście przede wszystkim jednak ułatwia zrozumie- nie kodu i jego edycję, zarówno przeze mnie, jak i przez innych. Rzućmy najpierw okiem na ukończoną witrynę (rysunek 7.1). rySunek 7.1. oto ukończona witryna Planowanie kodu HTML Kiedy dopiero zaczynasz pracę z HTML, przełożenie projektu gra- ficznego na elementy kodu może być nie lada wyzwaniem. Można jednak przyjąć pewne dobre podejście. Przed rozpoczęciem kodowa- nia strony sam projekt zwykle tworzy się w Photoshopie, Fireworks lub chociaż na kartce papieru. To na tym etapie możesz omówić projekt z klientem, a następnie dostosować go, by mieć pewność, że oprawa graficzna i organizacja treści zgadzają się z wymogami pro- jektu. Następnie należy zabrać się za kodowanie stron. Pierwszym krokiem jest rozrysowanie w layoucie pól przedstawiających główny, strukturalny kod HTML. Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 233 Ponieważ kod HTML tworzy prostokątne elementy, powinieneś znaleźć sposób, by podzielić layout na kilka możliwie największych obszarów, określających najwyższe poziomy kodu, a następnie podzie- lić je prostokątnymi polami na mniejsze sekcje, zawierające zstępne elementy strukturalne. Oto, jak ten podział wygląda na mojej stronie. rySunek 7.2. Struktura pól na stronie pozwala mi wyłonić trzy poziomy strukturalne Jak widać na rysunku 7.2, strona podzielona jest schludnie na cztery prostokątne (pomarańczowe) pola, zajmujące całą szerokość strony, które odnoszą się do elementów HTML najwyższego poziomu. Zauważ, że zamierzam także zawrzeć cały layout w jednym kon- tenerze (oznaczonym tu na zielono), aby móc z łatwością ustawiać ogólną szerokość layoutu i wyśrodkować treść w oknie przeglądarki. Warto na tym etapie również wybrać klasy i identyfikatory głów- nych znaczników. Elementy HTML header i footer nie potrzebują klasy ani identyfikatora, gdyż w dokumencie występują tylko raz, ale dwa środkowe prostokąty — elementy section — trzeba będzie odróżnić identyfikatorami: feature_area i book_area. Poleć książkęKup książkę 234 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki Fakt, że obszar nawigacji pokrywa się z obszarem tytułu i pola wyszukiwania, wynika z tego, że już postanowiłem, iż te dwa ostatnie obszary będą pozy- cjonowane bezwzględnie. Spra- wia to, że element nav ignoruje je i wypełnia cały nagłówek. Będę mógł następnie wyśrodkować za- warte w nim menu na stronie, co zademonstruję w dalszej części rozdziału. poziom pierwszy poziom drugi poziom drugi poziom drugi Kolejnym krokiem jest rozplanowanie struktury drugiego poziomu, która oznaczona tu jest niebieskimi prostokątami. Przyglądam się każdemu elementowi najwyższego poziomu, aby określić największe elementy, w jakich można zorganizować ich zawartość. W nagłówku header znajdują się trzy zbiory treści: obszar tytułu po lewej, menu nawigacyjne pośrodku oraz formularz wyszukiwania po prawej. W obszarze feature_area wpis blogowy umieściłem po lewej, a po prawej obszar aside z polem logowania i listą odnośni- ków do wpisów. Zauważ, że w jednym elemencie zawarłem obydwa te komponenty; obszar ten podzielę dalej w kolejnym kroku. W obszarze book_area znajdują się cztery kontenery na cztery książ- ki. W znaczniku footer znajduje się tekst oraz strukturalny element nav. Muszę następnie dalej podzielić obszar feature_area, aby uzyskać dwa osobne komponenty: formularz i odnośniki. Wszystkie obrazy książek w obszarze book_area article zawarłem we własnych elementach, aby uzyskać kontekst pozycjonowania dla chmurki in- formacyjnej każdej z książek. Te dodatkowe elementy składają się na trzeci poziom hierarchii strukturalnej i oznaczone są fi oletowymi prostokątami. Tego planowania już wystarczy, by zacząć pisać kod, choć w ramach tworzenia strony konieczne może się okazać dodanie jednego czy dwóch elementów. Utworzę teraz wstępny kod, który odzwierciedla opisaną strukturę. div id=”wrapper” header section id=”title” !-- nagłówki h1 i h2 -- /section nav class=”menu” !-- menu nawigacyjne -- /nav form class=”search” !-- pole wyszukiwania -- Poleć książkęKup książkę 235 poziom pierwszy poziom drugi poziom drugi poziom trzeci poziom trzeci poziom pierwszy poziom drugi poziom trzeci poziom pierwszy poziom trzeci /form /header section id=”feature_area” article id=”blog_leadoff” !-- treść bloga -- /article aside form class=”signin” !-- pole logowania -- /form nav !-- odnośniki do wpisów -- /nav /aside /section section id=”book_area” article div class=”inner” !-- obrazy książek i obrócony tekst -- /div /article !-- cztery elementy article -- /section footer !-- tekst elementów footer i nav -- /footer /div Rozdział 7. StRona inteRnetowa z CSS3Poleć książkęKup książkę 236 Jak widzisz, każdy poziom osadzonych pól layoutu odzwierciedlony jest w kodzie w postaci osadzonych elementów. Najbardziej odpo- wiednie elementy HTML można dobierać na bieżąco. Lista menu na przykład zdecydowanie powinna znaleźć się w elemencie nav. Mając już ukończony kod strukturalny, określam ogólne ustawienia fonta i koloru tła strony dla elementu body oraz definiuję styl konte- nera wrapper, by podać ogólną szerokość layoutu i wyśrodkować go na stronie. body { font-family:helvetica, arial, sans-serif; background:#efefef; margin:0; } wrapper {width:980px; margin:0 auto 20px;} Mogę teraz zająć się kolejnymi elementami na stronie, nadając im treść i style CSS. Stylizacja nagłówka Zacznijmy od utworzenia kodu treści nagłówka header. header section id=”title” h1 Strona o CSS /h1 h2 Blog i książki Charlesa Wyke-Smitha /h2 /section nav class=”menu” ul li class=”choice1” a href=”#” Artykuły /a /li li class=”choice2” a href=”#” Książki /a /li li class=”choice3” a href=”#” Materiały /a /li li class=”choice4” a href=”#” Biblioteczka /a /li li class=”choice5” a href=”#” Kontakt /a /li /ul /nav CSS. Witryny internetoWe Szyte na miarę. autorytety informatykiPoleć książkęKup książkę atrybut for (o takiej samej wartości, jak identyfikator kontrolki) łączy oznaczenie z kontrolką 237 form class=”search” action=”#” method=”post” label for=”search” search /label input type=”text” id=”search” name=”search” placeholder=”szukaj” / /form /header Znacznik header dzieli się na trzy części: tytuł, obszar wyszukiwa- nia i wyśrodkowane menu. Zacznę od oznaczonego identyfikatorem title obszaru tytułowego. Obszar tytułowy Elementy h1 i h2 pozycjonuję bezwzględnie w górnym lewym rogu elementu header. Oto kod CSS: kontekst pozycjonowania obszaru tytułowego i wyszukiwania ustalona wysokość elementu obejmującego elementy pozycjonowane bezwzględnie kolejność: lewy górny róg, prawy górny, prawy dolny, lewy dolny ujemne oddalenie sprawia, że cień nie przekracza szerokości pola sprawia, że marginesy elementu i jego dzieci nie ulegają scaleniu odpowiednio duża szerokość pozwala zapobiec zawijaniu tekstu wystarczająco duża wysokość do objęcia dwóch wierszy tekstu pozycjonowanie w lewym górnym rogu header { position:relative; height:70px; margin:10px 0; background:#fff; border-radius:20px 0px 20px 0px; box-shadow:0 12px 8px -9px #555; padding:1px; } header section#title { position:absolute; width:300px; height:65px; left:0px; Rozdział 7. StRona inteRnetowa z CSS3Poleć książkęKup książkę 238 grubość, którą trzeba określić dla pobieranych fontów top:0; } header h1 { padding:9px 12px 0; font-family:’Lato’, helvetica, sans-serif; font-weight:900; font-size:2.2em; line-height:1; letter-spacing:-.025em; color:#4eb8ea; } header h2 { padding:0px 12px; font-family:”Source Sans Pro”, helvetica, sans-serif; font-weight:400; font-size:.9em; line-height:1; letter-spacing:-.025em; color:#333; } rySunek 7.3. elementy h1 i h2 są już wystylizowane. tymczasowo włączone obramowania ukazują położenie elementów Pierwsze, na co warto zwrócić uwagę w tym kodzie, to ustalona wysokość elementu header. Jak pokazałem w wielu poprzednich przykładach, zwykle warto pozwolić, by treść określała wysokość elementów strukturalnych, a wysokość strony zmieniała się wraz z dodawaniem treści. W tym przypadku, jako że header zawiera pozycjonowane bezwzględnie elementy, które nie rozpychają swoich rodziców, wysokość musiałem określić sam. Zawartość elementu header nie będzie ulegać większym zmianom, jeśli w ogóle, więc jest mało prawdopodobne, że kiedykolwiek wyjdzie poza obszar zdefiniowany jego wysokością. CSS. Witryny internetoWe Szyte na miarę. autorytety informatykiPoleć książkęKup książkę 239 Zwróć uwagę na ciekawe zestawienie dwóch zaokrąglonych i dwóch zwykłych rogów, które nadałem elementowi header oraz wielu in- nym znacznikom na stronie. Ten dyskretny a wyrazisty efekt dodaje layoutowi niepowtarzalnego charakteru. W ramce „Zaokrąglone rogi” znajdziesz więcej szczegółów związanych z tworzeniem za- okrąglonych rogów pól elementów HTML. Pozycję elementu title (oznaczonego kolorem czerwonym na ry- sunku 7.3) określiłem bezwzględnie, a następnie zdefiniowałem wielkość i dopełnienie jego elementów tekstowych oraz ustaliłem jego wysokość i szerokość, żeby te elementy obejmował. Zauważ, że w tych nagłówkach używam fonta internetowego Lato z Google Web Fonts. Grubość wielu fontów internetowych określa się właściwością font-weight, inaczej niż w przypadku fontów za- instalowanych w systemie, gdzie dla tej właściwości można określić jedynie styl normalny i pogrubiony. Więcej na temat Google Web Fonts przeczytasz w rozdziale 4. Cienie pól to kolejny charakterystyczny aspekt tego projektu. Są one zdefiniowane tak, by pojawiały się tylko przy dolnej krawędzi pola i miały od pola mniejszą szerokość. Tworzy to wrażenie, że pole unosi się nad stroną. Przykład znajdziesz w podświetlonym kodzie w powyższym przykładzie, a więcej na temat cieni pól przeczytasz w ramce „Cienie pól”. Mając już gotowe pole tytułowe, w podobny sposób umieśćmy pole wyszukiwania po lewej stronie. Formularz wyszukiwania Zacznijmy od kodu: form class=”search” action=”#” method=”post” label for=”search” search /label input type=”text” id=”search” name=”search” placeholder=”szukaj” / /form Poniżej znajduje się kod CSS formularza, który pojawił się w przy- kładzie w poprzednim rozdziale. Jedyna istotna różnica dotyczy tego, w jaki sposób określone jest położenie formularza w nagłówku. Rozdział 7. StRona inteRnetowa z CSS3Poleć książkęKup książkę 240 Zaokrąglone rogi tworzenie zaokrąglonych rogów, które były charakterystyczne dla designu Web 2.0 kilka lat temu, wymagało korzystania z rozbudowanego kodu JavaScript lub starannego rozmieszczania plików graficznych w zagnieżdżo- nych elementach div. dziś wystarczy napisać jedną linijkę kodu CSS. Podstawowa składnia wygląda następująco: border-radius:10px; W tym przypadku zaokrąglenie wszystkich czterech rogów ma wielkość 10 pikseli. można tutaj użyć standardowych deklaracji zbiorczych pola, z tym że nie obowiązuje kolejność właściwości top, right, bottom, left (które odnoszą się do krawędzi), lecz top-left, top-bright, bottom-right, bottom-left (które odnoszą się do rogów). zauważ, że możesz określić zarówno poziomy, jak i pionowy promień zaokrąglenia border-radius:10px / 20px; na rysunku 7.4 widać, że podane wartości określają promień koła lub elipsy, na której oparte jest zaokrąglenie. border-radius:10px; border-radius:10px; V H border-radius:10px / 20px; rySunek 7.4. ten diagram przedstawia rezultaty zastosowania dwóch powyższych przykładów kodu Jeżeli chcesz nadać odmienne wartości promieni poziomych i pionowych każdemu rogowi, możesz napisać deklarację zbiorczą: border-radius:10px 6px 4px 12px / 20px 12px 8px 24px; /* cztery poziome promienie, cztery pionowe */ zauważ, że obramowanie nie musi być widoczne, by korzystać z zaokrąglonych rogów. Jak widać na przykładzie menu z tego rozdziału, kolor tła elementu wyświetla samo zaokrąglenie bez obramowania. szerokość pozwalająca na objęcie poszerzonego pola położenie określone względem prawego górnego rogu nagłówka form.search { position:absolute; width:150px; top:23px; right:20px; } .search input { tworzy miejsce, w którym pole może się poszerzyć w lewo float:right; width:70px; padding:2px 0 3px 5px; border-radius:10px 0px 10px 0px; font-family:“Source Sans Pro”, helvetica, sans-serif; CSS. Witryny internetoWe Szyte na miarę. autorytety informatykiPoleć książkęKup książkę 241 Cienie pól Cienie pól elementów HtmL są kolejnym przykładem efektu, który — zanim pojawił się CSS3 — uzyskiwano przy użyciu różnych elementów graficznych, elementów div, co wymagało niemałej cierpliwości, a dziś można uzy- skać dzięki jednej linijce kodu CSS. Składnia podstawowej deklaracji wygląda następująco: box-shadow:4px 4px 5px 8px #aaa inset; kolejność stylów jest następująca: przesunięcie w poziomie, przesunięcie w pionie, rozmycie, rozszerzenie, kolor, wpuszczenie cienia do wewnątrz pola (cień znajduje się domyślnie poza polem). musisz przynajmniej podać przesunięcie w poziomie i w pionie oraz kolor — uzyskujesz wtedy cień o wyraźnej krawędzi, o podanej szerokości i barwie. nadając wartości ujemne ustawieniom przesunięcia w prawo i w dół, przesuwasz cień w lewo i w górę. Słowo kluczowe inset wpuszcza cień w pole. można podać więcej niż jedną deklarację cienia, oddzielając je od siebie przecinkami. na rysunku 7.5 widnieją różne przykłady tego, co można tą właściwością uzyskać. rySunek 7.5. Przy użyciu różnych wartości, zarówno dodatnich, jak i ujemnych, można uzyskać różne efekty cienia pola font-weight:400; font-size:1em; color:#888; outline:none; -webkit-transition:2s width; } .search input:focus {width:140px;} usuwa domyślne podświetlenie obramowania tworzy animację zmiany wielkości pola (wymagane są tu także inne prefiksy) element rozciąga się na taką szerokość po sfokusowaniu Rozdział 7. StRona inteRnetowa z CSS3Poleć książkęKup książkę 242 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki .search label {display:none;} form.search input {background-color:#fff;} form.search input::-webkit-input-placeholder {color:#ccc;} rySunek 7.6. Przejście zwiększa szerokość pola. tymczasowo widać obramowanie formularza W celu zaoszczędzenia miejsca nie pokazuję osadzonych poziomów listy, które składają się na rozwija- ne menu. O tworzeniu takich menu przeczytasz w punkcie „Rozwija- ne menu” w rozdziale 6. Jak widać w wyróżnionym kodzie, określam szerokość elementu form i określam położenie jego prawej krawędzi względem prawej krawędzi elementu header. Jak wskazuje tymczasowo widoczne ob- ramowanie na rysunku 7.6, kontener formularza jest wystarczająco duży, by obejmować rozszerzone pole. Nie będę się rozwodzić nad samym obszarem wyszukiwania, ponieważ omówiłem go już w po- przednim rozdziale, ale wspomnę, że tekst zastępczy — przynaj- mniej w przeglądarkach opartych na Webkit — można wystylizować inaczej niż tekst, który użytkownik podaje w polu, co widać w ostat- niej linijce powyższego kodu. Menu Rozmieściłem już elementy bezwzględnie przy obydwu krawę- dziach nagłówka, usuwając je ze struktury dokumentu. Mogę teraz umieścić między nimi wyśrodkowane menu. Oparte jest ono na ko- dzie CSS menu z rozdziału 6., z wyjątkiem kilku drobnych zmian. nav class=”menu” ul li class=”choice1” a href=”#” Artykuły /a /li li class=”choice2” a href=”#” Książki /a /li !-- kolejne elementy menu -- /ul /nav Kod składa się ze standardowej listy odnośników w elemencie nav, ale poszczególne odnośniki przypisałem do osobnych klas, aby nadać im różne kolory. Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 243 Oto kod CSS: nav.menu { margin:19px auto; padding:0; text-align:center; font-size:.8em; } nav.menu ul {display:inline-block;} nav.menu li { float:left; list-style-type:none; position:relative; } nav.menu li a { display:block; padding:.25em .8em; font-family:”Source Sans Pro”, helvetica, sans-serif; font-weight:600; font-size:1.2em; text-align:left; color:#fff; text-decoration:none; -webkit-font-smoothing:antialiased; } nav.menu li.choice1 a {background:#f58c21;} nav.menu li.choice2 a {background:#4eb8ea;} wyrównuje menu względem kontenera kontener ściśle obejmuje elementy listy rozkłada menu w poziomie usuwa domyślne punktory listy kontekst pozycjonowania osadzonej listy sprawia, że odnośnik wypełnia element li usuwa podkreślenie odnośnika zapobiega migotaniu tekstu pod koniec zmiany przezroczystości w przeglądarkach opartych na Webkit Poleć książkęKup książkę 244 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki nav.menu li.choice3 a {background:#d6e636;} nav.menu li.choice4 a {background:#ee4c98;} nav.menu li.choice5 a {background:#f58c21;} nav.menu li:hover a { color:#555; border-color:#fff; border:0; } nav.menu li:last-child a {border-bottom-right-radius:10px;} nav.menu li:first-child a {border-top-left-radius:10px;} rySunek 7.7. menu jest teraz wyśrodkowane na stronie. Pozycjonowane bezwzględnie elementy tytułu i pola wyszukiwania są wyjęte poza strukturalny ciąg dokumentu, wobec czego element nav może być szeroki na całą stronę (co wskazuje tymczasowo widoczne obramowanie) Jako że obszary tytułu i wyszukiwania są pozycjonowane bez- względnie, są one wyjęte z ciągu strukturalnego dokumentu. Element blokowy nav zachowuje się przez to tak, jakby nie były one obecne, i rozciąga się na całą szerokość swojego rodzica, header (rysunek 7.7). Mogę dzięki temu wyśrodkować menu na stronie. Posłużę się tym przykładem, aby bardziej szczegółowo omówić wyśrodkowywanie przy użyciu kodu CSS. WyśrOdkOWyWanie eLeMenTóW O nieOkreśLOnej SZerOkOśCi Wyśrodkowanie elementu zawartego w drugim elemencie może być trudne. Kiedy masz do czynienia z elementami pozycjonowanymi standardowo wartością static, możesz sprawić, by element spływał w lewo lub w prawo, albo użyć właściwości text-align z rodzicem, aby wyrównać element do lewej (left), prawej (right) bądź wyśrod- kować go (center). Element można także wyśrodkować przy użyciu marginesów o wartości auto. Minusem tych technik jest koniecz- ność ustalenia szerokości elementu, który chce się tak rozmieścić. Kiedy lista tworząca takie menu generowana jest dynamicznie na Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 245 podstawie bazy danych, czy nawet jeśli jej elementy będą modyfiko- wane ręcznie, to nie sposób przewidzieć szerokości wyśrodkowanego elementu i ją ustalić. Często otrzymuję e-maile z pytaniami, jak wyśrodkowywać menu w kontenerze, wobec czego omówię wyśrod- kowywanie elementów o nieokreślonej szerokości. Wartość inline-block jest dziwnym, hybrydowym ustawieniem właściwości display, które łączy w sobie zachowanie elementów liniowych i blokowych. Zachowanie blokowe elementu o takim usta- wieniu polega na obsłudze marginesów i dopełnień oraz możliwości obejmowania innych elementów blokowych. Zachowanie liniowe z kolei polega na ścisłym okalaniu zawartości zamiast rozszerzania się na całą szerokość rodzica. Oznacza to, że szerokość elementu zawsze jest równa szerokości jego treści. Kolejną użyteczną cechą wartości inline-block jest to, że element obejmuje pływające ele- menty. Problem w tym, że taki element nie obsługuje jednej wartości marginesu — auto — która jest najprostszym sposobem na wyśrod- kowanie elementu w kontenerze. Rozwiązaniem jest nadanie właściwości text-align:center rodzi- cowi elementu, czyli nav, a następnie nadanie wyśrodkowywanemu elementowi właściwości display:inline-block — w tym przy- padku elementu ul z elementami menu. To zestawienie pozwala na uzyskanie pożądanego rezultatu, czyli wyśrodkowanego w rodzicu elementu o nieokreślonej szerokości. Jak widać w pierwszych dwóch wyróżnionych wierszach podanego wcześniej kodu, tak właśnie zrobiłem. Menu jest teraz idealnie wyśrodkowane, gdyż rodzic nav ignoruje bezwzględnie pozycjonowane elementy znajdujące się po jego bokach, oraz rozciąga się na całą szerokość elementu header. Aby zademonstrować, jak to się świetnie sprawdza, usunę jeden z elementów listy menu. rySunek 7.8. menu pozostaje wyśrodkowane nawet po zmianie liczby zawartych w nim elementów Poleć książkęKup książkę 246 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki Na rysunku 7.8 usunąłem ostatni element menu, które pozostaje idealnie wyśrodkowane. Jest to idealne rozwiązanie dla witryny z dy- namicznie generowaną treścią, na której różni użytkownicy (np. za- rejestrowani i niezarejestrowani) otrzymują różne menu. Zauważ też, że zaokrąglonych rogów nie nadałem pierwszemu i piątemu elementowi menu, gdyż uniemożliwiłoby to wprowadzanie zmian w menu. W celu uzyskania bardziej praktycznego kodu CSS, jak widać w wyróżnionym kodzie, zaokrąglone rogi nadałem elementom :first-child i :last-child. Po usunięciu piątej pozycji menu czwar- ty element staje się ostatnim i otrzymuje zaokrąglony róg określony selektorem :last-child. dOdanie rOZWijanegO Menu W ramach dodania rozwijanego menu zaprezentuję kolejny przykład przejść w CSS. ukrywa menu określa położenie względem menu będącego rodzicem szerokość rozwijanego menu wyrównuje lewą krawędź podmenu w stosunku do rodzica wyrównuje element w stosunku do dolnej krawędzi rodzica tworzy przejście obydwie właściwości podlegają przejściu niweluje odziedziczone pływanie elementów — sprawia, że odnośniki rozmieszczane są w pionie nav.menu li ul { opacity:0; visibility:hidden; position:absolute; width:12em; left:0; top:100 ; -webkit-transition:1s all; -moz-transition:1s all; transition:1s all; } nav.menu li:hover ul { opacity:1; visibility:visible; } nav.menu li li { float:none; } nav.menu li li:first-child a {border-radius:0;} nav.menu li li:last-child a {border-bottom-left- radius:10px;} /* kod dla przeglądarek, które nie obsługują przejść CSS */ Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 247 przesłania wersję z przejściem przesłania wersję z przejściem ukrywa menu, jeśli przeglądarka nie obsługuje przejść CSS wyświetla menu, kiedy kursor znajduje się nad rodzicem .no-csstransitions nav.menu li ul { visibility:visible; opacity:1; display:none; } .no-csstransitions nav.menu li:hover ul {display:block;} rySunek 7.9. rozwijane menu dodane do menu głównego Rozwijane menu tworzę takim samym kodem, jak w rozdziale 6. Żeby nie tłumaczyć wszystkiego od nowa, odsyłam Cię niniejszym do tego rozdziału i komentarzy do powyższego listingu. Chciałbym jednak zwrócić uwagę na trzy rzeczy obecne w tej wersji kodu. Po pierwsze, zaokrąglone rogi są odziedziczone przez elementy rozwijanego menu. Zamiast zaokrąglić przeciwległe rogi, tak jak w menu głównym, chcę, by zaokrąglone były jedynie dolne rogi menu. Usuwam zatem odziedziczone zaokrąglenie w lewym górnym rogu i tworzę zaokrąglenie lewego dolnego rogu; zaokrąglenie pra- wego dolnego rogu pozostaje odziedziczone (rysunek 7.9). Jak wskazują komentarze, przezroczystość menu ulega przejściu, żeby stawało się widoczne stopniowo. Za pierwszym podejściem nadałem jedynie właściwość opacity o początkowej wartości 0 (przezroczystość) i końcowej wartości 1 (pełna widoczność) elemen- towi, na którym znajduje się kursor. Dzięki temu menu rzeczywiście pojawiało się i znikało stopniowo, ale zawsze znajdowało się na swoim miejscu, nawet gdy nie było widoczne. Gdybym przesunął kursor w miejsce pod menu, rozwijane menu i tak się pojawiało, na- wet jeśli kursor nie znajdował się nad odpowiednią pozycją w menu głównym. Spróbowałem następnie dodać właściwości display:no- ne i display:block, aby całkowicie usunąć rozwijane menu, kiedy kursor nie znajdował się nad elementem menu. Wprawdzie rozwią- Poleć książkęKup książkę 248 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki załem w ten sposób problem, ale przez to rozwijane menu włączały się i wyłączały bez przejścia. Postanowiłem usunąć właściwość display i zamiast tego wyłączyć po najechaniu na element kursorem właściwość visibility podczas zmiany przezroczystości w ramach przejścia. W rezultacie rozwijane menu pojawiało się stopniowo, ale znikało bez przejścia. Wreszcie, po utworzeniu przejścia obejmują- cego zarówno opacity, jak i visibility, menu całkowicie znikało, gdy było przezroczyste, a zaczęło się pojawiać i znikać zgodnie z zamierzeniem, czyli stopniowo. Chcę zwyczajnie powiedzieć, że czasami trzeba poeksperymentować, żeby osiągnąć pożądany efekt. Mam nadzieję, że kiedyś oszczędzisz sobie dzięki temu kilku godzin pracy. Zawsze do usług. Po trzecie, skorzystałem z okazji, by pokazać skrypt Modernizr w działaniu i podać zapasowy kod CSS odpowiedzialny za działanie menu w przeglądarkach, które nie obsługują przejść CSS3. W takim przypadku Modernizr nadaje klasę no-csstransitions elementowi głównemu html podczas wczytywania strony. Używam tej klasy w selektorach reguł, których mają używać jedynie te przeglądarki, które nie obsługują przejść CSS. W takich regułach anuluję ustawie- nia visibility i opacity, które określają działanie menu w przeglą- darkach obsługujących przejścia, podając do wyświetlania i ukrywa- nia menu podstawowe reguły display:none i display:block, których użyłem przy menu w rozdziale 6. Tym samym ukończyłem stylizację elementu header. Przejdźmy te- raz do stylizacji obszaru obejmującego wpis blogowy, pole logowania i odnośniki do wpisów. Wyśrodkowywanie w pionie Poziome wyśrodkowywanie w CSS nie jest łatwe. kiedy wyśrodkowujesz pojedynczy wiersz tekstu w obrębie elementu o stałej wysokości, np. 300 pikseli, właściwości line-height tekstu nadaj wartość równą wysokości kontenera: text-align:center; /* wyśrodkowywanie w poziomie */ line-height:300px; /* wyśrodkowywanie w pionie = wysokość kontenera */ aby wyśrodkować pionowo pozostałe elementy, takie jak obrazy, właściwości display kontenera nadaj wartość table-row, a następnie nadaj mu działającą tylko z komórkami tabel właściwość vertical-align o wartości middle. display:table-cell; /* uaktywnia zachowanie elementu jako tabeli */ vertical-align:middle; /* wyśrodkowywanie w pionie */ text-align:center; /* wyśrodkowywanie w poziomie */ Żadne z tych rozwiązań nie jest szczególnie eleganckie, ale w CSS nie ma konkretnych właściwości, które pozwa- lałyby na pozycjonowanie elementów w pionie. Poleć książkęKup książkę Obszar treści rozdział 7. Strona internetoWa z CSS3 249 W głównym obszarze treści znajdzie się wprowadzenie do najnow- szego wpisu, a na mniejszym obszarze po prawej umieszczę pole logowania i spis odnośników do najnowszych artykułów na blogu. Oto kod HTML obszaru feature_area. section id=”feature_area” article id=”blog_leadoff” div class=”inner” h4 7 września 2012 /h4 a href=”#” h3 Klasy CSS w jQuery /h3 /a img src=”images/charles_wyke-smith.jpg” alt=”zdjęcie Charlesa Wyke-Smitha” / p class=”css_cols3” Sintus at neque in magna… /p /div /article aside wymagany znacznik form form autocomplete=”off” class=”signin” action=”process_form.php” method=”post” kontener zbioru kontrolek fieldset oznaczenie tekstowe zbioru kontrolek kontener pomagający przy stylizacji kontrolki, oznaczenia i wskazówki atrybut for (o takiej samej wartości, jak identyfikator kontrolki) łączy oznaczenie z kontrolką wartość atrybutu text sprawia, że kontrolka wyświetlana jest jako pole tekstowe legend span Pobierz kody i aktualizacje /span /legend section label for=”email” E-mail /label input type=”text” id=”email” name=”email” / /section section label for=”password” Hasło /label Poleć książkęKup książkę 250 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki wpisywane znaki wyświetlane są jako punktory przycisk zatwierdzający sprawia, że element obejmuje pływające elementy dzieci odstęp między nagłówkiem a obszarem treści input type=”password” id=”password” name=”password” maxlength=”20” / /section section input type=”submit” value=”Zapisz się” / p class=”signup” Nie jesteś zarejestrowany? a href=”#” Zrób to teraz! /a /p /section /fieldset /form nav !-- odnośniki do wpisów -- /nav /aside /section Element oznaczający tę sekcję jest kontenerem rozciągniętym na całą szerokość strony. Zawarte w nim elementy article i aside będą spływać na boki, zajmując miejsca obok siebie. section#feature_area { overflow:hidden; margin:16px 0 0; padding:0 0 10px; } section#feature_area article {float:left; width:66 ;} section#feature_area aside {float:right; width:34 ;} W ten sposób tworzę dwie kolumny w kontenerze. Zauważ, że określiłem ich szerokość wartościami procentowymi, gdyż chcę, by stronę można było oglądać na różnych urządzeniach, m.in. tabletach i smartfonach. Wrócę do tego w następnym rozdziale. Utworzone kolumny mają zatem szerokość będącą określonym odsetkiem szero- kości kontenera. Poleć książkęKup książkę kontener z zaokrąglonymi rogami i cieniem odnośnik z nagłówka zdjęcie data nagłówek bloga rozdział 7. Strona internetoWa z CSS3 251 Wiem, że na tym etapie muszę osadzić div (który wyróżniłem w po- wyższym kodzie) w elemencie article, żeby utworzyć obramowanie wokół treści. Przyjrzyjmy się teraz stylom obszaru article. section#feature_area article .inner { padding:12px; background:#fff; border-radius:20px 0; box-shadow:0 12px 8px -9px #555; } section#feature_area article a {text-decoration:none;} section#feature_area article img { float:left; padding:0 10px 10px 0; } section#feature_area article h4 { font-family:”Source Sans Pro”, helvetica, sans-serif; font-weight:400; font-size:1em; color:#f58c21; letter-spacing:-.025em; } section#feature_area article h3 { font-family:’Lato’, helvetica, sans-serif; font-weight:700; font-size:1.75em; color:#555; margin:0 0 12px 0; Poleć książkęKup książkę 252 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki tekst główny inicjał cień wyświetlany jest w ie10 i nowszych wersjach przeglądarki kapitaliki w pierwszym wierszu prawa kolumna letter-spacing:-.05em; } section#feature_area article#blog_leadoff p { font-family:”Source Sans Pro”, helvetica, sans-serif; font-weight:400; font-size:1.1em; line-height:1.5em; color:#616161; text-align:justify; } section#feature_area article#blog_leadoff p::first-letter { font-family:’Lato’, helvetica, sans-serif; font-weight:700; font-size:4.5em; float:left; margin:.05em .05em 0 0; line-height:0.6; text-shadow:1px 3px 3px #ccc; } section#feature_area article#blog_leadoff p::first-line { font-variant:small-caps; font-size:1.2em; } section#feature_area aside { width:34 ; float:right; } Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 253 rySunek 7.10. Wystylizowany element article w obszarze feature_area Powyższe style odnoszą się do kilku elementów, które już wcze- śniej omówiłem. Warto zwrócić uwagę na odnośnik a, obejmujący nagłówek h3. Umieszczanie elementów blokowych w elementach liniowych było kiedyś absolutnie niedopuszczalne, ale w HTML5 odnośnikiem można objąć dowolny element, dzięki czemu oczywi- ście łatwiej określać klikalność elementów. Jak widać na rysunku 7.10, obraz spływa w lewo i jest oblany tek- stem. Użyłem zestawienia inicjału z kapitalikami, które zaprezen- towałem w rozdziale 4., aby urozmaicić oprawę i gładko przejść od nagłówka do tekstu. Inicjałowi nadałem także cień, aby wybijał się nieco ze strony. Zajmę się teraz stylizacją formularza. Stylizacja pola logowania Czytelników, którzy chcą pobrać kody z moich książek, proszę o re- jestrację, abym mógł im wysyłać aktualności i utrzymać z nimi kon- takt. Na stronie głównej znajduje się pole logowania z odnośnikiem do formularza rejestracyjnego dla nowych użytkowników. Formularz na stronie głównej składa się z takiego samego kodu, jak formularz omówiony w rozdziale 6. Oto jego kod HTML: form autocomplete=”off” class=”signin” action=”process_ form.php” method=”post” fieldset legend span Zapisz się, by pobrać kody i otrzymywać aktualizacje /span /legend section label for=”email” E-mail /label oznaczenie tekstowe zbioru kontrolek pole na adres e-mailowy atrybut for (o takiej samej wartości, jak identyfikator kontrolki) łączy oznaczenie z kontrolką Poleć książkęKup książkę 254 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki Cienie tekstu Cienie tekstu są bardzo podobne do cieni pól, które omówiłem wcześniej w ramce „Cienie pól”. oto składnia kodu, którym się je tworzy: text-shadow:4px 4px 5px #aaa; kolejność stylów jest następująca: przesunięcie w poziomie, przesunięcie w pionie, rozmycie i kolor. W odróż- nieniu od cieni pól, cienie tekstu nie mają ustawienia rozszerzenia. musisz podać przynajmniej przesunięcie w poziomie i pionie oraz kolor, co tworzy cień o wyrazistej krawędzi, określonej szerokości i kolorze. określając ujemne wartości przesunięcia w prawo i w dół, przesuwasz cień w lewo i w górę. można podać więcej niż jedną deklarację cienia, oddzielając je od siebie przecinkami. na rysunku 7.11 widnieją różne przykłady tego, co można tą właściwością uzyskać. o bardziej zaawansowanym zastosowaniu cieni tekstu przeczytasz w moim e-booku Visual Stylin’ with CSS3. rySunek 7.11. Przy użyciu różnych wartości, zarówno dodatnich, jak i ujemnych, można uzyskać różne efekty cienia tekstu wartość atrybutu text sprawia, że kontrolka wyświetlana jest jako pole tekstowe pole hasła input type=”text” id=”email” name=”email” / /section section label for=”password” Hasło /label input type=”password” id=”password” name=”password” maxlength=”20” / tekst ukryty, kiedy element nie przynależy do klasy error p class=”direction” Błędna nazwa użytkownika lub hasło /p przycisk zatwierdzający /section section Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 255 input type=”submit” value=”Zapisz się” / p class=”signup” Nie jesteś zarejestrowany? a href=”#” Zrób to teraz! /a /p /section /fieldset /form Z przykładu formularza w rozdziale 6. pobrałem jedynie nieodzow- ne fragmenty kodu CSS, które dostosowałem do potrzeb tego formu- larza. form.signin { width:19em; float:right; background:#fff; border-radius:10px 0 10px 0; box-shadow:0 12px 8px -9px #555; } .signin fieldset {border:0; margin:10px 14px;} .signin legend span { font-family:’Lato’, helvetica, sans-serif; font-weight:700; font-size:1.3em; line-height:1.1em; color:#4eb8ea; letter-spacing:-.05em; } .signin section { overflow:hidden; padding:.25em 0; } .signin section label { font-family:”Source Sans Pro”, helvetica, sans-serif; ogólna szerokość formularza usuwa domyślne obramowanie elementu fieldset sprawia, że element obejmuje kontrolkę i oznaczenie formularza odstęp między elementami formularza Poleć książkęKup książkę 256 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki szerokość kolumny oznaczenia prawy margines oddala tekst od kontrolki szerokość kolumny kontrolki tworzy przestrzeń wokół tekstu kontrolki usuwa niebieską obwódkę, która domyślnie pojawia się po sfokusowaniu elementu usuwa żółte tło w przeglądarkach opartych na Webkit wyrównuje przycisk względem prawych krawędzi kontrolek usuwa ustawienia szerokości odziedziczone po innych polach font-weight:400; float:left; width:5em; margin:.5em .3em 0 0; font-size:1em; line-height:1.1; color:#555; } .signin section input { float:right; width:10.5em; margin:.2em 0 0 .5em; padding:3px 10px 2px; color:#555; font-size:.8em; outline:none; border-radius:10px 0 10px 0; } input:-webkit-autofill {color:#fff !important;} .signin section input[type=submit] { float:right; width:auto; margin:0 2px 3px 0; padding:0px 8px 3px; font-size:1em; font-weight:800; color:#fff; border:none; background-color:#d6e636; Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 257 box-shadow:1px 1px 2px #888; } .signin section p { float:right; clear:both; margin:.2em 0 0; text-align:right; font-size:.8em; line-height:1; color:#555; } .signin section p a {color:#333;} .signin section p a:hover { color:#777; text-decoration:none; } .signin section p.direction.error { display:block; color:#f00; } .signin section p.direction {display:none;} tekst „nie jesteś zarejestrowany?” odnośnik do formularza rejestracyjnego komunikat o błędzie podświetla tekst wskazówki na czerwono, gdy dodana jest klasa error ukrywa komunikat o błędzie rySunek 7.12. Wystylizowany formularz logowania z komunikatem o błędzie Poleć książkęKup książkę 258 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki Niezależnie od stopnia złożoności formularza, utworzenie go zawsze wymaga wielu linijek kodu. Kod w tym przykładzie w większości jest jednak dość prosty, a komentarze objaśniają jego najważniejsze fragmenty. Chciałbym jeszcze tylko zwrócić uwagę na komunikat o błędzie, który pozostaje ukryty, dopóki nie jest potrzebny (rysu- nek 7.12). Wystarczy dodać klasę error do elementu p (który już jest przypisany do klasy direction), aby komunikat się pojawił. Tym niemniej założenie jest takie, że ta klasa ma być w razie potrzeby dodawana automatycznie przez skrypt służący do walidacji danych formularza. Jako osoba odpowiedzialna za stworzenie interfejsu użytkownika, odpowiadasz za umieszczenie na stronie ukrytego zwykle elementu HTML z informacją o błędzie i opracowanie kodu CSS służącego do jego wyświetlania — zadaniem programistów jest rozpracowanie, jak i kiedy nadać klasę przywołującą kod CSS odpo- wiedzialny za wyświetlenie komunikatu. Odnośniki do wpisów Pod formularzem znajdują się odnośniki do wpisów. Jak zwykle zamieściłem je w nieuporządkowanej liście. nav h3 Ostatnie wpisy /h3 ul li a href=”#” Z-index mdash; problemy się nawarstwiają /a /li li a href=”#” Jak używać box-image /a /li li a href=”#” Cienie w CSS3 /a /li /ul /nav A oto CSS: section#feature_area nav { ogólna szerokość kontenera odstępy pod i nad elementem width:19em; float:right; dopełnienie pod i nad elementem margin:15px 0 0; wyrównuje element do prawej krawędzi elementu section padding:.6em 0em .75em; background:#fff; border-radius:10px 0 10px 0; Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 259 box-shadow:0 12px 8px -9px #555; } #feature_area nav h3 { pozioma przestrzeń na tytuł padding:0 14px; font-family:’Lato’, helvetica, sans-serif; font-weight:700; font-size:1.3em; text-align:left; color:#aaa; letter-spacing:-.05em; } #feature_area nav ul {margin:0 0 0 20px;} #feature_area nav li { padding:.7em 0 0 2em; position:relative; list-style-type:none; } kontekst pozycjonowania punktorów autorskie punktory #feature_area nav li::before { pusty ciąg tekstowy jako treść content: ””; pozycjonowanie względem elementów listy wielkość punktora położenie punktora kształt punktora kolor punktora odnośnik zajmuje całą szerokość kontenera position:absolute; height:10px; width:10px; left:12px; top:12px; border-radius:5px 0 5px 0; background-color:#d6e636; box-shadow:1px 1px 2px #888; } #feature_area nav li a { display:block; Poleć książkęKup książkę 260 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki text-decoration:none; font-size:.9em; color:#616161; } #feature_area nav li a:hover {color:#000;} Wystylizowany obszar odnośników znajduje się bezpośrednio pod obszarem pola logowania. Obydwa obszary zawarte są w elemencie aside, który pływa obok elementu article (rysunek 7.13). usuwa domyślne podkreślenie rySunek 7.13. ukończony element aside z odnośnikami do wpisów Sprawiając, by element nav spływał tak samo jak znajdujący się nad nim element form, zyskuję możliwość umieszczenia go bezpośrednio pod formularzem. O ile element ten jest wystylizowany jak standar- dowa lista, to jego punktory są ciekawe. Chciałem, żeby odzwiercie- dlały motyw „dwóch zaokrąglonych, dwóch zwyczajnych” rogów, którym charakteryzuje się oprawa graficzna strony. Zamiast więc tworzyć osobny obraz punktora, użyłem pseudoelementu ::before do utworzenia 10-pikselowego, kwadratowego elementu i zaokrągle- nia jego rogów. Drobny, jednopikselowy cień wybija nieco punktory ze strony. Obszar książek Okładki czterech książek wyświetlone są w rzędzie u dołu strony. Na tym obszarze mamy do czynienia z kilkoma interesującymi ele- mentami, takimi jak chmurki i obrócony tekst. Oto kod HTML: Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 261 section id=”book_area” !-- poniższy element powtórzony jest jeszcze trzykrotnie -- article class=”left” div class=”inner” h3 HTML5 + CSS3 /h3 img src=”images/stylin_cover.png” alt=”CSS. Witryny internetowe szyte na miarę - okładka” / aside ol li a href=”#” Pobierz kody /a /li li a href=”#” Spis treści /a /li li a href=”#” Kup książkę /a /li /ol /aside /div /article !-- koniec powtórzeń kodu ramek z książkami -- /section Powyższy fragment kodu jest bardzo prosty. Jak widać w komenta- rzu, powtórzony jest on jeszcze trzy razy, odpowiednio dla kolejnych książek. Przyjrzyjmy się teraz powiązanemu kodowi CSS. Zaczynam od utworzenia układu obszaru z książkami i obróconego tekstu, a następnie zajmuję się chmurkami. section#book_area { clear:both; border-radius:20px 0px 20px 0px; border:1px solid #f58c21; margin:8px 0 16px; overflow:hidden; } obrócony tekst wskazówka element o pełnej szerokości odstęp nad i pod elementem Poleć książkęKup książkę 262 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki cztery kolumny na książki kontener obejmujący książki kontekst pozycjonowania chmurek obejmuje każdą książkę wyśrodkowuje każdą książkę w jej elemencie article obrócony tekst umieszcza tekst po prawej stronie książki obraca tekst (konieczne jest dodanie prefiksów) wskazuje oś obrotu na początku tekstu (konieczne jest dodanie prefiksów) inne przesunięcie dla węższej okładki cień pod każdą książką #book_area article { float:left; width:25 ; padding:10px 0; background:none; } #book_area article .inner { position:relative; width:140px; margin:0 auto; } #book_area .inner h3 { position:absolute; width:160px; left:112 ; bottom:5px; transform:rotate(-90deg); transform-origin:left bottom; color:#ccc; font-family:’Lato’, helvetica, sans-serif; font-weight:900; font-size:1.4em; text-align:left; } #book_area article.right:last-child h3 {left:85 ;} #book_area article img {box-shadow:0 12px 8px -9px #555;} W elemencie section o pełnej szerokości (#book_area) zamieściłem cztery pływające elementy article, każdy o szerokości równej 25 . W każdym z nich wyśrodkowałem ustalonej szerokości div klasy inner, zawierający obraz książki. Uzyskałem w ten sposób rząd okładek z ładnymi odstępami (rysunek 7.14). Element aside, który przekształcę w chmurkę, jest obecnie ukryty. Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 263 rySunek 7.14. każda książka w tym obszarze oznaczona jest skrótowym opisem, obróconym do pionu i zamieszczonym przy jej prawej krawędzi Położenie obróconego tekstu określone jest dwiema funkcjami właściwości CSS3 transform. Pierwsza z nich, transform-origin, wskazuje lewy dolny róg pola elementu h3 jako punkt początkowy przejścia. Punkt początkowy działa tak, jakbyś w jego miejscu wbił w element szpilkę. Obróciłem następnie element h3 o dziewięćdzie- siąt stopni przy użyciu funkcji rotate właściwości transform, a na koniec przesunąłem go o pięć pikseli w górę, by dostosować jego położenie. Krótkie omówienie właściwości transform znajdziesz w ramce „Przekształcenia w CSS3”, a więcej na ten temat przeczy- tasz w moim e-booku Visual Stylin’ with CSS. Nadszedł czas, by dodać chmurki do książek. Chmurkę przedstawio- ną w rozdziale 6. nieco rozwinąłem na dwa sposoby. Po pierwsze, chmurki książek znajdujących się w prawej połowie strony będą wyświetlane po lewej stronie okładek, aby nie były ucinane przez okno przeglądarki. Po drugie, strzałkę przylegającą do chmurki wy- stylizowałem tak, by uzyskać wrażenie, że ona także jest objęta ob- ramowaniem pola, a tym samym jest jego częścią. Jak to często bywa z takimi pozornie drobnymi, lecz istotnymi szczegółami, uzyskanie ich wymaga dużej ilości kodu. W podanym powyżej kodzie widać, że każdemu elementowi article z obrazami książek nadałem klasy left i right, aby móc im przy- pisać kod CSS odnoszący się do rozmieszczenia chmurek oraz ich strzałek po lewej lub prawej stronie. A oto kod! #book_area article aside { display:none; position:absolute; z-index:2; width:200px; tutaj zaczynają się style wspólne dla wszystkich chmurek ukrywa chmurki pozycjonowanie względem elementu div klasy inner, który otacza obraz szerokość chmurki Poleć książkęKup książkę 264 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki Przekształcenia w CSS3 Jeżeli pracowałeś z edytorami graficznymi takimi jak adobe illustrator lub adobe fireworks, to prawdopodobnie już obracałeś, skalowałeś i pochylałeś tekst lub innego rodzaju elementy. teraz możesz uzyskać te same efekty w przeglądarce, używając przekształceń CSS3 (które widać na rysunku 7.15). do tworzenia przekształceń w CSS3 służą dwie właściwości: transform i transform-origin. zacznijmy od omó- wienia właściwości transform. Właściwość transform opiera się w działaniu nie na zwykłych wartościach, ale na funkcjach. funkcje pozwalają Ci na podanie rodzaju przekształcenia oraz wartości, z jakich ma być obliczone. format przekształcenia wygląda następująco: transform: nazwaFunkcji(wartość liczbowa lub x, y). oto funkcje przekształceń: • scale — powiększa lub zmniejsza element. Wartości większe niż 1 powiększają element, a mniejsze zmniej- szają go. Przykład: transform:scale(1.5). • rotate — obraca element o podaną liczbę stopni. Wartości dodatnie obracają go zgodnie z ruchem wskazó- wek zegara, a ujemne w przeciwną stronę. Przykład: transform:rotate(-30deg). • skew — przechyla element względem jego osi x lub y. kiedy podana jest jedna wartość, przechylenie wzglę- dem osi y nie zachodzi. Przykład: transform:skel(5deg, 50deg). • translate — przesuwa obiekt o podaną odległość po jego osi x lub y. Przypomina to pozycjonowanie względ- ne, ponieważ miejsce pierwotnie zajęte przez element nie znika. Przykład: transform:translate(-50px, 20px). Właściwość transform-origin określa punkt, względem którego element ma zostać przekształcony. domyślnie jest to punkt pośrodku elementu w poziomie i pionie, więc jeśli obrócisz element, to będzie się on zachowywał, jakby wbito w jego środek szpilkę, i obracał się wokół niej. Właściwością transform-origin możesz wybrać inny punkt w elemencie przy użyciu słów kluczowych (top, right itd.) albo podać dodatnie lub ujemne wartości licz- bowe. W ten sposób punkt przekształcenia można umieścić nawet poza polem elementu. Brak przekształcenia transform:skew(10deg); transform:skew(-10deg,30deg); transform:rotate(20deg); transform:rotate(20deg); transform-origin:bottom right; transform:translate (30px,-30px); rySunek 7.15. oto kilka przykładów przekształceń Poleć książkęKup książkę rozdział 7. Strona internetoWa z CSS3 265 przestrzeń wokół treści chmurki padding:10px 2px 5px; background:#fff; border:2px solid #f58c21; border-radius:10px 0px 10px 0px; box-shadow:4px 4px 16px #555; color:#555; font-family:”Source Sans Pro”, helvetica, sans-serif; font-size:.8em; line-height:1.5em; } #book_area article:hover aside {display:block;} #book_area article aside li { padding:.25em 0 .75em 1em; list-style-type:none; line-height:1.2em; } wyświetla chmurkę, kiedy kursor znajduje się nad książką pionowe odstępy między elementami listy i dopełnienie z lewej usuwa domyślne punktory elementów listy odnośniki tekstowe #book_area article aside li a { text-decoration:none; font-size:1.2em; color:#616161; } #book_area article aside li a:hover { color:#333; } #book_area article.left aside { left:84 ; top:14px; } podświetla odnośniki, nad którymi znajduje się kursor koniec stylów wspólnych dla wszystkich chmurek dwie chmurki książek znajdujących się po lewej umieszcza chmurkę po prawej stronie obrazów znajdujących po lewej Poleć książkęKup książkę 266 CSS. Witryny internetoWe Szyte na miarę. autorytety informatyki dwie chmurki książek znajdujących się po prawej umieszcza chmurkę po lewej stronie obrazów znajdujących się po prawej pole pomarańczowego trójkąta pusty ciąg tekstowy — wymagane jest podanie jakiejkolwiek treści położenie określone względem chmurki #book_area article.right aside { right:84 ; top:14px; } #book_area article aside::after { content:””; position:absolute; top:33px; border:12px solid; zmniejsza pole, by stworzyć trójkąt height:0px; width:0px; } określa położenie i kolor trójkątów chmurek książek, które znajdują się po lewej #book_area article.left aside::after { right:100 ; border-color:transparent #f58c21 transparent transparent; } określa położenie i kolor trójkątów chmurek książek, które znajdują się po prawej #book_area article.right aside::after { left:100 ; border-color:transparent transparent transparent #f58c21; } pole białego trójkąta #book_area article aside::before { pusty ciąg tekstowy — wymagane jest podanie jakiejkolwiek treści położenie określone względem chmurki content:””; position:absolute; top:37px; border:8px solid; zmniejsza pole, by stworzyć trójkąt height:0px; width:0px; sprawia, że biały trójkąt znajduje się na szczycie stosu z-inde
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie III
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: