blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


Prosty i ładny blockquote w HTML i CSS

Dariusz Nayma.plDariusz Nayma.pl

Słowem wstępu

Tym razem prosty <blockquote>, czyli element cytowany. Nie zawsze takie rzeczy są wbudowane w nasz szablon, lub jeśli musimy je stworzyć sami w HTML warto mieć jakiś zarys. Efekt jaki chcemy uzyskać jest poniżej na foto:

HTML

Struktura HTML jest banalnie prosta. Mamy <blockquote> w którym umieszczamy paragraf <p> oraz nasz <span> jako podpis. Resztę robimy w CSS.

<blockquote>
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <span>Jan Kowalski</span>
</blockquote>

CSS

Tutaj mamy do ostylowania kilka elementów ale korzystając z ::before i ::after dorobimy dodatkowo cudzysłowie i umieścimy je w odpowiednich miejscach.

@import https://fonts.googleapis.com/css?family=Montserrat:300&subset=latin-ext;

body {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
background:#f5f5f5;
font-family:Montserrat, sans-serif;
font-size:.85em;
}

blockquote {
background:#EDEDED;
border-left:8px solid #008FEA;
box-shadow:0 3px 15px rgba(0,0,0,.15);
color:#666;
font-size:1.1em;
font-style:italic;
font-weight:300;
line-height:1.6;
margin:50px auto;
padding:1.2em 30px 1.2em 75px;
position:relative;
vertical-align:super;
width:60%;
z-index: 0;
overflow: hidden;
}

blockquote::before {
color:#008FEA;
content:"\201C";
font-size:9em;
left:0;
position:absolute;
top:-35px;
}

blockquote p::before {
color: #ddd;
content:"\201C";
font-size:100em;
line-height: 0.65em;
right: .095em;
position:absolute;
z-index:-1;
}

blockquote span {
color:#008FEA;
display:block;
font-size:1.4em;
font-weight:300;
letter-spacing:1px;
margin-top:.5em;
}

Cały kod można zobaczyć standardowo na codepen.io:

Zobacz Gotowy Projekt

https://codepen.io/Naymapl/pen/QvpGxK

Jak sami widzicie cały <blockquote> składa się z kilkunastu linijek kodu i może nam upiększyć stronę i nie musimy korzystać z żadnych wtyczek lub innych zbędnych skryptów. Mam nadzieję, że być może przyda się komuś i ułatwi kilka minut pracy ;)

Komentarze