|
Címkék formázása
Most pár tippel érkeztem hogy hogy dobjátok fel a Gportál blogmodul címkéit, nagyon egyszerű formázásokról van szó, mégis nagyon szépen fel tudják dobni a kinézetet. Legyen szó egyszerű címkékről, vagy egyéb karaterekkel esetleg font awesome ikonokkal megspékelt kódokról.
Alapvető külömbség
A legtöbb CSS kódban két különböző formázást láthattok, az egyik a .blogtags, a másik pedig a .blogtags a, vagyis az első a linkeket tartó kis blokk, a másik pedig maga a címke ami alapesetben egy egyszerű linkelt szó. Ha helyezgetni akarjuk magukat a címkéket a .blogtags-hoz kell hozzányúlnunk, ha formázni őket akkor a .blogtags a-hoz.
Címketartó blokk kódolása
Elhelyezés: A blokk attól függetlenül formázható hogy éppen fenn illetve a blogmodul alján találhatóak. Ahogy ti is láthattátok pár ember sablonkódjába, ezeket a kis címkéket úgy pakolja az ember ahogy nem szégyelli, ez is megér majd egy misét amit egy külön bejegyzésben fogok összeszedni. Most legyen szó arról hogy ott vannak ahol eredetileg, csak formázni akarjátok őket.
Címke szó elrejtése: Itt nem használható a CSS display és visibility tulajdonsága, ami alap esetben eltűnteti és láthatatlanná teszi az elemeket, mert akkor maguk a címkék is eltűnnek. De a megoldás még egyszerűbb. Nem tetszik a címke szó? Egyszerűen csak modosítsuk úgy a dolgot hogy betűméret legyen 1px a szín pedig fehér/átlátszó. Ezzel a módszerrel lényegi helyet sem fog foglalni a szó, szóval ha középre helyezed pl a címkéket 2px távolságban lesz a méltani középtől, amit ha valaki messziről kiszúr megtapsolom :)
.blogtags {
font-size: 1px;
color: transparent;}
Linkek díszítése
Magukra a linkekere érvényesek az egyszerű szövegformázások, mint a méret, szín, betűtípus stb. Különböző betűtranszformációk, dőlt, félkövér stb. Ezenek a CSS-ben való pontos megvalósításaira nem térnék ki, mert millió helyen le van ez írva :)
Oké oké.. leírom hogy mire kell ráguglizni ha nem ismeritek.
font-size, font-family, line-heigh, color, background, text-trasform, font-weight, font-style, text-decoration, border, padding, letter-spacing,
Alapvető stíluselem a keretek használata, ami egy kis padding tulajdonsággal megspékelve egy egyszerű minimalista stílust ad vissza, a keretek miatt miatt mégis megfelelő kiemelést kapnak a címkék.
.blogtags a {
font-size: 11pt;
text-transform: uppercase; /* Nagy betűssé tesszük a szöveget*/
border: 1px solid black /* egy 1px-es fekete egyszerű keretet adunk a linkekenek */
padding: 5px; /* a szöveg a kerettől 5px távolságra lesz */
Formázás :before és :after -el
Ez sem egy nagy blackmagic. A .blogtags a:before felelős a linkek előtti formázásokért, az after ezek alapján a linkek utániért, vagyis jelen esetben még csak a linkek előtti és utáni törközökért. A :before és az :after egyik fő tulajdonsága a content, amivel tetszőleges tartalmat adhatunk ezeknek a térközöknek, természetes a tetszőlegesen beszúrt karakterek/karaktersorok nem lesznek ez esetben linkelve. A példánkban azt nézzük meg hogy hogyan rakunk a linkek köré kapcsoszárójeleket.
.blogtags {
color: white;
font-size: 1px; }
.blogtags a:before { /*kis ikonok a tag-ek előtt */
color: black;
font-size: 15px;
content: '{ ';} /* beszúrjuk a nyitó kapcsos zárójelet */
.blogtags a:after { /*kis ikonok a tag-ek után */
color: black;
font-size: 15px;
content: ' }';}/* beszúrjuk a záró kapcsos zárójelet */
Itt alkalmaztam az első pontban említett címke szó éltüntetését is, és a :before és :after formázásokat is, ezeknek a formázása természetesen független lehet a .blogtags a formázásitól, csak maradjunka szövegformázási tulajdonságoknál. A content-be megadható tetszőkeges karaktersorozat, illetve kép is, csak tartsuk a sor színtaktikáját, magyarul maradjanak meg a felsővesszők :)
Ugyan itt meg szeretném említeni azt hogy magára a címkeblokkra is ugyan így alkalmazható ez a módszer, csak így az összes címke lesz egy darab kapcsoszárójelben. És ha emellé egyszerű linkelt szövegként kódoljuk be a címkéket egész dekoratív lesz az eredmény.
.blogtags:before {
content: '{';
color:#e9e077!important;
font-size: 12pt!important;}
.blogtags:after {
content: ' }';
color: #e9e077!important;
font-size: 12pt!important;}
Egy példa a fontAwesome ikonok használatára:
.blogtags a:before { /*kis ikonok a tag-ek előtt */
font-family:FontAwesome;
color: black;
font-size: 15px;
content: '\f02b';}
Ugye itt a linkek elé raktunk be egy kis ikont, rakhatjuk utána is, a fentebb említett módszerrel rakhatjuk aze gész címkeblokk elé (ugye a .blogtags:before használatával) és természetesen magukat az ikonokat ugyancsak a :before, :after tulajdonságai miatt függetlenül formázhatod. ( fontAwesome ikonokról bővebben itt olvashatsz)
A címkék formázása alapvetően egyszerű, egyszerűbb CSS tulajdonságokkal is nagyon szép eredményeket érhetünk el. Csak egy elképzelés kell, és egy kis akarat hogy ténylegesen megcsináljunk. Ha kell alapnak vigyétek a példákban felhasznált kódokat.
| 
AJÁNLOM AZ OLDALT
Súgó
Friss bejegyzések
Friss hozzászólások
Archívum