30 czerwca 2015

Przeniesienie napisu: autor, komentarze i daty w dowolne miejsce


Witam dzisiaj kod, którego ja osobiście używam bardzo często ponieważ go uwielbiam! Bez niego myślę, że nie ma takiego ładnego efektu. A mianowicie chodzi o zmienianie wyglądu napisu autora postu, komentarzy i daty. Oczywiście, każdy kod jest indywidualny, i nie trzeba używać ich wszystkich jednocześnie.
Może zacznijmy od napisu : AUTOR.
.post-author {
position: absolute;
width: 190px !important; /*szerokość ramki*/
height: 20px; /*wysokość ramki*/
top: -20px; /*przeniesienie do góry, może być na minusie*/
left: 380px; /*przeniesienie w bok, może być na minusie */
padding: 2px; /*marginesy*/
padding-left: 10px; /*marginesy z lewej strony*/
color: #fff; /*kolor czcionki*/
background: #C67263 !important; /*kolor tła*/
margin-bottom: 10px !important;
font: 10px calibri, serif !important; /*wysokość I rodzaj czcionki*/
text-align: center; /*przyleganie tekstu do lewej strony ramki*/
letter-spacing: 1px !important; /*przerwa między literami*/
text-transform: uppercase; /*drukowane litery*/
border-radius: 40px 40px 40px 40px;
padding-bottom: 3px; /*marginesy od dołu*/
transtion: all 0.7s; /*płynny powrót*/
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT:

Kod:
.post-author.vcard{
padding-right:10px;
}
.post-author.vcard:before {
content: url('http://funkyimg.com/i/212UJ.png');
padding-right:5px;
}
Efekt:

KOMENTARZE:
.comment-link {
position: absolute !important;
width: 170px !important;
height: 20px !important;
top: -20px;
left: 400px;
padding: 2px;
padding-left: 10px !important;
color: #000000 !important;
background: #ffffff !important;
box-shadow: 1px 1px 7px #ffffff;
font: 10px calibri, serif !important;
text-align: center;
letter-spacing: 1px !important;
text-transform: uppercase;
text-decoration: none; /*brak podkreślenia linka*/
font-weight: none !important; /*brak pogrubienia czcionki*/
padding-left: 2px;
transtion: all 0.7s;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT: 

KOD:
.post-comment-link a{
display:block;
position:absolute;
right:10px;
top:-20px;
background-color:#444;
padding:8px 12px;
color:#fff;
transition:.7s;
font-size:80%;
}
.post-comment-link a:hover{
background-color:$(motyw2);
}
.post-comment-link a:before{
content:"";
background-color:#444;
display:block;
width:14px;
height:14px;
left:50%;
position:absolute;
top:-7px;
margin-left:-7px;
transform:rotate(45deg);
transition:.7s;
}
.post-comment-link a:hover:before{
background-color:$(motyw2);
}
EFEKT:

DATA:
.date-header  {
position: absolute !important;
width: 180px !important;
height: 24px !important;
top: -1px;
left: 400px;
padding: 2px;
padding-left: 10px !important;
color: #000000 !important;
background: #E0E082 !important;
box-shadow: 1px 1px 7px #E0E082;
font: 19px calibri, serif !important;
text-align: center;
letter-spacing: 1px !important;
border-radius: 0px 0px 40px 40px;
text-transform: uppercase;
text-decoration: none; /*brak podkreślenia linka*/
font-weight: none !important; /*brak pogrubienia czcionki*/
padding-left: 2px;
transtion: all 0.7s;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
EFEKT: 

Oczywiście, zmieniajcie wszystkie parametry kolory, bawcie się tym! Tutaj podałam wam tylko przykłady jak może to wyglądać, ale jest o wiele więcej możliwości!

Brak komentarzy:

Prześlij komentarz