31 maja 2016

Cytaty w poście - wygląd


Jak ładnie urozmaicić cytaty w poście? Jest na to kilka prostych przykładów. Oto kilka z nich:

KOD:
blockquote {
font-size: 12px;
margin-bottom: 20px;
line-height: 1.65em;
font-weight: 300;
padding: 20px 20px 20px 50px;
color: #fff;
border-top: 5px solid #C04040;
background: #000000 url(http://2.bp.blogspot.com/-efI8eumd0Ow/UdJQYLiab9I/AAAAAAAACP4/ePmgr9wVJew/s16/icon_blockquote.png) no-repeat 20px 25px;
}
blockquote p {
margin: 0;
}
EFEKT:
KOD:
blockquote {
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size: 20px;
padding:12px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
EFEKT:
KOD:
.post blockquote {
  padding:20px;border-left:10px solid #ddd;background:url(http://4.bp.blogspot.com/-I7XvY5FUhYA/U7-Hp1S1ucI/AAAAAAAAB3Y/vE-VP7oCza0/s1600/szare+zygzaki50.png);}
EFEKT:
źródła: domowe-metody, pasjekaroliny.pl

Brak komentarzy:

Prześlij komentarz