Στολίστε τα BLOCKQUOTES με CSS και Εικόνες

  Στο πνεύμα να κάνουμε την blog-όσφαιρα καλύτερη και ομορφότερη, κινείται και αυτή η ανάρτηση μου .

Σήμερα θέλω να δούμε μερικούς απλούς τρόπους για να στολίσουμε τα BLOCKQUOTES μας και να τα κάνουμε ομορφότερα


Εδώ είναι ο κώδικας για ένα απλό blockquote , αυτό που χρησιμοποιούν τα περισσότερα πρότυπα μας

.post blockquote {    
  margin:1em 20px;      
}      
.post blockquote p {       
  margin:.75em 0;      
}

Δεν είναι και πολύ εντυπωσιακό έτσι ???!!!


Μπορούμε όμως να κάνουμε πιο όμορφα blockquote μας με απλή πρόσθεση CSS και εικόνας αν θέλουμε .
Απλά  αλλάζοντας  τους αρχικούς κωδικούς  blockquote στο πρότυπο μας .

Ας δούμε μερικά παραδείγματα  με μερικά όμορφα blockquotes :

  1  Παράδειγμα :

Και ο CSS κώδικας για αυτό θα είναι :

blockquote {      
background:#F5F5F5 none repeat scroll 0 0;       
border-left:8px solid #CCCCCC;      
border-right:1px dotted #CCCCCC;      
font-family:georgia,serif;      
margin-bottom:12px;       
margin-left:10px;       
margin-right:10px;       
padding:12px;      
}

2  Παράδειγμα :

  Και ο CSS κώδικας είναι :

blockquote p:before {      
content:url(http://lh5.ggpht.com/_L116RpGjEMY/S8h4DAm4DnI/AAAAAAAABfw/LFIBHnYiIUc/quote-left.gif);       
margin-right:10px;       
text-align:left;       
opacity:0.4;       
} 
blockquote p:after {      
content:url(http://lh6.ggpht.com/_L116RpGjEMY/S8h4DbrU9uI/AAAAAAAABf0/Da6rmGW69cI/quote-right.gif);       
display:block;       
margin-top:-16px;       
text-align:right;       
opacity:0.4;       
}

  3  Παράδειγμα : 

 

Και ο CSS κώδικας είναι :

blockquote {      
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;       
background-position:;       
background-repeat:repeat-y;       
margin: 0 20px;       
padding: 20px 20px 20px 50px;       
color:#C7CACF;       
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";       
}       
.post blockquote p {       
margin: 0;       
padding-top: 10px;       
}

  4  Παράδειγμα : 

Και ο CSS κώδικας είναι :

blockquote {      
background: url(http://lh3.ggpht.com/_L116RpGjEMY/S8h5sjhMepI/AAAAAAAABf4/tjx3lNHPp44/blockquoteSTART.gif) top left no-repeat;       
} 
blockquote p {      
background: url(http://lh6.ggpht.com/_L116RpGjEMY/S8h5sgvjXsI/AAAAAAAABf8/K9HpwH2S5jw/blockquoteend.gif) bottom right no-repeat;       
padding-left: 30px;       
padding-right: 30px;       
}

Και το HTML θα είναι :

<blockquote>      
    <p>       
        Lorem ipsum dolor sit amet, consectetur adipisicing       
        elit, sed do eiusmod tempor incididunt ut labore et       
        dolore magna aliqua. Ut enim ad minim veniam, quis       
        nostrud exercitation ullamco laboris nisi ut aliquip       
        ex ea commodo consequat.       
    </p>       
</blockquote>

  5  Παράδειγμα : 

 

Και ο CSS κώδικας είναι :

blockquote {      
 margin: 1em 3em;       
 color: #999;       
 border-left: 2px solid #999;       
 padding-left: 1em; }

  6  Παράδειγμα : 

 

Και ο CSS κώδικας είναι :

blockquote {      
background:transparent url(http://4.bp.blogspot.com/_L116RpGjEMY/S-0wQ4b9C5I/AAAAAAAABss/bY0vDej1rs8/s1600/blockquote.gif) no-repeat scroll 0 0;       
font-family:Georgia,"Times New Roman",Times,serif;       
font-size:1em;       
margin:15px 0;       
min-height:32px;       
padding:0 50px;       
}

  7  Παράδειγμα :

Και ο CSS κώδικας είναι :

blockquote {      
 margin: 1em 3em;       
 padding: .5em 1em;       
 border-left: 5px solid #fce27c;       
 background-color: #f6ebc1; }       

blockquote p {       
 margin: 0; }

  8  Παράδειγμα : 

 

Και ο CSS κώδικας είναι :

blockquote {      
 margin: 5px 10px 5px 10px;       
 padding: 10px 60px 10px 10px;       
 border-width: 1px;       
 border-style: solid;       
 border-color: #cfcfcf;       
 background-color: #d3eefd;       
 background-image: url(http://lh4.ggpht.com/_L116RpGjEMY/S8h_JTMaN9I/AAAAAAAABgE/2inxUMw8EWU/blockquote3-img.png);       
 background-repeat: no-repeat;       
 background-position: top right;       
 font-family: Georgia;       
 font-size: 14px;       
 font-weight: bold;       
 color: #8f8f8f;       
 }

  9  Παράδειγμα :

 

Και ο CSS κώδικας είναι :

blockquote {      
border: 1px solid #5c5656;       
margin: 1em 0;       
padding: 10px;       >
background: #f8f7f6 url(http://lh5.ggpht.com/_L116RpGjEMY/S8h_u_zBrEI/AAAAAAAABgI/VevrHwN8YnE/blq.gif); 
}

  10  Παράδειγμα :

 

Και ο CSS κώδικας είναι :

blockquote {      
margin: 0 20px;       
padding: 20px 20px 20px 50px;       
background-position:;       
background:#D9E197 url(http://lh4.ggpht.com/_L116RpGjEMY/S8iaextgutI/AAAAAAAABgM/m1S2_kpIii4/s512/blockquote-1.png);       
background-repeat:repeat-y;      
font-family:Georgia,"Times New Roman",Times,serif;      
font-size:1em; 
}

  11  Παράδειγμα :

Ο CSS κώδικας :

blockquote {     
background:#f9f9f9;      
border-left:10px solid #C92014;      
margin:1.5em 10px;      
padding:.5em 10px;       
quotes:"\201C""\201D""\2018""\2019";      
}       
blockquote:before {       
color:#C92014;      
content:open-quote;       
font-size:4em;       
line-height:.1em;       
margin-right:.25em;      
vertical-align:-.4em;       
}      
blockquote p {       
display:inline;      
}

Αυτά ήταν !!!!!

Είναι πολύ όμορφα έτσι ? !....
Μπορείτε και εσείς να αλλάξετε τα BLOCKQUOTES σας εύκολα .

Καλή επιτυχία σε όλους : )