Cikkajánló
Sziasztok. Nem nagyon szoktam ilyesmit csinálni, de muszáj megosztanom veletek Virág egyik nagyon jó kis szövegdobozát. Tisztára beleszerettem. Nagyon tetszik és tök egyedi :) És még van az oldalán
Készítettem egy pro és kontra listát a G-Portál és a HTML oldalak javára is, hogy én hogyan látom a helyzetet. Mind a kettő féle honlapszerkesztésnek vannak előnyei és hátrányai
Ezekben a hetekben összegyűlt egy csomó .png képem, amiket ma feltöltöttem a galériába. Ezek az albumok frissültek:   Amanda Seyfried – új album 20db Beyonce – 8 darab Demi
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
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
996 megtekintés

Hozzászólások