Á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:
-
- 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
