Oldal: 1 / 3 123 UtolsóUtolsó
Eredmény: 1 - 10 (22) összesen

Téma: CSS tutorialok

  1. #1
    NB.
    NB. nem elérhető
    Törzsvendég NB. logója
    Csatlakozott
    10-07-02
    Hozzászólás
    163
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás CSS tutorialok

    Bár a tutorial projekt meghalt, azért (hátha feléled), jöhetnek ide CSS tutorialok.

    Kezdem eggyel:

    Dupla keretek létrehozása.

    --VÁZLAT--
    • A probléma: egy div-nek egy sima CSS keretet könnyen lehet adni, viszont a kétszeres (pl. sötétszürke kívül, világos szürke belül) létrehozása "kevésbé evidens.
    • A módszer:
      1. A HTML-ben egy egyszerű DIV létrehozása.
      2. A div-nek beállítani a tulajdonságait.
      3. Végül pedig a :before-nak a tulajdonságait.


    --RÉSZLETES MEGOLDÁS--

    1. Új HTML lap létrehozása vagy a régi szerkesztése. Felteszem, hogy újat hozunk létre.
    2. A BODY részbe egy
    Kód:
    <div id="valami"></div>
    behelyezése.
    3. Tulajdonságok adása a valami elemnek (nem kötelező). Néhány ajánlott példa, ami akár javíthatja is a hatást:
    a) Háttér: pl.
    Kód:
    background: #f4f4f4;
    b) Igazítás: pl.
    Kód:
    margin: 60px auto;
    vagy top és left alkalmazása.

    Fontos:
    a) Méretek (tetszőlegesen megadható):
    Kód:
    width: 200px;  
    height: 200px;
    b) Keret:
    Kód:
    border: 1px solid #bbbbbb;
    A dupla kerethez a következő kódot kell beilleszteni:
    Kód:
    #valami:before {  
    border: 1px solid white;  
    content: '';  
    width: 198px;  
    height: 198px;  
    position: absolute;  
    }
    A lényeg a before, a width és a height (ezt így kell kiszámolni: a valami div értékei- a keret*2, és a content üressége.


    Aztán bocs, ha rossz helyre írtam.


    Utoljára módosítva: NB. által : 2010-07-13 17:20 Oka: túl hosszú volt egyben

  2. #2
    NB.
    NB. nem elérhető
    Törzsvendég NB. logója
    Csatlakozott
    10-07-02
    Hozzászólás
    163
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Ha tripla is kell, akkor:
    Kód:
    #valami:after {  
    content: '';  
    position: absolute;  
    width: 196px;  
    height: 196px;  
    border: 1px solid #bbbbbb;  
    left: 1px; top: 1px;  
    }
    A szélesség-magasság kiszámolása megint hasonló, a content ugyanaz, a before after lett. A border szabadon változtatható.

    Az egész egy angolról fordítás. Az videó, úgyhogy akik látni szeretnék a kódot fejlődés közben, ott nézhetik meg (igen, nem volt kedvem magyarra fordított videót készíteni.)


    Utoljára módosítva: NB. által : 2010-07-13 17:29 Oka: +

  3. #3
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Nem tudom pontosan, hogy érted ezt a dupla/tripla keretet, de szerintem könnyedén megoldható úgy is, hogy két/három divet pakolsz egymásba. Persze, ez így sokkal elegánsabb (a Te verziód), csak azt szeretném jelezni, hogy szerintem nem lehet rá azt mondani, hogy nem túl evidens, mert egy ilyen megoldás adja magát.

    Ha pedig másfajta a keret, akkor bocsi, de én dupla/tripla keretben nem látok semmi extrát.



  4. #4
    Bölcs lexxx7 logója
    Csatlakozott
    10-07-09
    Hely
    Vajdaság
    Hozzászólás
    1.258
    Begyűjtött 316 köszönetet
    217 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Ez a pdf az alapokról szól, de indítónak egész jó. Igaz, 2004-es...

    hXXp://www.bibl.u-szeged.hu/inf/szakdoli/2004/rimar/css_szakdolgozat.pdf



  5. #5
    NB.
    NB. nem elérhető
    Törzsvendég NB. logója
    Csatlakozott
    10-07-02
    Hozzászólás
    163
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Idézet Emphus eredeti hozzászólása Hozzászólás megtekintése
    Nem tudom pontosan, hogy érted ezt a dupla/tripla keretet, de szerintem könnyedén megoldható úgy is, hogy két/három divet pakolsz egymásba. Persze, ez így sokkal elegánsabb (a Te verziód), csak azt szeretném jelezni, hogy szerintem nem lehet rá azt mondani, hogy nem túl evidens, mert egy ilyen megoldás adja magát.

    Ha pedig másfajta a keret, akkor bocsi, de én dupla/tripla keretben nem látok semmi extrát.
    Én se, a divek logikusabbak, csak ez sz'tem szebb módszer.



  6. #6
    Bölcs Nero logója
    Csatlakozott
    08-10-16
    Hely
    határ
    Hozzászólás
    805
    Begyűjtött 12 köszönetet
    9 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Ebben a témában a tutorial.hu oldal kódolás menüpontot ajánlanám tanulmányozásra ami magába foglalja a css témakörét is...


    aláírás

  7. #7
    Bölcs
    Csatlakozott
    08-01-02
    Hozzászólás
    1.271
    Begyűjtött 82 köszönetet
    53 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Két hasonló megoldással is találkoztam:
    http://net.tutsplus.com/tutorials/ht...th-simple-css/
    http://www.evanbyrne.com/article/fan...-image-borders
    Egy hátránya van IE nem kezeli az after, before tagokat.

    Egy másik remek alkalmazása, amit már a weblink.hu-ra is beimplementáltam, hogy a meglátogatott linkeket meg lehet jelölni.

    Mentsétek el valami.html-ként, indítsátok el, és nyomjatok a linkekre:
    Kód:
    <HEAD>
     <STYLE type="text/css">
      a:visited:after {content:  "\2713 ";}
     </STYLE>
    </HEAD>
    <BODY>
     <a href="http://www.weblink.hu" target=_blank>weblink</a>
     <a href="http://www.google.hu" target=_blank>google</a>
     <a href="http://www.bing.hu" target=_blank>Bing</a>
    </BODY>




  8. #8
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.095
    Thanked 1 Time in 1 Post

    Alapbeállítás re: CSS tutorialok

    Szerintem ez az utóbbi nem igazán jó, még a végén valaki ezt jegyzi meg. A CSS-t külön file-ban szokás tárolni, a tag-ek neveit meg régóta nem írjuk nagy betűvel.


    // Only illogics can find
    // hidden flaws in a straight logic line

  9. #9
    Bölcs
    Csatlakozott
    08-01-02
    Hozzászólás
    1.271
    Begyűjtött 82 köszönetet
    53 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Idézet edem eredeti hozzászólása Hozzászólás megtekintése
    Szerintem ez az utóbbi nem igazán jó, még a végén valaki ezt jegyzi meg. A CSS-t külön file-ban szokás tárolni, a tag-ek neveit meg régóta nem írjuk nagy betűvel.
    Ezekben igazad van, csak a szemléltetés miatt van most így.



  10. #10
    Törzsvendég crecky logója
    Csatlakozott
    10-08-19
    Hely
    Dombóvár
    Hozzászólás
    192
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: CSS tutorialok

    Tudnátok nekem javasolni valami irodalmat?
    Teljesen a zéró-ról kezdeném a html-t és a css-t is.
    Tudom, hogy Dunát lehet rekeszteni ilyen könyvekkel, de biztos van olyan, amit ti, akik ezt tanulták tényleg jónak gondoltok. A válaszokat előre is köszönöm!



Oldal: 1 / 3 123 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •