Hogyan készíts karaktertáblát + VIDEÓ

A napokban egyre többen kerestek fel azzal, hogy tanítsam meg őket karaktertáblákat kódolni. Sajnos nem vagyok egy jó tanító, főleg úgy, hogy magyaráznom kéne mutogatás nélkül, így úgy döntöttem, készítek egy videót, amiben nyomon tudod követni az elkészítési folyamatot. Ez az első videóm, ezért nem lett tökéletes a vágás, meg ilyesmik. Sőt, néhol nevetségesen rossz lett, de ezt nézd el nekem, még gyakorolnom kell. Ami a magyarázást illeti, azt inkább kihagytam, és zenét tettem be alá. Eléggé zavarban voltam a felvétele közben, ezért ha még a beszédre is koncentrálnom kellett volna, kész katasztrófa lett volna az egész. Na, de nem is fecsegek tovább, lássuk a medvét videót.

Az oldalak, amiket használtam:

HTML kód tesztelő

Képfeltöltő

Ahogy látod, igyekeztem egy viszonylag egyszerűbb kódot kitalálni, hogy lehetőleg még azok is értsék, akik nem annyira konyítanak a kódoláshoz. Viszont ha van olyan, aki semmit nem ért még hozzá, annak igyekszem itt, a videó alatt egy kis segítséget nyújtani a kód egyes részleteinek megmagyarázásával.

DIV: Egy bekezdés kezdetét és végét adja meg, és ezeknek a bekezdéseknek a formázását valósítja meg. A bekezdések között nem hagy távolságot.

CLASS: Az osztályokban adhatod meg a bekezdések jellemzőit CSS nyelven.

IMG: Kép beszúrása.

STYLE: A style tagon belül adhatod meg az osztályok adatait CSS nyelven.

OSZTÁLYOK:

Az osztály definiálása: 

.azosztályneve {

az osztály

jellegzetességei

}

Hivatkozás az osztályra:

class="azosztályneve"

Az osztályokban megadható adatok:

(csak, ami a videóban is használva volt, ennél természetesen sokkal több van)

background: a bekezdés háttere

     megadható attribútumok: kép esetén: url(képlink) szín esetén: HEXA vagy RGB kód

width: a bekezdés szélessége

height: a bekezdés magassága

padding: a margók és a sornak megfelelő szövegdoboz közötti terület távolságának beállítása; ennek a köztes, "kipárnázott" területnek a színét a háttérszín adja meg

border: a bekezdés keretvonalainak beállítása

     oldalakra bontva:

        border-top

        border-bottom

        border-right

        border-left

     megadható attribútumok: 3px szélesség dotted/ solid/ double/ dashed/ outset /inset/ ridge/ groove stílus HEXA vagy RGB kód  szín

border-radius: a bekezdés sarkainak lekerekítése

     sarkokra bontva: 

        border-top-left-radius

        border-top-right-radius

        border-bottom-right-radius

        border-bottom-left-radius

position: a bekezdés pozíciója

     megadható attribútumok:

         static: normál pozíció

        absolute: az előtte elhelyezkedő elemhez igazodva jelenik meg a megadott adatok szerint

        fixed: a bekezdés a böngésző ablakához igazodva jelenik meg a megadott adatok szerint

        relative: a bekezdés a normál pozíciójához képest jelenik meg a megadott adatok szerint

  absolute, fixed, relative attribútumok megadása esetén:

   left: a bekezdés mennyit mozogjon + balra - jobbra

   top: a bekezdés mennyit mozogjon + jobbra - balra

   bottom: a bekezdés mennyit mozogjon + fel - le

   top: a bekezdés mennyit mozogjon + le - fel

color: a bekezdés betűjének színe

     megadható attribútumok: HEXA vagy RGB kód

text-shadow: a bekezdés betűjének árnyéka

     megadható attribútumok: (-)3px vízszintes eltolás(balra) jobbra  (-)3px függőleges eltolás(fel) le 3px  árnyék elmosódó szélessége HEXA vagy RGB kód árnyék színe

font-size: a bekezdés betűjének mérete

font-weight: a bekezdés betűjének vastagsága

     megadható attribútumok:

        bold

        none

text-align: a bekezdés szövegének elhelyezése

     megadható attribútumok:

        left: balra igazított

        right: jobbra igazított

        center: középre igazított

        justify: sorkizárt

overflow: megadja, hogy mi történjen, ha a bekezdésen határain túlmegy a bekezdés tartalma

     megadható attribútumok:

        visible: az extra tartalom a bekezdésen kívül is látszik

        hidden: az extra tartalom a bekezdésen kívül nem látszik, a böngésző levágja

        scroll: az extra tartalom megjelenítéséhez a böngésző megjeleníti mindkét gördítősávot

      auto: az extra tartalom megjelenítéséhez a böngésző csak a szükséges gördítősávokat jeleníti meg

GÖRGETŐ:

Ha azt szeretnéd, hogy mindenhol ilyen legyen a görgetőd:
görgetősáv:

::-webkit-scrollbar {

}

görgető:

::-webkit-scrollbar-thumb {

}

Ha csak egy bizonyos helyen szeretnéd:

görgetősáv:

.azosztályneve::-webkit-scrollbar {

}

görgető:

.azosztályneve::-webkit-scrollbar-thumb {

}

És ezennel azt hiszem, mindent elmagyaráztam, ami kérdéses lehetett volna számodra. Ha ez mégsincsen így, ne habozz kérdezni itt komment formájában, vagy írni nekem bármilyen elérhetőségen, amiket jobboldalon találsz a modulsávban.

A karaktertáblát bátran felhasználhatod a blogodon, ha megtetszett, csak kérlek, hogy tüntesd fel a forrását. Köszönöm.

Kíváncsi vagyok; sikerült megcsinálnod a karaktertáblát a videó alapján? Mennyire volt segítségedre a videó? Mi az, amit nem tudtál meg belőle, de érdekelne? Esetleg szívesen látnál még ilyen videókat a blogon? Ha igen, mivel kapcsolatban?

MIRacIe M.