Kezdőlap > CSS3, HTML 5 > CSS 3

CSS 3

2011. május 2. hétfő Hozzászólás Go to comments

A CSS3 (Cascading Style Sheets) egy stílusleíró nyelv, amellyel HTML vagy XHTML típusú dokumentumok megjelenését tudjuk leírni.  A CSS-t a W3C felügyeli 1997 óta. A CSS 2-t 1998-banimage implementálták, de csak jóval később kezdték el a böngészők használni, ráadásul a CSS összetettsége miatt a böngészők máshogy értelmezték és ez a web fejlesztés mai állapotára is hatással volt. A CSS 2.1 ennek a probléma kiküszöbölésére született, de még ezzel is több probléma volt. Mindenestre egyszerűsítettek rajta.

A W3C tanulva a CSS előző változatainak hibáiból, a CSS3-at modularizálttá tették. Ez azt jelenti, hogy a funkciókat modulokra bontották, így a böngészők ezeket csomagokban tudják megvalósítani, vagy akár ideiglenesen figyelmen kívül is hagyhatják. A különböző böngésző gyártók ezt már komolyan vették, és immár minden nagyobb böngésző a jelenlegi szabványnak megfelelően jól implementálja a CSS3 szabványt. Ráadásul, a CSS3 fejlesztése is nyíltabb is lett, bárki véleményt formálhat a fejlesztés mikéntjével kapcsolatban.

Összességében elmondható, hogy a CSS3-tól várja azt a fejlesztői közösség, hogy végre a lehető legtöbb böngészőn helyesen jelenjen meg az oldal kinézete.

Ismerkedjünk is meg néhány érdekesebb CSS3 újdonsággal.

Border

Az IE9 -ben a CSS3 segítségével immár nem csak téglalap alakú kereteket határozhatunk meg. Megadhatunk akár nem szokványos keretet is, aminek az oldalai le vannak például kerekítve.

CSS3 Border Radius elemei:

·         border-radius

·         border-bottom-left-radius

·         border-bottom-right-radius

·         border-top-left-radius

·         border-top-right-radius

Nézzünk egy apró példát erre.

Készítsünk egy szabványos HTML5 dokumentumot, majd a body tagbe vegyünk fel egy div –et aminek az id-ja a MyBorder legyen.

<div id="MyBorder">

Itt valami nagy dolog készül!

</div>

 

A header részébe tegyük bele az alábbi stílust. Itt meghatározzuk, hogy mekkora legyen maga div, a keret, a keret színe és stílusa. Valamint a CSS első sorában a radius-át határozzuk meg.

<style>

       #MyBorder

       {

              border-radius: 100px 66.66px 200px 50px;

              border: 8px green double;

              padding: 24px;

              width: 400px;height: 125px;

       }

</style>

Az eredmény pedig a következő lesz:

image

Szín modell

Az Internet Explorer 9 támogatja a CSS3 szín modell kezelését. Támogatást nyújt RGBA, HSL és HSLA szín modellekre.

Maradjunk az előző példánál és a stílushoz adjuk hozzá a következő sort:

background-color:rgba(255,0,0,0.5);

Itt RGBA modell segítségével adtuk meg az adott elem háttér színét. De ez meghatározhatjuk ilyen formában is:

background-color: rgba(100%,0%,0%,0.5);


Ha már szín modellek, akkor a grafikában jól ismert HSL színmodell is támogat az Internet Explorer 9. (HSL = Hue Saturation Lightness) Többen szín keréknek vagy szín gyűrűnek ismerik. Ahol a 0 és 360 fok a piros, a 120 fok zöld a 240 pedig a kék szín reprezentálja.

A fentebbi példa HSL megadásával a következőképpen néz ki

background-color: hsl(0,100%,50%);

Ezen kívül létezik még HSLA, ami annyiban különbözik a sima HSL-től, hogy van egy alpha csatornája, amivel az áttetszőséget tudjuk befolyásolni. Ez az érték 0.0 és 1.0 között lehet. A 0.5 jelenti az 50%-os áttetszőséget.

background-color: hsla(0,100%,50%,0.5);

Az eredmény a következőképpen néz ki: (A HSL-nél nincs alpha csatorna, ott csak piros a háttérszín)

image

Multi-background

A CSS3-ban bevezetésre került a Multi-background tulajdonság, amivel egyszerre több kép is lehet az adott elem háttere.

A feladat elvégzéséhez szükséges képeket innen lehet letölteni.


Készítsünk egy új szabványos HTML5 dokumentumot.

A HTML dokumentum mellé másoljuk be a letöltött képeket.

A headerbe írjuk az alábbi stílust. (Figyeljük meg a background-image tulajdonságot)

<style>

       div

       {

              width: 400px;

              height: 180px;

              padding: 10px 10px 10px 10px;

              background-color: #a0e0ff;

              background-image: url(redball.png), url(bluesky.png);

              background-position: 30px 50px, 0 0;

              background-repeat: no-repeat, repeat-x;

       }

}

