CSS3: néhány technika
Szerző: Gergő | CSS | 2009 September 11. 23:28

11 Sep 3

Sok fejlesztő álma vált valóra a CSS3-nak köszönhetően, ugyanis rengeteg olyan dolgot lehetővé tett, melyek eddig csak képek segítségével voltak megvalósíthatóak. Ilyen például a színátmenet, a lekerekített sarkok, a betűk árnyéka, a keret mintázata. Ez a cikk ezeknek a CSS3 beli megvalósítását mutatja be.

1. Lekerekített sarkok

Egyike a leggyakrabban alkalmazott grafikai “effektnek”, amit eddig vagy táblázattal és képekkel, vagy javascript segítségével oldottunk meg. Mindjárt meglátjuk mennyivel kevesebb kódból megoldható a CSS3 módszer, mint a javascriptes.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').corners('10px');
});
</script>
<div class="box">
	<!--CONTENT-->
</div>

Ez a JQuery keretrendszer, Corners pluginját használja. Maga a JQuery könyvtár tömörítve nagyjából 19Kb, ehhez még hozzájön a Corners és a kód.

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Amint látható, ez mindössze 3 sor. Igazából csak 1 sor lesz, ha a böngészők áttérnek a szabványra. -webkit a Safari és Chrome szabványa, -moz pedig a Gecko alapú böngészőké, mint például a Firefox.

2. Doboz árnyékolás

Én minden oldalamnál használtam valahol az elemek árnyékolását, hogy kicsit kiemeljem őket az egyhangú 2D-ből. Ehhez vagy előre elkészített árnyékot adtam háttérként az elemeknek, vagy pedig egy másik JQuery plugint használtam ami pont erre lett kitalálva.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').dropShadow({
		left: 5,
		top: 5,
		opacity: 1.0,
		color: 'black'
	});
});
</script>
<div class="box">
	<!--CONTENT-->
</div>

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Az első érték a dobozhoz viszonyított vízszintes pozíció, a második a függőleges. A harmadik érték az elmosódást adja meg, ha 0 akkor éles lesz az árnyék, ha ennél nagyobb akkor egyre lágyabb. A negyedik az árnyék színe.

3. Szöveg árnyék

Hasonló a doboz árnyékoláshoz, nagyon megnyerő hatást lehet vele elérni!

Hagyományos CSS módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
	<span class="font">The quick brown fox jumps over the lazy dog.</span>
	<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Egy lehetséges megoldás ha a szövegből 2 példányt készítünk, és a másodikat az elsőre pozicionáljuk 1px eltéréssel, és más színnel. A hátránya, hogy ha a CSS valami miatt nem tölt be, minden szöveget duplán látunk.

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

Egy bónusz a CSS3 módszernél, hogy az elmosódás segítségével tényleg olyan hatás hozható létre ami eddig csak képekkel volt elérhető.

4. Saját betűkészlet

A CSS3 mostantól ezt is lehetővé teszi, így nem csak a felhasználó gépén lévő betűkészletet használhatjuk, hanem a saját tárhelyünkre feltöltötteket is.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
	Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

Ugyan eddig is megoldható volt JQuery segítségével, viszont ez jelen esetben is több mint 19Kb

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

Létrehozunk egy font family-t a betütípus helyének megadásával, ettől kezdve bárhol használhatjuk a CSS-en belül.

5. Opacity – áttetszőség

Áttetszőséget ezelőtt is lehetett alkalmazni képeknél, azonban az IE miatt 3 sorban kellett ezt definiálni.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.

<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Most már elég egy sor is ehhez. Bár mindenhol képesek lennének közös szabványhoz alkalmazkodni…

6. RGBA

Amennyiben nem képet szeretnél átlátszóvá tenni, hanem egy általad létrehozott hátteret, megspórolhatsz egy sort ennek a CSS3 tulajdonságnak a segítségével.

Hagyományos módszer PHP és CSS

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

Majd pedig CSS-ben meghívjuk:

1.
2.
3.
4.
5.
6.
7.
8.

