TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy.

Zostało ono wykonane przez Angielski ELTT. Dostępne wersje językowe en

Zobacz inne strony

Arkusze CSS - rady i triki

(This page uses CSS style sheets)

Zaokrąglone i z cieniem

Pięć obrazów

Rezultat

zaokrĄglone rogi i cienie

CSS3 będzie posiadało właściwości, które umożliwią tworzenie zaokrąglonych granic, tworzenia granic za pomocą obrazów i cieni ale odrobiną pracy można obecnie stworzyć te elementy w CSS2 - bez tabelek i dodatkowych znaczników.

Strona ta jest zainspirowana stroną stworzoną przez Arve Bersvendsen. Ma on o wiele więcej interesujących many CSS demos.

Oczywiście zaokrąglenia i cienie będą o wiele łatwiejsze w CSS3. Na przykład, aby zamieścić grubą granicę w paragrafie, która będzie posiadać zaokrąglone rogi potrzebne są dwie linie w CSS3:

P { border: solid thick red;
    border-radius: 1em }

Aby dodać cień na połowę em i prawej stronie wystarczy tylko jedna linia kodu:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Sprawdź tutaj czy kod ten już działa.) Jeśli potrzebujesz tych elementów obecnie i nie masz nic przeciwko kompleksowości jak również braku elastyczności, możesz zastosować poniższą technikę. Przynajmniej będzie to test dla przeglądarek...

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:
top left corner
górny brzeg i górny prawy narożnik:
top right corner
środkowa część i prawy brzeg:
background and right edge
dolny lewy róg:
bottom left corner
dolny brzeg i dolny prawy narożnik:
bottom and bottom left corner

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.

rezultat

Oto jak to wygłąda:

Czy widzisz zielony prostokąt z zaokrąglonymi rogami i cieniem na białym tle? Jeśli nie, to twója przeglądarka nie działa poprawnie.

Kod HTML zawiera wszystko co powinien:

<blockquote>
<p>Czy widzisz zielony prostokąt z zaokrąglonymi rogami i cieniem na białym tle? Jeśli nie, to twója przeglądarka nie działa poprawnie.
</blockquote>

Jeśli chcesz sprawdzic czy twója przeglądarka już potrafi to czytać, spróbuj tutaj.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Jan 2004;
last updated $Date: 2005/08/04 16:30:19 $ GMT

firefox download Mapa