3/21/2017

Ozdobniki za pomocą :before i :after

Widzicie romby przy dacie? Dla mnie kiedyś taki efekt wydawał się czarną magią, jednak znajomość jednego kodu pomoże nam wstawić w to miejsce dowolną figurę geometryczną.



Na początek zwykły kod do daty. Dodaję mój, aby także i u Was wszystkie paramtery typu szerokość i wysokość zgadzały się z dodanymi rombami.
.date-header span {text-align: center; padding-top: 6px !important; background: #CECECE; width: 200px; margin-left: 150px; }
.date-header  {text-align: center; padding-top: 7px !important;}
Jest już najprostsza z możliwych data, teraz pora na romby.
Tworzę je za pomocą elementu :before (romb po lewej stronie, czyli przed elementem, do którego dodaję kod) i :after (romb po prawej stronie, czyli za elementem, do którego dodaję kod). Elementy :before i :after najprościej mówiąc, pozwalają "budować" całkowicie nowy element szablonu kompletnie z niczego, analogicznie przed lub po elemencie, do którego selektora dodajemy :before lub :after. Mój selektor wygląda w ten sposób:
.date-header span:before {
Teraz skupię się na jednym rombie, budowa następnego będzie wyglądała analogicznie.
Najważniejszą rzeczą przy budowie nowego elementu za pomocą :before jest cecha content: "";. W cudzysłów wpisuje się dowolne znaki, które pojawiają się przed/po selektorze. Ja nie chcę dodać żadnego znaku, dlatego pozostawiam cudzysłów pusty, jednak muszę wpisać tę cechę do kodu.
content:"";
Teraz już wszystko idzie z górki. Wystarczy użyć najprostsze kody. Nasz element istnieje, jednak nie widać go, gdyż nie ma kolor, a jego wymiary to 0x0px. Dlatego nadaję mu te cechy:
width:25px;
height:25px;
background-color:#98938A;
Jak na razie albo nie widzimy elementu, albo jest on dziwnie umiejscowiony. Aby okiełznać jego pozycję dodaję pozycjonowanie i ustawiam kwadrat w wyznaczonym miejscu:
position:absolute;
top:6.5px;
right:150px;
Na koniec jeszcze obracam kwadrat:
transform:rotate(45deg);
Kwadrat po prawej stronie buduję identycznie. Zmieniam tylko :before na :after oraz pozycję.
Wersja kodu dla leniwych, czyli wszystko razem:
.date-header span:before {
content:"";
width:25px;
height:25px;
background-color:#98938A;
position:absolute;
top:6.5px;
right:150px;
transform:rotate(45deg);
}
.date-header span:after {
content:"";
width:25px;
height:25px;
background-color:#98938A;
position:absolute;
top:6.5px;
right:355px;
transform:rotate(45deg);
}
Na koniec najciekawsze: tym sposobem można uzyskać prawie każdą figurę geometryczną, nawet także o której istnieniu jeszcze nie wiesz. Co najlepsze, nie trzeba się samemu trudzić z jej budową, gdyż kod do każdej z nich możesz znaleźć >tutaj<.
Bawcie się selektorami i figurami! Pokazujcie w komentarzach Wasze efekty!

2 komentarze:

  1. Mam pytanie.. Jak "przedłużyć" pasek nagłówka z datą? Na obrazku sięga on ażdo rombów, a na moim blogu kończy i zaczyna się zaraz po literach. Co z tym zrobić?

    OdpowiedzUsuń