Jak można wykorzystać border - solid na blogu

piątek, 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 :) 

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