CSS3 text effects

Egy kis kimaradás után, a CSS3 témakörben hoztam nektek egy újabb cikket. Az előzőekben bemutattam nektek a keretezésben rejlő lehetőségeket, most nézzük meg, hogy a szövegeinkkel mit tudunk tenni, hogy még szebbek és látványosabbak legyenek. A CSS3 és már elődei is számos szöveg effekttel rendelkeztek. Egy két a régebbiek által támogatott tulajdonság is bekerült a cikkbe, de főként az újdonságokra próbálom a hangsúlyt fektetni. Nézzük mik az alapvető eszközeink és hogyan tudjuk őket használni.

1. Text-shadow

Szerintem talán az egyik legjobb újdonság, hiszen az árnyékok nagyon fel tudják dobni a weboldalainkon elhelyezett szöveget. Persze, mint mindent ezt sem szabad túlzásba vinni. Lássuk, hogy használjuk:

CSS3 text-shadow effect

CSS3 text-shadow példa

 text-shadow: h-shadow v-shadow blur color; 

Ahogy látható, maga az utasítás nem túl bonyolult.

  • h-shadow – vízszintes elhelyezkedés
  • v-shadow – függőleges elhelyezkedés
  • blur – “folt” hatás
  • color – vetett árnyék színe

Lássunk egy nagyon egyszerű példát.

<!DOCTYPE html>
<html>
<head>
<title>CSS3 text-shadow 1.0</title>

<style type="text/css">
h1 {
text-shadow:2px 2px #424242;
}
</style>

</head>
<body>
<h1>CSS3 Text-shadow effect</h1>
<p><b>Megjegyzés:</b> Az Internet Explorer jelenleg nem támogatja.</p>
</body>
</html>

A CSS3 text-shadow példa itt elérhető.

A következő példában egy picit bonyolultabb, de nem túl bonyolult 3D hatású effektet szeretnék nektek bemutatni. Ezt úgy érjük el, hogy a text-shadow megengedi, hogy több árnyékot csatoljunk egyetlen szöveghez, ezt úgy tehetjük meg, hogy vesszővel választjuk el a különböző paramétereket.

3D text-shadow CSS3-al

3D text-shadow CSS3-al

A példában az rgba definíció is szerepel, hogy jobban ki tudjuk emelni a betűket, illetve a jobb 3D hatás kedvéért. Ezt már egy előző cikkben bemutattam nektek. Akkor most nézzük a CSS3 3D text példát:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D Text-Shadow</title>

<style>
body
{
background:#424242; /*háttér szín*/
}
#wrapper{ /*a szöveg elhelyezkedését definiáljuk itt*/
width:900px;
height:500px;
padding:60px 10px 0 10px;
margin:0 auto;
text-align:center;
}
#wrapper h1{
font:normal 70pt Arial;
color:#FFFFFF;
text-shadow: /*több paramétert "több árnyékot" is definiálhatunk*/
0 1px 0 #ccc,
0 2px 0 #ccc,
0 3px 0 #ccc,
0 4px 0 #ccc,
0 5px 0 #bbb,
0 6px 1px rgba(0,0,0,.2), /*átlátszóság érdekében*/
0 0 5px rgba(0,0,0,.2),
0 1px 3px rgba(0,0,0,.4),
0 3px 5px rgba(0,0,0,.3),
0 5px 10px rgba(0,0,0,.3),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.2);
}
#wrapper p{
font: normal 20pt Arila;
color: #ffffff;
}
</style>

</head>
<body>
<div id="wrapper">
<h1>CSS3 Text-Shadow</h1>
<p>Egy viszonylag szép 3D-s hatású text-shadow példa, de sajnos az IE nem támogatja!</p>
</div>
</body>
</html>

A 3D text-shadow példát itt meg tudod tekinteni.



2. Text-overflow

Ismét egy új lehetőség, ami a CSS3-ba került bele, gyakorlatilag arra tudjuk használni, hogy definiálhatjuk vele, mi történjen, ha egy megadott elemméretnél hosszabb szöveg kerül a dobozunkba. Használata:

text-overflow: clip|ellipsis;
  • clip – gyakorlatilag kitölti a rendelkezésre álló helyet, nincs vágás
  • ellipsis – Megvágja a szöveget és három db pont kerül mögé

Nézzünk rá egy nagyon egyszerű példát:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 text-overflow</title>
<style type="text/css">
div.test
{
width:13em;
white-space:nowrap;
border:1px solid #000;
overflow:hidden;
}
</style>
</head>
<body>

<div class="test" style="text-overflow:ellipsis;">Ellipsis változat, ami nem fér a dobozba</div>
<div class="test" style="text-overflow:clip;">Clip változat, ami nem fér a dobozba</div>

</body>
</html>

A példát itt meg tudjátok nézni.

3. Word-wrap

Szótőrés, nem nyelvtörés senem botlás, egyszóval erre jó. A példa egyértelművé teszi majd. Lássuk a syntax-ot:

word-wrap: normal|break-word;
  • normal – nem töri a szöveget
  • break-word – a méretekhez igazítva töri
<!DOCTYPE html>
<html>
<head>
<title>CSS3 word-wrap</title>
<style type="text/css">
p.break
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
p.normal
{
width:11em;
border:1px solid #000000;
word-wrap:normal;
}

</style>
</head>
<body>
Break-word opcióval:
<p class="break"> Ez egy rettenetesen hosszú szöveg és szó: megszentségteleníthetetlenségeskedéseitekért. Lássuk hogy ezt hogy is fogja megtörni a word-wrap.</p>
normal opcióval:
<p class="normal"> Ez egy rettenetesen hosszú szöveg és szó: megszentségteleníthetetlenségeskedéseitekért. Lássuk hogy ezt hogy is fogja megtörni a word-wrap.</p>

