Jak można wykorzystać border - solid na blogu

13 maja 2016

Border - solid to nic innego jak proste obramowanie. Jedna ciągła linia, którą można w bardzo fajny i efektowny sposób wykorzystać na naszym blogu. Można dzięki temu dodać uroku naszym wpisom, cytatom, tytułom wpisów i wiele wiele więcej. W tym wpisie postaram się Wam wszystko dokładnie zaprezentować.

Wszystko będziemy robić w edytorze CSS, także bez strachu proszę :)
Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i tam wklejamy nasze kody.

Tytuł wpisu 


h3.post-title {border-left: solid 10px #c27ba0;
padding: 5px;}

Efekt:


h3.post-title {border-bottom: solid 5px #c27ba0;
padding: 5px;}

Efekt:


h3.post-title {
border-bottom:3px solid #c27ba0;
}
h3.post-title:before{
width:450px;
height:3px;
top:26px;
right:0;
background-color:#ead1dc;
content:"";
display:block;
position:absolute;
}

Efekt:


Tytuły gadżetów


.sidebar .widget h2 {border-left: solid 10px #c27ba0;
padding: 5px;}

Efekt:



.sidebar .widget h2 {border-bottom: solid 5px #c27ba0;
padding: 5px;}

Efekt:


.sidebar .widget h2{
border-bottom:3px solid #c27ba0;
width:150px;
position:relative;
}
.sidebar .widget:before{
width:150px;
height:3px;
top:19px;
right:0;
background-color:#ead1dc;
content:"";
display:block;
position:absolute;
}

Efekt:



.sidebar .widget h2 {
border-bottom: solid 3px #c27ba0;
border-top: solid 3px #c27ba0;
padding: 5px;}

Efekt: 


.sidebar h2 {
font: normal 600 12px 'Open Sans', sans-serif;
color: #2a2a2a;
text-transform:uppercase;
text-align: center;
display:block;
line-height: 1em;
margin-bottom: 30px;
letter-spacing: 2px;
position:relative;
}
.sidebar h2:before {
position: absolute;
left: 0px;
top: 8px;
width: 48px;
height: 4px;
background: #c27ba0 none repeat scroll 0% 0%;
content: "";
}
.sidebar h2:after {
position: absolute;
right: 0px;
top: 8px;
width: 48px;
height: 4px;
background: #c27ba0 none repeat scroll 0% 0%;
content: "";
}

Efekt: 



Menu 


.tabs-outer {
border-bottom: 2px solid #c27ba0;
border-top: 2px solid #c27ba0;
padding: 5px;}

Efekt: 


.tabs-outer {
border-bottom: 6px solid #c27ba0;
border-top: 2px solid #ead1dc;
padding: 5px;}

Efekt: 


.tabs-outer a:hover {
border-bottom: 5px solid  #ead1dc !important;
color: #c27ba0 !important;
}

Efekt:



Wszystkie pogrubione wartości są zmienne. Na tym zakończę część pierwszą, aby Was za bardzo nie zanudzić, niedługo pojawi się część druga :) 

4 komentarze:

  1. Świetny i bardzo przydatny wpis :)

    OdpowiedzUsuń
  2. Świetny pomysł. Niektóre sposoby mi się spodobały i na pewno kiedyś po nie wrócę. Stronę zapisałam aż sobie na przyszłość w zakładkach. Z góry dziękuję! :D

    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