2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
259 napja
675 néző

WordPress themes

WordPress themes
260 napja
196 néző

G-Portál themes

G-Portál themes
260 napja
112 néző

Tumblr themes

Tumblr themes
260 napja
162 néző

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 #;
}


1 255 megtekintés

Hozzászólások