Tytuły gadżetów na boku

czwartek, 16 lutego 2017

Dzisiaj mam dla Was kolejną prosta instrukcję (a raczej gotowca) która będzie się opierać tylko na kodzie CSS.
Skupimy się dzisiaj na tytułach gadżetów -  zmienimy ich położenie tak, aby były na boku naszego gadżetu. Na koniec tego wpisu, będziecie mieli gotowe style do użycia.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. W arkuszu CSS wklejamy kod:

.sidebar .widget h2 {
border-radius:22px 22px 0 0;
width:170px;
position:absolute;
top:100px;
left:220px;
background:#a64d79;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}

Analiza kodu: 
Zaokrąglenie narożników 
Szerokość 
Położenie 
Odsunięcie do lewej 
Kolor tła
Rodzaj fontu 
Wielkość fontu
Marginesy wewnętrzne
Transformacja tekstu
Położenie tekstu 
Odstęp między literami 
Kolor napisu 

Wszystkie pogrubione i kolorowe wartości są zmienne. 
Pewnie niektórzy zastanawiają się za co odpowiada ta część kodu:

-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);

To właśnie ona pozwala nam na zmianę położenia naszych tytułów gadżetów.

Gotowe style do użycia

Styl 1

.sidebar .widget h2 {
width:170px;
border: solid 1px #999;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#444;}

Styl 2

.sidebar .widget h2 {border-radius: 20px 20px 20px 20px;
width:170px;
background: #9fc5e8;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}

Styl 3 

.sidebar .widget h2 {border-radius: 0px 20px 0px 20px;
width:170px;
background: #f4cccc;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}

Jeśli spodobał Ci się wpis, przekaż go dalej :)