</body>
</html>

A CSS3 word-wrap példa itt megtekinthető.

4. Inset text árnyékolás

Sokan kértétek még az inset-et tárgyaló cikk után, hogy külön erről is lehetne írni és érdemes volna megjelentetni, mert nagyon szép dolgokat lehet vele csinálni. Én most egy nagyon egyszerű példát hoztam nektek, külön nem is részletezném. A lényeg, hogy a -1px értékeken van a hangsúly, attól lesz ennyire, szembetűnő, illetve a jó háttér, árnyék és betűszín kombó a másik ami nagyon fontos!

CSS3 inset text

CSS3 inset text

<!DOCTYPE html>
<html>
<head>
<title>CSS3 inset-text</title>
<style type="text/css">
body{
background-color: #666666; /*fontos a háttér szín és a betűszín helyes kombinációja is*/
}
.insettext {
text-align: center;
font-family: Lucida Grande;
color: rgba(255,255,255,0.5); /*a hatás fokozásának érdekében*/
text-shadow:
rgba(0,0,0,0.5) -1px 0, /*a minúsz értékeken van a hangsúly*/
rgba(0,0,0,0.3) 0 -1px, /*ettől lesz picit 3D és picit inset hatása a szövegnek*/
rgba(255,255,255,0.5) 0 1px,
rgba(0,0,0,0.3) -2px -2px;
}
</style>
</head>
<body>

<h1 class="insettext">Ez egy inset text tutorial</h1>

</body>
</html>

Az inset demót itt meg tudod nézni.

+1 Elforgatott szöveg – transform: rotate

Ezzel a témakörrel érintőlegesen már egy régebbi cikkben foglalkoztunk. Ezért gondoltam hogy a +1 text effektnek beveszem. A forgatással kapcsolatban 2 példát szeretnék nektek megmutatni. Egy egyszerű szöveg kiemelést és egy szép naptárat. A másodikkal már biztosan találkoztatok az Interneten, de még van új a Nap alatt. Először is nézzük meg magát a transform:rotate utasítást:

transform: rotate(elforgatás szöge); 

Jelenleg a böngészők nem teljes mértékben támogatják a szabványt, ezért a következő trükkel biztosítható, hogy minden böngésző alatt működjön:


transform: rotate(90deg);
 -ms-transform: rotate(90deg); /* IE 9 */
 -webkit-transform: rotate(90deg); /* Safari és Chrome */
 -o-transform: rotate(90deg); /* Opera */
 -moz-transform: rotate(90deg); /* Firefox */

Akkor talán nézzük az elsőn példánkat és kezdjük egy egyszerű szöveg elforgatással.

CSS transform: rotate

CSS transform: rotate

A fenti képet készítsük el egy nagyon egyszerű kód segítségével, a kódot feliratoztam.

<!DOCTYPE html>
<html>
<head>
<title>CSS3 rotate text</title>

<style type="text/css">
.pelda-text {
background-color:#333444;
color:#FFFFFF;
float:left;
position:relative;
padding:5px 5px 5px 30px;
margin:0;
}

.pelda-text .pelda-normal{
text-transform:uppercase; /*szöveg átalakítása*/
font-size:22px;
}

.pelda-text .pelda-elforgatott{
font-size:22px;
display:block;
position:absolute;
left:-6px;
top:18px;
transform: rotate(-90deg); /*elforgatás*/
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari és Chrome */
-o-transform: rotate(-90deg); /* Opera */
-moz-transform: rotate(-90deg); /* Firefox */
}
</style>

</head>
<body>
<div class="pelda-text">
<span class="pelda-elforgatott">CSS</span> <span class="pelda-normal">Szöveg<br />Elforgatás</span>
</div>
</body>
</html>

A transform:rotate példa itt megtekinthető.

A következő példában egy nagyon egyszerű, de szép dátum kiírást készítünk, ezt amúgy már megtaláltam sprite megoldással is. Az alábbi képen látható a végeredmény, teljesen tetszőlegesen tudjátok variálni, mind a színeket, mind az egyes mezők elhelyezkedését, javaslom szedjétek ízekre a példát, egyszerű, de rengeteget lehet belőle tanulni, mind pozicionálás, mind text effekt téren.

Elforgatott dátum

Elforgatott dátum

Lássuk a kódot:


<!DOCTYPE html>
<html>
<head>
<title>CSS3 rotate date</title>

<style type="text/css">

.datum {
position: relative;
width: 80px;
height: 60px;
font-family: Arial;
color: #FFF;
background-color: #424242;
}

.nap, .honap, .ev {
position: absolute;
}

.nap {
font-size: 30px;
top: 20px;
left: 11px;
}

.honap {
top: 1px;
left: 3px;
font-size: 18px;
}

.ev {
top: 20px;
right: -10px;
font-size: 20px;
transform: rotate(-90deg); /*elforgatás*/
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari és Chrome */
-o-transform: rotate(-90deg); /* Opera */
-moz-transform: rotate(-90deg); /* Firefox */
}
</style>

</head>
<body>
<div class="datum">
<span class="nap">15</span>
<span class="honap">Június</span>
<span class="ev">2012</span>
</div>
</body>
</html>

Az elforgatott dátum példa itt megtekinthető.

https://gist.github.com/HTML5ugyesen/5889826

Forrás:

http://www.w3.org/TR/css3-text/

Creative Commons Licenc
CSS3 text effects  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...