Nagyon sok blogon látok olyat, hogy egy alap sablon, amin jól meg van csinálva a menü kódja. Néhány tippet adok nektek, hogyan lehet saját, egyedi menüt csinálni CSS kóddal, ami roppant egyszerű, és még passzolni is fog az oldalatokhoz. :)
Első lépésként lépjünk a Blogger>Sablon>Személyre szabás>Speciális>Stílusalap (CSS) hozzáadása menüpontjába, majd az alábbiakat kezdjük el beírni:
#PageList1 { } - Nagyon fontos, hogy az elején és a végén is legyen kapcsos zárójel, ezek közé jön a kód.
Ez a része a képen látható világoskék színnel jelölt részt szerkeszti.
Elsőként leírom, hogy miket lehet ebbe bepakolni, aztán mindent leírok, hogy mit takar.
•position: relative/absolute/fixed; - doboz pozíciója
RELATIVE - ha a menüd a jobb/baloldali modulsorban van, akkor a relative-val ott is marad, ha esetleg jobb/balra/fel/le tolod, a helye bent marad egy üres térként, erre figyelj!
(Ennél a doboznál pont ezt használtam, nyugodtan nézd meg ITT)
• elhelyezés/méret
top/bottom: 120px; - elhelyezés a tetejéhez/aljához képest
left/right: 120px; - eltolás jobbra/balra
width: 200px; - szélesség
( a magassággal ne foglalkozzatok, ha több és több elemet raktok bele, magától változni fog)
(esetleg, ha szeretnénk, hogy a szöveg benne egy kicsit lejjebb kerüljön - a keret és az "OLDALAK" felirat közötti rész, akkor a következő a teendő:
padding/-left/right/top/bottom: 10px; - ez eltolja egy kicsit, vagyis nagyítja, és állíndóan váltorik plusz elemek esetén)
• díszítés
border - körvonal
egyénileg be lehet állítani, melyik oldalán legyen, és melyiken ne.
BORDER-left/right/top/bottom:
2px (milyen vastag legyen)
solid/dotted/dashed/double/groove/ridge/inset/outset
#fff; (színe - megadható RGB-ben, HEX-ben, vagy WEBSZÍNKÉNT)
solid - szimpla egyenes vonal
dotted - pöttyözött
dashed - szaggatott
double - két egyenes vonal
groove/ridge - ezek 3D-s keretek
} ezek így vannak párban
inset/outset - szintén 3D-s keretek
nagyon elmagyarázni nem tudom, hogyan néznek ki, de a W3School oldalán fent vannak a kinézetek.
border-radius - lekerekítés
ezt szintén be lehet állítani, hogy melyik csúcs legyen lekerekítve
border-radius: 10px 0px 10px 0px; - bal felső, jobb felső, jobb alsó, bal alsó - így megy körbe
ezt persze %-ban is megadhatjuk - a teljes 100% egy kört/oválist alkot, míg px(pixel)-ben nem, csak a széleit kerekíti.
box/text-shadow: (inset - befelé árnyékolás) 10px (vízszintes eltolás) 10px (függőleges eltolás) 10px (elhomályosítás) white;
BOX - a dobozra érvényes
TEXT - szövegre érvényes
ha olyat szeretnétek, hogy fokozatosan az egyik irányból jön egy szín azt a következőképpen tudjátok elérni:
box-shadow: inset 10px 0px white, 20px 0px white, 30px 0px white, 30px 0px white, ....STB..... 100px 0px white;
A végén ne hagyatok a pontosvessző előtt sima vesszőt, mert akkor nem csinálja meg. ;)
• forgatás
transform: rotateZ/rotateX/roteteY (30deg/-30deg);
ROTATE Z - a képeken látni, hogy nekem is ez van alkalmazva, ez szimplán elforgatja.
ROTATE X - ez az X tengelyen forgatja, szóval, mintha fognál egy lapot, ami vízszintesen van a földdel és elkezdenéd fel-le forgatni..
ROTATE Y - ez ugyanaz, mint az X, csak pepita. Az Y tengelyen forgat, hogyha magad elé kinyújtva fogsz egy lapot és tengelyesen jobbra-balra forgatod.
• szín
background-color: RGBa(0, 0, 0, 0.5); - fekete (RGB)
background-color: #000; (hosszabb formája #000000) (HEX)
background-color: black (WEBSZÍN)
background-image: url(ide egy kép URL cím jön -www.kiskutyanyelvekép.hu-)
•idő
transition:all 2s;
-moz-transition:all 2s;
-o-transition:all 2s;
-webkit-transition:all 2s; - színváltozás esetén ez az eredetivé visszaváltozás ideje
és a legvégére a lezárásként }
Ha akarunk eltérést, hogyha rávisszük az egeret, akkor a #PageList1:hover { } kódot használjuk, felépítésileg pedig minden marad.
Jöjjenek a gombok!
#PageList1 li a { }
• szín
background-color/image - háttérszín
color - betűszín
• elrendezés/formátum
text-align: center/left/right; szöveg elrendezése.
font-size: 8px; - betű mérete
line-height: 15px; - a gombok magassága
padding: 4px; - betűk és a háttér közötti terület növelése
margin-left/right - a szélességük állítható
margin-bottom/top - a gombok közötti távolság (+ távolodnak; - közelednek)
letter-spacing: 3px; - betűk távolsága
A fentinél eddig leírtakat szintén lehet itt is alkalmazni, lehet eltolás, vagy bármi mást
Beilleszteni az IDŐ részben fent leírt kódot, majd lezárni és ez kész. :)
Ha rávisszük az egeret, és változást akarunk, akkor a következő kód kell: #PageList1 li a:hover { }
Ha a modul címét ( ami nálam az "OLDALAK" volt) akarjátok változtatni, ahhoz #PageList1 h2 { } kell. Az formátumnál leírtak erre is mind jók.
Ha valamit átlátszóként akartok hagyni, akkor a hidden, vagy transparent szót használjátok ;)
Ha egyénileg akarjátok elrendezni az oldalak gombjait, akkor ne használjátok a #PageList1 { } részt, csak egyből a gombokat és a következő kódot.
#PageList1 li:nth-child(1){ }
Ez a kód egyenként rendezi el a gombokat, ebbe írhattok akár szn, vagy pozíciót változtató kódokat.
Ahányadik elemet akarjátok változtatni, azt a számot írjátok az 1-es helyére!
Remélem érthető volt, szerintem nem bonyolult, ha az ember kellőképpen foglalkozik vele. Sok sikert vele, nyugodtan zargassatok kommentben, ha nem érthető, mindenkinek segítek, amint tudok ;)
Esetleg facebook-on is lehet terrorizálni, ezzel a névvel megtaláltok ott ;)
Nincsenek megjegyzések:
Megjegyzés küldése