Eleganckie cytowanie wypowiedzi w CSS3


30 kwietnia 2013 / Michał Kortas


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:

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.

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

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

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:

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

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



5 odpowiedzi na “Eleganckie cytowanie wypowiedzi w CSS3”

  1. Ernest Stasicki pisze:

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

  2. Patryk Maciej Gielo pisze:

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

  3. atsumori pisze:

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

    • Marcin pisze:

      Wiem, że pytanie było dawno temu, ale gdybyś ktoś tu trafił i potrzebował odpowiedzi na to pytanie to należy zmniejszyć wartość font-size w ostatnim bloku kodu, czyli zamiast:

      font-size: 10em;

      dać:

      font-size: 5em;

      Pozdrawiam

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *