HTML5 & CSS3

Eleganckie cytowanie wypowiedzi w CSS3

Jak często zdarza Wam się cytować wiele różnych fragmentów tekstów, pochodzących obcych źródeł? Dla mnie jest to dość częsta sytuacja, dlatego na te okazje mam przygotowany specjalny styl dla cytowanego tekstu. Z założenia blok cytatu powinien odróżniać się od reszty treści, dając jasno do zrozumienia, że należy zwrócić na niego więcej uwagi.

Przyjmijmy, że cytowany tekst wyglądać będzie w taki oto sposób:

<blockquote>
    <p>In the appalled aftermath of the Boston marathon bombings, rumours and conspiracies were almost impossible to avoid, ranging from allegations against an innocent Saudi witness to a digitally manipulated hoax clip from the cartoon series Family Guy.</p>
    <p>źródło: bbc.co.uk</p>
</blockquote>

Jeżeli umieścimy go w tekście, standardowe style przeglądarki wysuną go wgłąb strony (o ile nie używamy innych stylów dla znacznika <blockquote>).

W ostatniej lini warto umieścić informacje o pochodzeniu cytatu.

Tak prezentuje się surowy przykład. Aby wyglądał on zadowalająco, musimy przygotować dla niego odpowiedni kod CSS. Na początek zmienimy ustawienia takie jak krój i rodzaj czcionki.

blockquote {
font-family: Georgia, "Times New Roman", Times;
font-style: italic;
}

Już zaczyna wyglądać to dużo lepiej.

Zmieńmy teraz szerokość bloku oraz kolor i nadajmy mu lewostronne obramowanie.

blockquote {
        font-family: Georgia, "Times new roman", Times;
        font-style: italic;
        
        color: #333;
        width: 75%;
        border-left: 5px solid #ddd;
        padding-left: 25px;
        position: relative;
}

Podgląd zmian:

Ostatni akapit cytowanego tekstu do informacja o źródle. Nie musi być ona równie widoczna jak pozostała część bloku. Dodajmy do naszego kodu CSS następujące deklaracje:

blockquote p:last-child {
        font-size: 0.75em;
        color: #777;
}
    blockquote p:last-child:before {
        content: '—';
        margin-right: 5px;
}

Na sam koniec dodajmy jeszcze delikatny symbol cudzysłowu, w prawym dolnym rogu bloku tekstowego.

blockquote:after {
        position: absolute;
        bottom: 0;
        right: -50px;
        color: #eee;
        font-size: 10em;
        line-height: 0;
        content: '"';
}

Spójrzmy jeszcze na gotowy przykład.

W taki więc sposób otrzymaliśmy schludnie wyglądające cytaty na naszej witrynie. Mam nadzieję, że mój kod CSS stanie się Wam przydatny.

Pobierz pliki źródłowe Zobacz DEMO

komentarze 4

  • Awatar
    Ernest Stasicki

    3 maja 2013 02:26

    Bardzo prosty ale i bardzo przydatny poradnik dla osób, które „nie wiedzą” jak się zabrać do tematu. Pomoże nie jednemu :)

    Odpowiedz
  • Awatar
    Patryk Maciej Gielo

    17 maja 2013 01:36

    Prosty i przejrzysty materiał, oraz bardzo pomocny :) Gratuluję

    Odpowiedz
  • Awatar
    atsumori

    7 lutego 2014 12:14

    super sprawa, napewno sie przyda, a czy jest mozliwosc zmieniejszenia tego „delikatnego” cudzyslowa ? :)

    Odpowiedz

Zostaw odpowiedź