10-09-2013 Saat: 20:59
1. Temalar&Şablonlar > Şablonlar > 1. Ana Sayfa Şablonlar > İndex
Grip İstediğimiz Yere Ekliyoruz.
2. Temalar&Şablonlar > Temalar > Global.css
Gir En alta Ekle
Alıntıdır MDP'den ßyßurak.
Grip İstediğimiz Yere Ekliyoruz.
Kod:
<a class="button teach-me">
<span class="item">Duyuru 1 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry"> Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 2 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">40₺</span>
<i class="chevron"></i>
</a>
<a class="button handyman">
<span class="item">Duyuru 3 Satış </span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">15₺</span>
<i class="chevron"></i>
</a>
<a class="button pick-up-delivery">
<span class="item">Duyuru 4 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 5 Satış </span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">10₺</span>
<i class="chevron"></i>
</a>
<a class="button">
<span class="item">Duyuru 6 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>
<a class="button teach-me">
<span class="item">Duyuru 7 Satış</span>
<span class="meta category">Satın Al</span>
<i class="clock"></i>
<span class="meta expiry">Eylük 10, 2013</span>
<span class="meta cost">30₺</span>
<i class="chevron"></i>
</a>2. Temalar&Şablonlar > Temalar > Global.css
Gir En alta Ekle
Kod:
/*
* re: https://twitter.com/CodePen/status/355107665099231232
*
* this version uses <i> for the icons; this is the first time i've constructed icons out of pure css using pseudo elements (MUCH more on that here: http://css-tricks.com/pseudo-element-roundup/ )
*
* next version(s) might substitute the <i>s with @fontface & unicode range; i'd like to also try to get more semantic with this (though i think this is pretty semantic to start with... no? maybe not); i'd also like to get this modernizr'd and compatible way back to ie version who-knows-what
*
* feel free to hit me up w/criticisms @ jeremy.buller@gmail.com
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
.button {
display: block;
position: relative;
padding: .75em 5em .75em 1em;
border-radius: .25em;
margin-bottom: .5em;
background: #fff;
box-shadow:
/* regular bottom */
0 .0625em .125em rgba(0, 0, 0, .125),
/* inset bottom */
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
/* category color (left) */
inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
/* arrow background (right) */
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.button:hover {
text-decoration: none;
}
.teach-me {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.handyman {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.pick-up-delivery {
box-shadow:
0 .0625em .125em rgba(0, 0, 0, .125),
inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}
.item {
font-weight: bold;
color: #000;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item:after {
content: '';
display: block;
height: 0;
width: 100%;
}
.meta {
margin-left: .25em;
}
.category,
.expiry,
i {
font-size: 9px;
line-height: 2; /* 16 "px" */
}
.expiry {
font-weight: bold;
}
.expiry:before {
content: 'Tarih: ';
font-weight: normal;
}
.cost {
position: absolute;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 2em;
right: 1.125em;
top: 0;
line-height: 2.083; /* 50 "px", should be same as button height */
}
.clock {
display: inline-block;
position: relative;
width: 1.333em;
height: 1.333em;
margin-left: .333em;
border: .25em solid #95979d;
border-radius: 50%;
vertical-align: middle;
}
.clock:before,
.clock:after {
content: '';
display: block;
position: absolute;
width: .125em;
height: .25em;
background: #95979d;
}
.clock:before {
left: 50%;
bottom: 47%;
margin-left: -.0625em;
}
.clock:after {
transform: rotate( 135deg );
left: 63%;
top: 47%;
}
.chevron {
display: block;
width: 1em;
height: 1em;
font-size: .75em;
position: absolute;
right: .667em;
top: 50%;
margin-top: -.6em; /* just eyeballing it */
}
.chevron:before,
.chevron:after {
content: '';
display: block;
position: absolute;
background: rgba(0, 0, 0, .125);
width: .5em;
height: .5em;
right: .25em;
top: 50%;
}
.chevron:before {
transform: skewX( 45deg );
top: 0;
box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
transform: skewX( -45deg );
bottom: 0;
box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}Alıntıdır MDP'den ßyßurak.
