Tytuły gadżetów na boku

16.02.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;}


7 komentarzy:

  1. Gdybym tylko miała kiedyś tyle cierpliwości...wykorzystałabym wszystkie kody <3

    OdpowiedzUsuń
  2. Ja tutaj w innej sprawie, ponoć Disqus zmienia politykę i stanie sie płatny, bo tańsza wersja only english i z reklamami xD
    Trochę załamka.

    OdpowiedzUsuń
  3. Szczerze mówiąc - nie słyszałam o tym :)

    OdpowiedzUsuń
  4. Dowiedziałam się przed chwila dosłownie http://www.spidersweb.pl/2017/01/disqus-reklamy-problemy.html

    OdpowiedzUsuń
  5. Przeczytałam. Z tego wychodzi (przynajmniej ja tak rozumiem, może to nadinterpretacja), że to będzie dotyczyć tylko dużych blogów. Ja u siebie żadnych zmian nie zauważyłam, ale może dlatego, że mam włączonego cały czas Adblocka :)

    OdpowiedzUsuń
  6. Kochana, jestem pod wrażeniem, jak bardzo potrafisz swoimi kodami ożywić blogspota. Dzięki Tobie nie wygląda standardowo i nudno. Zdolniacha jesteś <3

    OdpowiedzUsuń
  7. W sumie to ciekawie wyglądają tytuły umieszczone z boku :D Dobrze wiedzieć jak to zrobić ;)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia