A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó, Doktorandusz

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó

Vendégszerkesztők
Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

NetlogiC School Informatika Tanfolyamok

Kiscsoportos számítógépes tanfolyamok, gyakorlat orientált informatika oktatás, képzési hírek, ingyenes tutorialok. Képzések munkalehetőséggel: AutoCAD-Műszaki Tervező, Webdesigner, Webprogramozó, Webes-és nyomdai grafikus (Corel, Photoshop, Kiadványszerkesztő), ArchiCAD Tervező, Valamint irodai tanfolyamok: Excel, Word, Office képzés Pécsett.

A blog szerzői

A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó, Doktorandusz

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó


Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

Bejegyzések

Friss topikok

Címkék

! (1) 201 (1) 2010 (3) 2011 es (1) 2012 (2) 2d (1) 2 3D autocad tanfolyam (1) 3d (3) a (1) ablak (1) access (1) adatbázis (1) adatmentés (2) adobe (13) agytröszt (1) ajándék (2) akció (4) akkreditált (3) akkreditált php képzés Baranya megye (1) akkreditált PHP webprogramozó tanfolyam (4) akkreditált tanfolyam (2) akkreditált webdesigner képzés (4) akkreditált webdesigner tanfolyam Pécsett (4) akkreditált webdesign oktatás (4) alkalmazása (1) alkalmazások (2) államilag (1) álláslehetőséggel (13) angol magyar bizonyítvány (5) animáció (1) animációs (1) animálás (1) aranymetszés készítése photoshopban photoshop tanfolyam Pécsett photoshop oktatás webgrafikus képzés webgrafika oktatás Pécs (1) archicad (6) arcképből (1) áron (1) artist (1) arvchicad (1) autocad (9) autocad 2 3D (2) autocad oktatás Pécs Baranya (4) autocad tanfolyam (4) autocad tanfolyam Pécsett (2) baranya (37) Baranya megye (9) basic (4) blogmotor (1) böngészőkre (1) budapest (9) budapesten (2) cad (5) cad modellező tanfolyam (1) captcha (1) cd (1) cégeknek (1) céges (2) cikkek (1) cms (1) corel (8) corelben (4) coreldraw (34) CorelDraw tanfolyam Pécsett (4) cover (1) csm (1) css (3) css3 szabvany animációs lehetőségei (1) dátumok (1) designer (1) dimenziós (1) díszek (1) doboz (1) draw (2) dreamweaver (2) effektek (1) effektekkel (2) effektusok (2) egyetemistáknak (1) elismert (1) emelt (2) építésze (1) építészeti (2) és (1) excel (5) e business (2) fedlap (1) felbukkanó (1) felhasználóbarát (1) felirat (1) feliratkészítés (1) felirattal (1) felnőttképzés (56) felnőttképzés felnőttoktatás (5) felnőttoktatás (48) fényképek (1) flash (5) formázási (1) fotók (2) fotózás (1) frontpage (1) galéria (1) galéria készítés weboldalra (1) generátorral (1) geometria (1) gif (1) grafika (53) grafikai (6) grafikával (2) grafika képzés (4) grafika mester képzés (7) grafikus (35) grafikus tanfolyam (2) gragfika (2) gyakorlat (4) gyakorlatias (1) gyakorlat oreintált informatika tanfolyam (5) gyakorlat orientált (4) gyakorlat orientált felnőőtképzés (8) gyakorlat orientált képzés munkalehetőséggel (8) gyakorlat orientált oktatás (1) hálózatfejlesztés (2) happy (1) három (1) hatás (2) hiba (1) honalpkészítő (1) honlap (4) honlapkészítés (26) honlapkészítő (14) honlapkszítő (1) honlapoptimalizálás (1) honlapra (1) htaccess (1) hűsítő (1) húsvét (1) illustrator (1) Illutrator tanfolyam webgrafikus oktatás nyomdai grafika képzés Pécsett képek színezése (1) indesign (2) induló (1) informatika (52) informatikanyomdai (1) informatika képzések (3) informatika oktatás Pécs (2) ingyen (3) ingyenes (1) ingyenhonlapkészítés (1) internet (6) internetes (1) inygen (1) irodai (1) január (1) januári (1) javítása (2) jelölőnégyzetek (1) jelszóvédelem (1) joomla (1) jövő (1) karácsonyi (2) karikatúra (1) kedvezmény (2) kedvezményes (4) képek (4) képkeretezés (1) képzés (80) képzésanimációs (1) képzések (13) képzés munkalehetőséggel (1) keresőmarketing (9) keresőoptimalizálás (8) készítés (9) készítése (12) készítő (2) kezdéssel (1) kezelése (1) kiadványszerkesztés (1) kiadványszerkesztő (3) kihelyezett (3) kiscsoportos (4) kiscsoportos informatika oktatás (3) kóddal (1) könnyedén (1) kontrasztjának (1) kördiagram (1) körvonalazás (1) középiskolásoknak (1) last (1) layer (1) lebegő (1) lehetőségek (1) letölthető (1) létrehozása (1) lightbox galéria készítése (1) linklista (1) linkmarketin (1) linkmegosztók (1) marketing (9) megelőzése (1) megjelenítése (2) meglepetés (1) megoldások (1) megye (16) megyében (1) menü (1) menükészítés (2) mester (5) mikulás (2) minute (1) modellezés (2) munka (2) műszaki (2) műszaki rajzoló oktatás (2) műszaki tervező képzés (2) myqql (1) mysql (6) napakció (1) navigációs (1) névjegykártya (1) növelése (1) nyári (3) nyomadai (1) nyomdai (9) nyomdai-webes grafika oktatás Pécsett (1) offce (1) office (1) oktatáas (3) oktatas (9) oktatás (93) oktatás tanfolyam Baranya megye (10) online (9) orientált (3) országosan (3) padlóáras (4) padlóáron (1) pályázatíró (1) pécs (44) pécsett (10) Pécsett (2) pendrive (2) perspektivikus (1) pest (4) photoshop (37) Photoshop-CorelDraw tanfolyam Baranya (3) photoshopban (7) photoshop képzés Pécs (1) phottoshop (4) php (30) php és webdesigner képzések (6) plakátkészítés (1) popup (1) powerpoint (1) prgrammal (1) prhotoshop (3) probléma (1) professzionális (5) professzionális nyomdai webes grafikus tanfolyam (4) program (2) programmal (4) programozása (1) projektmenedzser (1) projektmenedzsment (1) rajzolás (2) rajzoló (1) ranfolyam (1) rendszerek (2) retusálás (1) retusálása (2) rugalmas időbeosztással (2) sablon (1) saját (6) sáv (1) scriptekkel (1) segítségével (2) sikerszakmák (2) sminkelés (1) stíluslapok (1) summer (1) szakma (2) szakmavonal (1) szám (1) számítástechnika (32) számítástehcnika (2) számítógép (11) számítőgépes (3) számítógépes (25) számítógépes tanfolyam Baranya megye (4) számítógépes tanfolyam Pécs (5) számítógéppel (2) szeptember (1) színek (1) szintű (2) tábor (1) támogató (1) támogatott (2) tanácsadás (2) tandíjkedvezményes (5) tandíjkedvezményes autocad tanfolyam nyáron (1) tandíjkedvezményes informatika képzések (2) tandíjkedvezményes informatika tanfolyam (1) tandíjkedvezményes képzés nyáron (2) tanfolyam (91) tanfolyamok (23) tanfolyam gyakorlat orientált (2) tanulmány (4) tartalmak (1) tartalomkezelő (1) térbeli (2) tervezés (5) tervező (4) tervezői (3) tippek (3) tnfolyamok (1) torzítás (1) tuti (2) tutorial (1) üdítős (1) űrlapkezelés (2) valentin (1) vállalati (3) vállalkozás (1) védelem (3) védelme (1) védelmi (2) végzettség (3) vírusírtás (2) vírusirtás (2) visual (4) visual basic (1) vizes (1) vonalas (1) web (1) webdesginer (6) webdesign (31) webdesigner (42) webes (4) webfejlesztés (1) webgrafika (21) webgrafikus (11) webkamera (1) webkatalógusok (1) weblap (2) weblapkésíztés (2) weblapkészítés (26) weblapkészítéshez (1) weblapkészítési (1) weblapkészítő (32) weblapra (1) weboldal (15) weboldal készítés (9) webprogramozás (30) webprogramozás oktatás Pécsett munkalehetőséggel (12) webprogramozó (30) webprogrmaozás (5) word (3) wordpress (3) zajtalanítás (1) Címkefelhő

