Dlatego w tym poście postaram się pokazać, jak w łatwy sposób, za pomocą kilku właściwości można upiększyć ten, mały ale ważny element naszego bloga.
Żeby już nie przedłużać, przejdźmy do sedna!
| KOD |
#BlogArchive1
{
width:100%;
font-family: cambria;
font-size: 10px;
letter-spacing: 1px;
border: 1px solid #eee;
padding: 5px;
background: #8dc1d3;
}
#BlogArchive1 h2
{
display: none;
}
#BlogArchive1 a:link, #BlogArchive1 a:visited
{
color: #fff;
}
#BlogArchive1 a:hover
{
margin-left:10px;
transition:.3s linear;
-o-transition:.3s linear;
-moz-transition:.3s linear;
-webkit-transition:.3s linear;
}
|
|
|---|---|---|
| WYGLĄD | PRZED
| PO
|
| KOD |
#BlogArchive1
{
background: linear-gradient(#fff 5%, #8dc1d3 60%);
border-bottom: 1px dotted #fff;
position: relative;
width: 185px;
font-family: Oswald;
text-align: justify;
z-index: 0;
padding: 0 10px 10px 10px !important;
text-transform: uppercase;
}
#BlogArchive1 h2 {
margin-bottom: 2px !important;
}
#BlogArchive1 a:link, #BlogArchive1 a:visited
{
display:block;
font-family: Oswald
text-transform: uppercase;
font-size: 9px;
letter-spacing: 2px;
padding: 2px 0;
text-align:center;
background:#5a9cb1;
color:#fff;
position:relative;
top:20px;
margin:-20px 0 2px 0;
transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
#BlogArchive1 a:hover
{
background:#4a8ba0;
transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
|
|
|---|---|---|
| WYGLĄD | PRZED
| PO
|
| KOD |
#BlogArchive1_ArchiveMenu
{
width:100%;
font-family: cambria;
font-size: 10px;
letter-spacing: 1px;
border:1px solid #eee;
padding: 5px;
background: #8dc1d3;
text-transform: uppercase;
background-color: url('')
}
#BlogArchive1 h2
{
display: none;
}
|
|
|---|---|---|
| WYGLĄD | PRZED
| PO
|
Brak komentarzy:
Prześlij komentarz