piĘĆ obrazÓw na jednym elemencie
Sztuczka polega na użyciu wygenerowanej treści ('::before' and '::after') do ustawienia czterech obrazów na elemencie. Pseudoelement '::before' może mieć obraz w background i foreground, tak jak pseudoelement '::after' oraz sam element może mieć także te własności, co daje w sumie pięć obrazów.
Stworzyliśmy pięć obrazów PNG i wstawiliśmy je w cztery rogi i przy prawym brzegu elementu. Oto obrazy:
- góra lewy róg:
- górny brzeg i górny prawy narożnik:
- środkowa część i prawy brzeg:
- dolny lewy róg:
- dolny brzeg i dolny prawy narożnik:
Reguły CSS do ich umieszczenia:
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote::before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote::after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Ponieważ obraz background ma szerokość 620px, nie można zastosować we can't allow boxes wider than 620px, without getting gaps. That's why the 'max-width' property is there. The 'display: block' property is needed to make sure the generated content forms boxes of its own above and below the main content, instead of being inserted on the first and last line. The 'line-height: 0' makes sure there is no room for left open for ascenders and descenders above and below the images in the 'content' property.
