Standardowy cytat kafelkowy
See the Pen RGqkWV by Tomasz Wikło (@studioleopard) on CodePen.19725
Powyższy kafelek jest dosyć typowy, możemy go spotkać na różnych portalach internetowych. Bardzo często jest otoczony z lewej lub prawej strony tekstem, jednak wcale nie rzadziej występuje na całej szerokości danego kontenera – szczególnie, gdy cytowanego tekstu jest więcej.
Nad kodem HTML nie ma co się rozwodzić, blockquote to nasz cały cytat (blockquote z klasą cytat1), a wewnątrz podpis autora znacznikiem cite.
See the Pen RGqkWV by Tomasz Wikło (@studioleopard) on CodePen.19725
Przejdźmy teraz do ciekawszej części, czyli do CSS.
See the Pen RGqkWV by Tomasz Wikło (@studioleopard) on CodePen.19725
blockquote.cytat1
Aby cytat wyróżniał się wstawiłem 10px obramowanie po lewej stronie za pomocą właściwości border-left. Ustawiłem pozycjonowanie na relatywne, ponieważ za chwilę będę chciał aby znacznik blockquote.cytat1 był kontekstem pozycjonującym dla cudzysłowa. Ustawiłęm width: auto; aby nasz cytat rozciągnął się do rozmiaru elementu nadrzędnego. Tutaj chcę zaznaczyć, że właściwość width działa w różny sposób w zależności od rodzaju elementu, na jakim jest używany. W naszym przykładzie, mamy element blokowy, dlatego po ustawieniu width: auto; przeglądarki rozciągną blockquote.cytat1 do rozmiaru elementu nadrzędnego – body w naszym przypadku. Gdybyśmy mieli element pływający (float: left; lub position: absolute;) z ustawionymi właściwościami left: auto; right;auto; to ustawienie width: auto; spowodowałoby obkurczenie elementu do rozmiaru zawartości. Pozostałe właściwości: margin, font-size, border, padding, color, line-height służą jedynie do ostylowania naszego cytatu, dlatego przejdźmy do…
blockquote.cytat1:before
Za pomoca pseudoelementu :before wstawiłem cudzysłów. Zwróć uwagę, że aby go ustawić musiałem zastosować pozycjonowanie absolutne (position: absolute;) wraz z właściwościami left i top. Kontekstem pozycjonującym był blockquote.cytat1. Zauważ, że wcale nie musieliśmy tworzyć nowego znacznika HTML aby wypozycjonować nasz cudzysłów, pseudoelementy takie jakie :before czy :after są w takich przypadkach bardzo pomocne. Oprócz tego, musiałem jeszcze zastosować taką samą wysokość linii (line-height) jak dla cytatu – aby cudzysłów zawsze znajdywał się na tej samej wysokości w pionie. Znak cudzysłowu wstawiłem wykorzystując Unicode. W Unicode wartość 201C to znak cudzysłowu, więc wstawiłem go za pomocą właściwości content – poprzedzając znakiem \ – w przeciwnym wypadku wstawilibyśmy tekst 201C.
Jeżeli chciałbyś wstawić inny znak, a nie wiesz jaki ma kod Unicode, możesz sprawdzić na stronie http://unicode-table.com. Wpisując w dostępną na stronie wyszukiwarkę quotation otrzymasz pokaźną listę z różnymi dostępnymi znakami cudzysłowów i ich kodów.
blockquote.cytat1 cite
Domyślnie znacznik cite jest znacznikiem śródliniowym (inline), dlatego aby wyświetlił się w nowym wierszu zmieniłem go na znacznik blokowy za pomocą display: block; Zmniejszyłem czcionkę podpisu (font-size: 0.8em;) i zwiększyłem odstęp pomiędzy literami za pomocą letter-spacing: 1px;
blockquote.cytat1 cite:before
Za pomocą powyższego selektora przed podpisem dodałem myślnik (\2013) oraz spacje (\0020). Mogłem zrobić to również w kodzie HTML ale w powyższym przypadku myślnik uznałem za element dekoracyjny, dlatego dodałem go w CSS.
Wróćmy jeszcze na chwilę do naszego cudzysłowu. W związku z tym, że jest on czcionką, możemy zastosować zupełnie inny symbol cudzysłowu poprzez zwykłą zamianę czcionki. Moglibyśmy nawet ustawić własną czcionkę i takim sposobem moglibyśmy wstawić jako symbol cudzysłowu dowolny znak.
W poniższym przykładzie, zastosowałem czcionkę Yellowtail z repozytorium Google Fonts. Jeżeli wcześniej nie używałeś czcionek Google, zobacz koniecznie wpis Imperium czcionek.
See the Pen QKJqAN by Tomasz Wikło (@studioleopard) on CodePen.19725
I na koniec jeszcze bardzo ważna uwaga, aby zachować odpowiednie proporcje naszego kafelka podczas zmniejszania okna przeglądarki, musimy do sekcji <head> dodać:
See the Pen XjyZVZ by Tomasz Wikło (@studioleopard) on CodePen.19725
Znacznik meta viewport jest wymagany, aby przeglądarki mobilne wiedziały jak mają wyświetlić stronę. Za pomocą width=device-width ustawiamy szerokość okna roboczego na całą dostępną szerokość urządzenia, natomiast initial-scale=1.0 jest potrzebny, aby strona wyświetlała się bez skalowania.
Jak widzisz, utworzenie cytatu jest bardzo prostą czynnością a dzięki zastosowaniu kodów Unicode, podmiana symbolu cudzysłowów jest banalnie prosta. A Tobie jak podoba się efekt?
Opublikowano 7 listopada 2016 w kategorii blog, css, html, poradnik.
