Modulfejlc Stlus Tipp #02
Most egy j modulfejlc stlus tippel jnnk. A lnyege az hogy ssze tudjtok hozni ezt:
Bontsuk kt lpsre a dolgot mert a fent mutatott plda kt klmbz stluselemet tartalmaz. Mindkett knnyen hasznlhat magban is, s szp eredmnyeket tudunk elrni a dologgal.
A szveg rfekszik egy vonalra
A dolog lnyege ahogy a pldn is lthatjtok, ide egy HandWritten tpus szveget rdemes beilleszteni, hogy a g y s egybb betk farkacski lelgjanak (brmivel lehet de ezekkel nz ki jl persze). A lnyeg a sormagassg belltsa, egy als keret(ennek rdemes 2-3px krl mozognia). Lssuk a kdot:
.column_side td.modtitle {
line-height: 50%;
border-bottom: 1px solid black;
}
A dolog lnyege addig cskkenteni a line-height-et amg r nem cscsl szpen a szvegnk, rdemes a %-os megadsnl maradni. Tapasztalataim szerint a jelensg 40-50%-nl kvetkezik be, de ez bettpusfgg. Ha ezt a stlust magban szeretnd alkalmazni rdemes a backgroundnak transparent rtket adni.
A vonal elvkonyodsnak a jelensge
Mint mr korbban emltettem, a keretek vgtelenl egyszer dolgok, de gynyr dolgokat lehet vele ltrehozni. A mdszer lnyege az hogy az als keret vkony marad a jobb s a bal oldali pedig vastag, ekkor rjk el azt hogy gy ltszik hogy a vkony als keret elvkonyodik. Lssuk a kdot:
.column_side td.modtitle {
border-bottom: 1px solid black;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
Remlem hasznos volt ez a kis tipp!
|