Cikkajánló
Felkerült a legújabb kinézet az oldalra. Most Madonnát választottam a design-hoz, mert nagyon szeretem őt is. Őrá már tényleg azt lehet mondani, hogy egy sztár. Le a kalappal előtte,
Újabb három darab projektdobozt készítettem. Ezeken a CSS kóddal simán lehet alakítani. Lehetnek kisebbek, nagyobban, más színűek is, de hisz ezeket tudjátok. Ahogy eddig is az egyes modulokban be
Elérkeztünk a honlapverseny első fordulójához. Itt most azokra a honlapokra lehet szavazni február 28-ig, akik nem kerültek be az első 10 oldal közé. A legtöbb szavazatot kapó oldal 100
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Képes modul készítése

Ez is egy olyan leírás, amit azért teszek fel az oldalra, mert már hangzott el kérdés róla. Hogyan lehet olyan modult készíteni, amiben minta is van? Például ez a modul:
 


A menete szerintem egyszerű.
 

  • elkészítitek egy képszerkesztőben a modult. Photoshop-ban való elkészítéshez itt találtok leírást: Modulstílus készítése PS-ban
  • a fent látható modult 4-be kell vágni. Általában 3 részre vágjuk a modult, de ez most 4 részes lesz, mivel a modul széleinek adtam árnyék effektet, így simán háttérszínt a CSS-ben nem adhatok meg, mert akkor a modul nem fog jól mutatni. Ha ti nem adtok a modul széleinek semmit, akkor mehet a 3-ba vágás.
  • Ha megvan a szétvágás már csak be kell kódolni CSS segítségével a modult, hogy minden jól szuperáljon benne. Teljes kódolás itt:
    DIV kódolású egyedi modul
  • Ha a táblázatos kódolást szeretitek jobban, akkor annak a leírása itt található meg: Táblázatos egyedi modul


Kódolás G-Portálon
(a HTML-es kódolás a GP-s alatt olvasható)
 

A modulfejléc és modullábléc kódolása a megszokott. A modul tartalmi részének a kódolása kicsit más, mert itt a background-dal és a repeatokkal kell játszani ahhoz, hogy a végeredmény jó lehessen. Most a szélső modulhoz hoztam egy CSS kód mintát.
 

.column_side td.modbody {
    background: url(ide jön a mintás kép URL címe), url(minta nélküli háttérkép URL címe);
    background-position: center top, top;
    background-repeat: no-repeat, repeat-y;

    width: 360px;
    font-family: Georgia;
    text-align: justify;
    color: #622c02;
    padding: 10px 10px;
    text-shadow: 1px 1px 1px #;
}


A background-position-nél az első a center top. Ez a mintás háttérre vonatkozik. Középen és felül fog elhelyezkedni a háttér.
Alatta a background-repeat-nél ehhez a háttérhez vonatkozik a no-repeat rész. Az-az semelyik irányba nem fogja a hátteret ismételni. Ott marad középen és felül.
 

A background-position-nél a második a top. Ez a sima háttérre vonatkozik. Felül helyezkedik el. Onnan fog lefelé ismétlődni.
Alatta a background-repeat-nél ehhez a háttérhez vonazkozik a repeat-y rész. A hátteret lefelé ismétli a CSS. Ezért bármennyit írhattok bele, háttér mindig lesz a modulban.
 

Mintás háttérkép


Minta nélküli háttérkép


Kódolás HTML oldalon
Minden ugyanaz, mint a GP-s kódolásnál, csak itt a CSS részhez nem a .column_side td.modbody-t írjátok az egyedi modulstílushoz, hanem a saját kódolású egyedi modulotokban írjátok át a background részeket ahhoz, hogy jól jelenjen meg a modul.
 

.sidebar-module {
    background: url(ide jön a mintás kép URL címe), url(minta nélküli háttérkép URL címe);
    background-position: center top, top;
    background-repeat: no-repeat, repeat-y;

    width: 340px;
    font-family: Georgia;
    text-align: justify;
    color: #622c02;
    padding: 10px 10px;
    text-shadow: 1px 1px 1px #;
}

lindadesign Hozzászólások
1 027 megtekintés

Hozzászólások