A body részhez meg adjuk a következő div elemet.

<div>

  Hello CSS3

</div>

Az eredmény a következő lesz:

image

Ez már egész látványos dolog. De ha arra gondolunk, hogy egy RIA alkalmazásnál sokszor a háttér animálva szokott lenni akkor még messze vagyunk tőle.
Vagy mégse? A HTML5 és CSS3 ugyanis nagyon erős páros lett, így ezt a feladatott is egyszerűen meg tudjuk oldani vele.

Cseréljük le a fentebb definiált stílust az alábbi stílusra. (Ebben az esetben 4 képet adunk meg a háttérnek)

<style>

       div

       {

       width: 400px;

       height: 180px;

       padding: 10px 10px 10px 10px;

       background-color: #a0e0ff;

       background-image: url(grass1.png), url(redball.png), url(tree1.png), url(clouds1.png), url(bluesky.png);

       background-position: 0 0, 30px 50px, 0 0, 0 0, 0 0;

       background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;

       }

}

 

      

</style>


A divnek pedig adjuk meg az animatedback id-t.

<div id="animatedback">

Hello CSS3

</div>

Ha most elindítjuk az oldalt akkor az alábbi kép div element fog minket fogadni. Ez egész kellemes, de a labda és a környezet még mindig nem mozog. Valahogy mozgásra kell bírnunk.

image

Ezt legegyszerűbben JavaScriptből tudjuk megtenni. A Div element alá tegyük be az alábbi JavaSciprtet. Ez a script felelős azért, hogy a háttérnél a képek megfelelően mozogjanak.

<script type="text/javascript">

       var ball_y = 30;

       var ball_dir = 1;

       var clouds_x = 0;

       var grass_x = 0;

       var tree_x = 0;

       function ani_loop() {

              clouds_x = clouds_x – .2;

              tree_x = tree_x – .7;

              grass_x = grass_x – 1;

              ball_y = ball_y + ball_dir;

              if (ball_dir > 0  &&  ball_y > 150) {

                     ball_dir = -ball_dir;

                     ball_y = 150;

              }

              if (ball_dir > 0) {

                     ball_dir = ball_dir * 1.0312;

              }

              if (ball_dir < 0) {

                     ball_dir = ball_dir * 0.97;

              }

              if (ball_dir < 0  &&  ball_dir > -0.15) {

                     ball_dir = -ball_dir;

              }

              document.getElementById(‘animatedback’).style.backgroundPosition = grass_x+‘px 0, 30px ‘+ball_y+‘px, ‘+tree_x+‘px 0, ‘+clouds_x+‘px 0, 0 0’;

              t = setTimeout(‘ani_loop()’,10);

       }

       ani_loop();

</script>

 

Az eredmény pedig egy látványos div element lesz. Ne feledjük, hogy az egész oldalunk hátterét tudjuk a segítségével befolyásolni! Bármit megvalósíthatunk vele. A legszebb dolog pedig, hogy az Internet Explorer 9 révén grafikus gyorsítást is kap. Így az animációk még gördülékenyebben játszódnak le.

image

Opacity

Immár bevezetésre került az opactiy tulajdonság is, amivel meghatározhatjuk az adott elem mennyire legyen áttetsző. Ez az érték 0.0 és 1.0 között lehet. De akár kifejezhető százalékban is.

A következő példa az opacity tulajdonsággal játszik egy-egy div elementnél. (25×125 pixel a div)

<div class="opacity_sample">

    <div style="background: navy; opacity: 0;"></div>

    <div style="background: navy; opacity: 0.2;"></div>

    <div style="background: navy; opacity: 40%;"></div>

    <div style="background: navy; opacity: 0.6;"></div>

    <div style="background: navy; opacity: 80%;"></div>

    <div style="background: navy; opacity: 1;"></div>

</div>

Az alábbi apró kódrészletnek ez lesz az eredménye:

image

Fonts Modul

Az Internet Explorer 9 a CSS3 -ban definiált új font modell-t is támogatja, valamint támogatja még a Web Open Font Format (WOFF) és a Raw Fontokat is.

A font-weight, font-size tulajdonság az Internet Explorer 9 frissítve lett, így már a CSS3 szabványnak megfelelően használhatjuk.

De ez még nem lenne érdekes. Lehetőségünk van font linkelésre a @font-face szabály segítségével. Ennél a szabálynál meghatározhatjuk, hogy töltse le az adott fontot a megfelelő url-ről, majd ha ez megvolt, akkor már fel is használhatjuk az oldalunkon.

@font-face {

   font-family: MyFont;

   src: url(http://mysite/fonts/MyFont.ttf)

      format("embedded-opentype");

}

p {font-family: MyFont, serif; }

 

Reklámok
Kategóriák:CSS3, HTML 5
  1. Még nincs hozzászólás.
  1. 2011. május 23. hétfő - 14:40

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: