2016. március 21.

Something Big

Sziasztok!
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. :)









Ezen a képen lévő menü elemeit fogom felvázolni, amiből mindenki előállíthatja a sajátját. :)











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!


   ABSOLUTE -  ha a menüd a jobb/baloldali modulsorban van, akkor a modulból kiveszi és szabadon mozgatható anélkül, hogy a modulsávban hézag maradna.


   FIXED - ezt érdemes úgy helyezni, hogy ne lógjon rá szövegre, vagy fontos részekre, mert ha görgetsz lefelé, ez ugyanabban a helyzetben marad, ha a háttere közbe mozog is.

(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