Oldal háttér kitöltése vonalas mintával a weboldalon

2013.02.25. 10:36 oktatas_szamitogepes_tanfolyamok

Ákos mai cikkében egy megvalósítási lehetőséget mutat be a vonalas háttérminták készítésére. A megoldás a canvas HTML 5 objektumot használja, így a kompatibilitás a régi böngészők felé nem megoldott.

Példa megoldás:


Patternizer példa oldal ( patternizer.zip )


A támogatott böngészők:

(Kompatibilitás Forrás: http://caniuse.com/#search=canvas)

A megoldás két fő részből tevődik össze:

    1. Letöltő oldal:

https://github.com/matthewlein/patternizer.js

 


Letöltő oldal

Itt a patternizer.js, vagy a patternizer.min.js fájlok szükségesek. A readme.md állományban példa kód található, amit az oldalba kell el helyezni.

1.1. A script állományt az oldalhoz kell csatolni:

<script src="patternizer.js"></script>

A head-ben kell elhelyezni, természetesen figyelni kell a helyes útvonalra.

1.2. Az alábbi CSS beállítások szükségesek a head-be, vagy külső CSS állományba:

<style>

/* szükéges */

#bgCanvas {

position: fixed;

}

/* szükéges */

.wrapper {

position: absolute;

left: 0px;

right: 0px;

margin: 0px;

padding: 0px;

}

