Nietypowe obramowania

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-22

szukaj: obramowanie border html css

Proste obramowania nie są niczym skomplikowanym.

selektor HTML { border: 1px solid black; }

Powyższy kod powoduje obramowanie dowolnego elementu na czarno, linią ciągłą. Są także inne rodzaje obramowań (oczywiście po wstawieniu w miejsce 'selektor' odpowiedniego znacznika CSS).

Jednak podstawowe efekty są już nudne. Na każdej stronie można coś takiego znaleźć. Dlatego zaprezentuję, ciekawsze rozwiązania:

Dwukolorowa obramowanie:

Od razu powiem, że kod byłby krótszy, gdyby nie to, że starałem się dostosować działanie CSS do MSIE - proszę, zacznijcie korzystać z przeglądarek:-) (np. Opera, FF)

...na początek potrzebujemy dwóch warstw:

<div id="p">
 <div id="d"></div>
</div>

kod CSS

div {
 margin:0;
 padding :0;
}
div#p {
 position: relative;
 z-index: 10;
 border: 5px solid yellow;
 width: 200px;
 height: 200px;
}
div#d {
 position: relative;
 z-index: 11;
 border: 5px double black;
 width: 200px;
 height: 200px;
 margin: -5px;
}

Teraz już ciekawiej, prawda. Ale to jeszcze nie koniec możliwości...

Dwukolorowa linia przerywana!

Nie, to nie będzie jedna reguła w CSS, tylko mały trick. Podobny z resztą w założeniach do poprzedniego.

<div id="p">
 <div id="d"></div>
</div>

kod CSS:

div {
 margin:0;
 padding :0;
}
div#p {
 position: relative;
 z-index: 10;
 border: 5px solid yellow;
 width: 200px;
 height: 200px;
}
div#d {
 position: relative;
 z-index: 11;
 border: 5px dashed black;
 width: 200px;
 height: 200px;
 margin: -5px;
}

W ten sposób można uzyskać niesamowicie wiele różnorakich efektów. Popróbuj!

Patryk 'yarpo' Jar

szukaj: obramowanie border border html html css css

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!