<style type="text/css">
.box {
background: url(rgba.php?r=239&#038;g=182&#038;b=29&#038;a=.25);
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Egyszerűbb? :)

7. Több háttér

Sokan hozunk létre tartalom nélkül új DIV-eket, pusztán azért hogy megjeleníthessünk háttérként egy kívánt képet. Ilyen hely tipikusan a fejléc, vagy az oldal lábléce, ahol mostantól nem kell felesleges tárolókat definiálni, hála a CSS3-nak.

Hagyományos módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
	.box2 {
	width: 100%;
	height: 100%;
	background: url(images/text.png) center center no-repeat;
	}
</style>
<div class="box">
	<div class="box2">
		<!--CONTENT-->
	</div>
</div>

Ahogy a legtöbben megszoktuk, két div saját háttérrel.

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Nagyon egyszerű és ötletes, az egyetlen hátránya, hogy egyelőre csak Safari alatt működik.

8. Oszlopok

Szép újság szerű hatást lehet elérni ennek segítségével, mivel a példában szereplő DIV bekezdéseit hasábokra darabolja.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
	$('.columns').columnize({
		columns: 2
	});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Ismét JQuery, és egy erre szolgáló plugin.

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

9. Keret kép

A kép keret megszokottabb szó igaz? :D De van ilyen is, a kereteknek eddig csak előre meghatározott /double,dotted,…/ mintákat adhattunk meg, azonban mostantól tetszőleges képpel vehetjük körbe elemünket.

Hagyományos javascript módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
	$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Egy kicsit hosszú lenne a használatát itt részletezni, erről később írok egy külön cikket, azonban ha értesz angolul, elolvashatod a W3 oldalán.

10. Animáció

Aki egy kicsit is jártas JavaScriptben, az lehet hogy eddig is tudott csinálni egyszerűbb animációkat. A CSS3 ezek kiváltására szolgál a Webkit alapú böngészőkben, ezért egy JQuery-s példát is mutatok.

Hagyományos JQuery módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').hover(function(){
		$(this).stop().animate({
			top: '20px'
		}, 300);
	}, function(){
		$(this).stop().animate({
			top: '0'
		}, 300);
	});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Ha az egeret az elem fölé húzzuk, 20px-t lecsúszik, majd az egér elvitelekor ismét felkúszik az alap állapotba.

CSS3 módszer

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
	<!--CONTENT-->
</div>

Ne feledd, csak Webkit alapú böngészőben működik /Chrome, Safari/.

Összegzés

Ez 10 hasznos CSS3 megoldás volt, remélhetőleg minél hamarabb alkalmazkodnak a böngészők a szabványhoz, persze még akkor sem támaszkodhatunk rájuk teljesen, hisz a korábbi böngészőkkel valószínűleg nem fognak működni. Én nem is engedném a böngészőt elinditani amíg a legfrissebb verziót nem telepítettük, feltéve hogy online a gép. Mi a véleményetek?

Kapcsolódó cikkek

10+ hasznos CSS trükk
Üzenetdobozok formázása CSS-sel
Trükkös input css segítségével
CSS Sprite

Hozzászólások

  • Predator47

    Üdv!
    Nagyon szép kis leírás (főleg, hogy egy két Jquery plugint is ki lehet lesni belölle). Annyit megjegyeeznék, hogy az IE 6 még mindíg az eggyik leggyakoribb netböngésző, így annak aki webdesignal foglalkozik a CSS3 még egy várva várt álom lessz. de ugye a remény hal meg utoljára… ;)

  • http://pszichologia.com kashmir

    Jó kis összefoglaló, köszönjük!

    Predator47:Az én oldalam látogatóinak 5.7%-a használ IE6-ot, további 7% IE7-et, 50%+ Firefoxot. És nem egy technikai oldal.

  • BlackWay

    Nagyon tetszik a cikk…
    Ennek még nagy hasznát fogom venni…
    Meg nem is tudtam hogy css3 már ezekre is képes :)
    Nem igazán volt még időm utána nézni, de most megtörtént…
    Kössz !!!

Email címem

Pacher Márkus fotós | Internetes könyvtár | Internetes osztálynapló | Teleki kollégium