kursy
Nietypowe obramowania
Proste obramownaia 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ń.
Jednak podstawowe efekty są już nudne. Na każdej stronie można coś takiefgo znaleźć. Dlatego zaprezentuję, ciekawsze rozwiązania:
Dwukolorowa obramowanie:
Od razu powiem, że kod byłby krószy, gdyby nie to, że starałem się dostosować działanie CSS do MSIE - proszę, zacznijcie korzytsać 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;
}
Efekt
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;
}
Efekt
W ten sposób można uzyskać niesamowicie wiele różnorakich efektów. Popróbuj!
Patryk 'yarpo' Jar
