background - újdonság CSS3-ban

Egy kód megírása során figyelnünk kell arra, hogy optimalizált legyen, az oldal gyorsan betöltődjön, hiszen manapság ha egy weboldal betöltődése több, mint 1-2 másodpercig eltart, a felhasználó azonnal odébb áll, hiszen gyakorta sok hasonló honlapot talál.
Egy weboldalnak esztétikus megjelenést kölcsönöz a megfelelő háttérkép kiválasztása, vagy egy szín, ami az oldal alapját adja. Új trendként elterjedt a színátmenetes háttérkép, melyhez már nem szükséges egy képet szerkesztenünk, mert CSS3-ban megoldották ezt a problémánkat, csakúgy, mint a több kép egyszeri kezelését is.
Kezdjünk egy kis ismétléssel. CSS-ben megadhatunk háttérszínt hexadecimális, RGB, vagy név megadással. (Az RGB megadás során negyedik paraméterben az áttetszőség adható meg.)

background-color: #0000ff;
background-color:(0,0,255);
background-color: blue;

Megadhatunk egy konkrét képet:

background-image:url('hatter.jpg');

Háttérkép esetén külön megadhatunk dolgokat, mint ismétlődjön-e a kép, illetve mely tengely mentén (repeat, x-repeat, y-repeat).

background-repeat: no-repeat;

Illetve megadhatjuk a pozícióját (center, top, bottom, left, right). Ezeket párba állítva is megadhatjuk, ekkor ez első érték bal, közép vagy jobb oldal, a másik érték, fent, középen, vagy lent. Ugyanakkor ezeket px-ben is megadhatjuk.

background-position: left top;

Ha body-nak adunk meg háttérképet, akkor beállíthatjuk azt is, hogy a kép mindig ugyanúgy ott maradjon, vagy a szöveggel együtt mozogjon (fixed, scroll).

background-attachment:fixed;

Ezeket egy sorban is meghatározhatjuk, így első paraméter lesz a szín, amit a kép hivatkozás követ, ezután a pozíció meghatározása, majd az ismétlődés megadása.

background: #0000FF url('hatter.jpg') center top no-repeat;

A CSS3 lehetőséget ad arra, hogy több háttérképet adjunk meg egy divnek, ezt nevezzük multi-backgroundnak.

background: url(bg1.png), url(bg2.jpg);

Emellett kódból meg tudjuk valósítani, hogy színátmenetes legyen egy háttér. Ehhez több sorban kell megadnunk az értékeket, hogy minden böngészőre hasson, illetve korábbi változatokra is.

firefox 3.6-tól érvényes
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);

Chrome,Safari4-től
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8));



Chrome10-től, Safari5.1-től
background: -webkit-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);


Opera 11.10-től
background: -o-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE10-től
background: -ms-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); 

W3C
background: linear-gradient(to bottom,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE 6-9
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 );

A sokféle megadás ellenére is érdemes egy alap színt meghatározni arra az esetre, ha valamely böngésző nem képes az átmenet megjelenítésére.

A képen nem ismétlődés miatt van középen egy erősebb sáv, a gradiens lett így meghatározva.
Remek segítség ehhez a http://www.css3generator.com/, melyben megadhatjuk a színeket és a kódot legenerálja a számukra.

További hasznos információkat a http://www.w3.org/TR/css3-background/ oldalon találtok.

Margin és padding - igazítás CSS-sel

Régebbi időkben elterjedt volt a táblázatos kialakítás, így egyszerű volt több oszlopos elrendezést kialakítani.

Ma a dobozmodellt használjuk egy oldal kialakításnál, mert a honlapon megjeleníteni kívánt elemek mindegyike téglalap alakú területet foglal el. W3C szabvány szerint igazíthatjuk a dobozon belül elhelyezkedő szöveget, ami azért is fontos, mert így a böngészők többsége jól fogja megjeleníteni a kívánt tartalmat. 

Adhatunk belső margót, paddingot. Ekkor a doboz keretétől toljuk el a szöveget. Megadási formája lehet:

• padding-top – felső belső margó
• padding-right – jobb belső margó
• padding-left – bal belső margó
•  padding-bottom – alsó belső margó

Vagy másképp: padding: 5px 10px 15px 20px; Ekkor egy sorban megadjuk az összes értéket a következő sorrendben: felső (5px), jobb (10px), alsó (15px), bal (20px). Amennyiben a felső és alsó, illetve a jobb és bal megegyezik, akkor elég azt a kettő értéket megadni: padding:5px 10px;
Az értéket mindig px-ben kell megadni.

A doboznak adhatunk külső margót is, ekkor egy másik doboztól való távolságát határozzuk meg. Megadási formája lehet:

•  margin-top – felső külső margó
•  margin-right – jobb külső margó
•  margin-left – bal külső margó
•   margin-bottom – alsó külső margó

Másképp is megadhatjuk, paddinghoz hasonló módon vagy 4 érték megadásával, a sorrend ugyanaz (felső, jobb, alsó, bal), ha pedig a két szemközti megegyezik, akkor két érték megadásával.

A következő egyszerű példánál látható a lényeg. Készítünk egy divet, melynek az alapot fogja szolgálni, tartalomnak nevezzük el. Ez a kiinduló dobozunk. Ebbe teszünk egy bekezdés <p></p> tagek között. 

