Modulfejléc Stílus Tipp #02
Most egy új modulfejléc stílus tippel jönnék. A lényege az hogy össze tudjátok hozni ezt:
Bontsuk két lépésre a dolgot mert a fent mutatott példa két külömböző stíluselemet tartalmaz. Mindkettő könnyen használható magában is, és szép eredményeket tudunk elérni a dologgal.
A szöveg ráfekszik egy vonalra
A dolog lényege ahogy a példán is láthatjátok, ide egy HandWritten típusú szöveget érdemes beilleszteni, hogy a g y és egyébb betűk farkacskái lelógjanak (bármivel lehet de ezekkel néz ki jól persze). A lényeg a sormagasság beállítása, egy alsó keret(ennek érdemes 2-3px körül mozognia). Lássuk a kódot:
.column_side td.modtitle {
line-height: 50%;
border-bottom: 1px solid black;
}
A dolog lényege addig csökkenteni a line-height-et amíg rá nem csücsül szépen a szövegünk, érdemes a %-os megadásnál maradni. Tapasztalataim szerint a jelenség 40-50%-nál következik be, de ez betűtípusfüggő. Ha ezt a stílust magában szeretnéd alkalmazni érdemes a backgroundnak transparent értéket adni.
A vonal elvékonyodásának a jelensége
Mint már korábban említettem, a keretek végtelenül egyszerű dolgok, de gyönyörű dolgokat lehet vele létrehozni. A módszer lényege az hogy az alsó keret vékony marad a jobb és a bal oldali pedig vastag, ekkor érjük el azt hogy úgy látszik hogy a vékony alsó keret elvékonyodik. Lássuk a kódot:
.column_side td.modtitle {
border-bottom: 1px solid black;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
Remélem hasznos volt ez a kis tipp!
|