Wydusiłeś kiedyś wszystkie informacje z CSS, na tyle, że zabrakło kolejnej ramki do elementu na stronie? Chciałoby się rzec: The border is not enough. Jeśli tak się stało, to dziś mam dla Ciebie tajną misję polegającą na znalezieniu dwóch nowych agentów udających border. Border już poznałeś. Współpracuje blisko z naszym elementem.
A jacy są pozostali dwaj?
Pewnie słyszałeś o nich, ale nigdy nie pomyślałeś, że będą chcieli Cię wspomóc.
Pierwszy z nich (agent 002), to właściwość outline. Na pewno widziałeś outline w działaniu, kiedy dla elementów na stronie posiadających focus dodawał wokół nich ramkę z kropek. Tak, to właśnie on. I daje się ostylować nie do poznania! Można z nim zrobić to samo co z border, tj. nadać grubość, kolor, styl. Drobne różnice to: outline nie wnosi nam nic do rozmiaru elementu i jest poza jego contentem oraz nie można go włączyć/wyłączyć tylko dla wybranej krawędzi. Wszytko albo nic. Tą drugą właściwość dotyczącą wpływu na element i jego otoczenie można zaobserowować ustawiając obok siebie dwa elementy i nadając choćby jednemu znaczący outline.
Drugi z nich to box-shadow (agent 003), który wcale nie musi być cieniem. Tu mamy do dyspozycji przesunięcie cienia względem elementu, rozmycie cienia (blur), rozciągnięcie cienia (spread) oraz oczywiście kolor. Jeśli chcemy aby box-shadow udawał border, to musimy go ustawić centralnie względem elementu, nadać zerowy blur (brak rozmycia) oraz spread, który tu będzie odpowiadał szerokości ramki.
Obydwa elementy ustawiają się w kolejności za border (wiadomo - za agentem 001). Jeśli więc użyjesz obydwu nadając im taką samą szerokość, to ujawni się tylko outline, który to zamaskuje box-shadow. Kiedy więc box-shadow wychyli się zza outline? Kiedy nadasz mu większą szerokość.
No dobrze, więc przejdźmy do wykonania misji:
<div></div>
<span>tylko na pokaz</span>
div {
width: 100px;
height: 100px;
background: #f00;
border: 2px solid #00f;
outline: 2px solid #0ff;
box-shadow: 0 0 0 4px #ffa346;
}
span,
div {
float: left;
}
Teraz w kwaterze głównej możemy zameldować co następuje. Uzyskamy element o szerokości 100x100 px o czerwonym tle. Ramka elementu jest niebieska i ma 2px. Za nią, gęsiego, idzie outline o kolorze turkusowym, również 2px. Tyły obstawia box-shadow bez rozmycia, ze spread 4px dzięki temu wychyla się w kolorze pomarańczowym na 2px zza głowy outline.
SPAN jest użyty tylko po to, aby pokazać Ci, że outline jest wyjęty spod prawa.
Border, outline and box-shadow are enough now.
Update.
I jak to bywa, czasem proste rozwiązania uciekają z głowy. Nadając właściwość box-shadow nie jesteśmy ograniczeni do jednego cienia.
box-shadow: 0 0 0 4px #ffa346, 0 0 0 6px #ff00ff;
Po przecinku możemy dodawać parametry kolejnych cieni, co oznacza, że możemy stworzyć nielimitowaną ich ilość (ramek). W tym przykładzie dodaliśmy kolejną ramkę w kolorze różowym za ostatnią. Oczywiście jeśli ta ilość będzie zbyt mała, to zawsze możemy dodać standardową ramkę i outline. Czyli nieskończoność + 2.
Przydatne linki:
Właściwość outline
Właściwość box-shadow