HTML kód:

<body>

           <div class="tartalom">

                   <p>

                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum blandit leo at auctor. Aliquam scelerisque purus vel felis gravida id pellentesque lectus imperdiet. Aenean non neque nisl, eget vehicula nunc. Etiam eget purus felis. Maecenas consequat magna eu augue consequat iaculis. Etiam vitae enim lorem. Donec nibh nibh, vestibulum quis consectetur nec, cursus eget arcu. Etiam sed neque quis erat facilisis varius lobortis quis dolor.<br /><br />

                     </p>

            </div>

</body>

CSS kód:

.tartalom{

                width:600px;

                margin:0 auto;

}

.tartalom p{

                background:lightblue;

                padding:10px;

                margin:30px 10px;

                text-align:justify;

}

A tartalom divünk mérete 600px és középre igazítjuk margin: 0 auto-val. (HTML5-ben a <center></center> tagek nem érvényesülnek.) A szövegnek megadtunk egy 10px-es belső margót, ezt a lila szín jelzi az alábbi képen. A külső margó alul, felül 30px, jobbra, balra 10px, ezt a sárga szín szemlélteti.

Ezeket tudjuk használni szövegek és képek igazítása során.

Amennyiben egymás mellé helyezünk dobozokat, a külső margót hozzá kell számolni, mert gyakran amiatt csúsznak egymás alá a divek.

HTML5 űrlap

Minden weboldal elengedhetetlen kelléke egy kapcsolatfelvételi űrlap készítése. HTML5 által az adatellenőrzés sokkal könnyebbé vált, mert bevezetésre került az email és url, mely piros keretet kap az újabb böngészőkben, ha a felhasználó rosszul töltötte ki.
Az űrlap elemeket <form></form> közé tesszük. A form tagnek adhatunk name értéket. Az actiont általában üresen hagyjuk, ha ugyanabban a fájlban kezeljük az átadott értékeket. Amennyiben más fájlban, akkor annak neve kerül ide. A method POST, vagy GET értéket kap. (Ezt PHP keretein belül fogom részletezni).
Egy űrlapon belül megadhatunk egy-, vagy többsoros szöveges beviteli mezőket, legördülő listákat, vagy választókat, azon belül is ha egyetlen választ jelölhet be a látogató, akkor radiogombot használjuk, ha több válaszadási lehetősége van, akkor checkboxot.

<form name="mesterteam"  method="POST" action="">   
            <input type="text" name="nev" id="nev" placeholder="Neved"> 
            <input type="email" name="email" id="email" placeholder="E-mail címed" > 
            <input type="url" name="weblap" id="weblap" placeholder="Weboldal címed" > 
            <input type="tel" name="tel" id="tel" placeholder="Telefonszámod" > 
            <textarea name="uzenet" id="uzenet" placeholder="Ide írd az üzenetedet"></textarea> 
        <h3>Érdeklődés:</h3> 
        <select id="erdeklodes" name="erdeklodes"> 
            <option value="weboldal készítés">Weboldal készítés</option> 
            <option value="keresőoptimalizálás">Keresőoptimalizálás</option> 
            <option value="kódoptimalizálás">Kódoptimalizálás</option>  
            <option value="karbantartás">Karbantartás</option> 
        </select> 
        <h3>Sürgős:</h3> 
            <input type="radio" id="igen" name="surgos" value="igen"> 
            <label for="igen">Igen</label> 
            <input type="radio" id="nem" name="surgos" value="nem" checked="checked"> 
            <label for="nem">Nem</label>    
   
         <input type="reset" name="torles" id="torlogomb" value="Törlés"> 
        <input type="submit" name="kuldes" id="kuldogomb" value="Küldés"> 
   </form> 

Minden mezőnél fontos, hogy megadjuk a name attribútumot, mert azon keresztül tudunk hivatkozni rá az adatok feldolgozása során. Emellett ha formázni szeretnénk, megtehetjük id alapján, vagy class-t is adhatunk neki. A placeholder a kitöltendő mezőben jelenít meg szöveget.
Az input típusa lehet: text, email, url, tel.
A textarea több soros beviteli mező, rows és cols értékek megadásával tudjuk megadni a méretét. Ennek záró tagje is van, oda kell figyelni, hogy az input mezőkkel ellentétben ezt lezárjuk, valamint, hogy ne tegyünk közé sortörést, vagy üres szóközöket, mert az azt eredményezheti, hogy a mezőben nem a legelején fog villogni a kurzor.
A select mező által legördülő listát készíthetünk; ennek is meg kell adni a name változót. Értékeit option tagek között határozhatjuk meg.
Jelen esetben egy radio gombos választót mutatok be, de a checkbox is ugyanilyen elven működik. Alapértelmezetten a nem válasz van kijelölve, melyet a checked="checked" adtam meg.

Az űrlapok legfontosabb eleme a submit gomb, mert a formoknál ez indítja el a feldolgozást. A reset gomb törli az űrlapban megadott értékeket.

A későbbiek folyamán dizájnt is fogunk csinálni az űrlaphoz, ebben a részben csupán a html részt taglaltam.