/* saját oldalelrendezés kialakítása */

.content-wrapper {

width: 920px;

margin: 40px auto;

padding: 30px;

background-color: #fff;

}

/* Ez a rész csak akkor kell, ha 0 margót és paddingot akarunk az oldalunknak*/

body {

margin: 0px;

padding: 0px;

}

</style>

1.3. A HTML dokumentum kialakítása:

<body>

<canvas></canvas>

<div class="wrapper">

<div class="content-wrapper">

Ide jön a HTML oldal elrendezés

</div>

</div>

</body>

1.4. A  readme.md állományban az alábbi példakód található:

var bgCanvas = document.getElementById('bgCanvas');

bgCanvas.patternizer({

stripes : [

{

color: '#ffb4d5',

rotation: 45,

opacity: 80,

mode: 'normal',

width: 30,

gap: 10,

offset: 0

},

{

color: '#3a83d6',

rotation: 200,

opacity: 50,

mode: 'plaid',

width: 10,

gap: 10,

offset: 0

}

],

bg : '#ffffff'

});

 

Ezt ki kell egészíteni a <script>   példakód  </script> elemekkel és a HTML dokumentumba a </body> elé kell beszúrni. A zölddel jelzett rész tulajdonképpen a minta kialakítása.

A minta kialakítását legegyszerűbben a http://patternizer.com oldalon lehet megtenni.


Célszerűbb az előző állomány helyett a példakódot átalakítani, mert az ablak kezelése a fenti kódban még nincs benne.

Átalakított kód:

<script>

var bgCanvas = document.getElementById('bgCanvas');

function render() {

bgCanvas.patternizer(

{

stripes : [

{

color: '#ffb4d5',

rotation: 45,

opacity: 80,

mode: 'normal',

width: 30,

gap: 10,

offset: 0

},

{

color: '#3a83d6',

rotation: 200,

opacity: 50,

mode: 'plaid',

width: 10,

gap: 10,

offset: 0

}

],

bg : '#ffffff'

});

}

// A canvas átméretezése a böngészőablak méretére

function onResize() {

// number of pixels of extra canvas drawn

var buffer = 100;

// if extra canvas size is less than the buffer amount

if (bgCanvas.width - window.innerWidth < buffer ||

bgCanvas.height - window.innerHeight < buffer) {

// resize the canvas to window plus double the buffer

bgCanvas.width = window.innerWidth + (buffer * 2);

bgCanvas.height = window.innerHeight + (buffer * 2);

render();

}

}

function init() {

onResize();

// eseménykezelő az ablak átéretezésekor, a kitőltést az új mérethez igazítja

// cowboy's throttle plugin keeps this event from running hog wild

window.addEventListener('resize', Cowboy.throttle(200, onResize), false);

}

init();

</script>


Jó gyakorlást kívánunk!


Legyen ott a március végén induló Akkreditált Webdesigner Mester tanfolyamon, és szerezzen államilag elismert, akkreditált  Webdesigner végzettséget!

A képzés elvégzése után álláslehetőségekkel segítjük abban, hogy dolgozni is tudjon az adott szakmában!

Kiscsoportos képzés kétnyelvű (angol-magyar) akkreditált bizonyítvánnyal, részletfizetési lehetőséggel, állásajánlatokkal a képzés végén!

Jelentkezzen az induló csoportba legkésőbb március 18-ig!


Jelentkezzen a szintén március végén induló
Akkreditált Web Artist kombinált tanfolyamra
, és szerezzen Webdesigner és Webprogramozó végzettséget egyetlen képzés alatt!

Induló Web Artist képzésünkre március 18-ig foglalhatja le a helyét!


Jelentkezzen itt, vagy bármelyik másik elérhetőségünkön!



Várjuk szeretettel márciusi képzéseinkre!

NetlogiC School Informatika Szakképző Iskola
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net

 

Szólj hozzá!

A bejegyzés trackback címe:

https://oktatas-szamitogepes-tanfolyamok.blog.hu/api/trackback/id/tr335254791

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.
süti beállítások módosítása