Üdvözlünk mindenkit a Blurred Colors-on, amely továbbra is az első és egyetlen magyar szerepjátékos és grafikai fórum, illetve annak közössége. Kedves, segítőkész emberekkel, változatos versenyekkel, sokoldalú kódokkal, grafikákkal és egyéb hasznos dolgokkal látjuk el a rászoruló eltévedt szerepjátékozni, vagy épp csak képet szerkeszteni vágyókat. Csatlakozz hozzánk te is! Regisztrálj, de még mielőtt megtennéd, kérlek, olvasd el a szabályzatunkat.






a hónap aláírása by
don'tFORGET


a hónap blendje by
away from the light &


a hónap ikonszettje by
light up the world


  
  válaszol új topik szavazás

» Font Styles, ~betűstílus variációk~
gazdy
 Posted: Sep 20 2011, 12:48 PM
idézés



Group Icon

Group: statiszta
Posts: 47
Member No.: 11
Joined: 19-September 11









BETŰSTÍLUSOK?!?!

HELLO KEDVES IDEGEN! Itt a következő lecke. Ezúttal a betűk formázását mutatom meg neked. Láttál már olyat, hogy egy hozzászólásban mutatósan néztek ki a betűk? Itt a titok nyitja, hamarosan már te is kedved szerint formázhatod a szöveget a kódjaidban! Pár egyszerű példán és kódon keresztül megmutatom, hogy mit is lehet kezdeni a szöveggel. wink.gif

Hogy jobban érthető legyen, kiemelve és példákon keresztül mutatom be nektek a dolgot.



Első körben nézzük meg az ÁLTALÁNOS betűformázást:
1.) Betűszín megadása:

ezzel a szöveg színét megadtuk a #HEX kód segítségével


QUOTE
<div style='font-family: arial; color:#FF35BC; font-size: 20px;'> ezzel a szöveg színét megadtuk a #HEX kód segítségével div>


ezzel a szöveg színét megadtuk a szín nevének segítségével


QUOTE
<div style='font-family: arial; color: blue; font-size: 20px'> ezzel a szöveg színét megadtuk a szín nevének segítségével </div>


2.) Betűméret megadása:

ezzel a szövegünk betűméretét 20-asra állítottuk


QUOTE
<div style='font-family: arial; font-size: 20px;'> ezzel a szövegünk betűméretét 20-asra állítottuk </div>


ezzel a szövegünk betűméretét 90%-osra állítottuk


QUOTE
<div style='font-family: arial; font-size: 90%'> ezzel a szövegünk betűméretét 90%-osra állítottuk </div>


Most jöjjenek a komolyabb stílusok:
3.) „font-weight”

ez az ÁTLAGOS betűstílus



QUOTE
<div style='font-family: arial; font-weight: normal; font-size: 20px'>ez az ÁTLAGOS betűstílus</div>


ez a KÖVÉR betűstílus



QUOTE
<div style='font-family: arial; font-weight: bold; font-size: 20px'>ez a KÖVÉR betűstílus</div>


ez a KÖVÉREBB betűstílus



QUOTE
<div style='font-family: arial; font-weight: bolder; font-size: 20px'>ez a KÖVÉREBB betűstílus</div>


ez a VILÁGOSABB betűstílus



QUOTE
<div style='font-family: arial; font-weight: lighter;; font-size: 20px'>ez a VILÁGOSABB betűstílus</div>


4.) „font-style”:

ez az ÁTLAGOS betűtípus


QUOTE
<div style='font-family: arial; font-style: none; font-size: 20px'>ez az ÁTLAGOS betűstílus</div>


ez a DŐLT betűtípus


QUOTE
<div style='font-family: arial; font-style: italic; font-size: 20px'>ez a DŐLT betűstílus</div>


ez az OBLIQUE betűtípus


QUOTE
<div style='font-family: arial; font-style oblique; font-size: 20px'>ez az OBLIQUE betűstílus</div>


5.) „font-decoration”:

ez az ÁTLAGOS betű dekoráció


QUOTE
<div style='font-family: arial; text-decoration: none; font-size: 20px'>ez az ÁTALGOS betű dekoráció</div>


ez az ALULRÓL ALÁHÚZOTT betű dekoráció


QUOTE
<div style='font-family: arial; text-decoration: underline; font-size: 20px'>ez az ALULRÓL ALÁHÚZOTT betű dekoráció</div>


ez a FELÜLRŐL ALÁHÚZOTT betű dekoráció


QUOTE
<div style='font-family: arial; text-decoration: overline; font-size: 20px'>ez a FELÜLRŐL ALÁHÚZOTT betű dekoráció</div>


ez az ÁTHÚZOTT betű dekoráció


QUOTE
<div style='font-family: arial; text-decoration: line-through; font-size: 20px'>ez az ÁTHÚZOTT betű dekoráció</div>


ez a VILLOGÓ betű dekoráció


QUOTE
<div style='font-family: arial; text-decoration: blink; font-size: 20px'>ez a VILLOGÓ betű dekoráció</div>


6.) „font-transform”:

ez az ÁTLAGOS betű transzfomáció


QUOTE
<div style='font-family: arial;text-transform: none; font-size: 20px'>ez az ÁTLAGOS betű transzfomáció </div>


ez a NAGYBETŰS betű transzfomáció


QUOTE
<div style='font-family: arial;text-transform: uppercase; font-size: 20px'>ez a NAGYBETŰS betű transzfomáció</div>


ez a KISBETŰS betű transzfomáció


QUOTE
<div style='font-family: arial;text-transform: lowercase; font-size: 20px'>ez a KISBETŰS betű transzfomáció</div>


ez a KAPITÁLIS betű transzfomáció


QUOTE
<div style='font-family: arial;text-transform: capitalize; font-size: 20px'>ez a KAPITÁLIS betű transzfomáció </div>


7.) „font-variant”:

ez a kiskapitális betűstílus


QUOTE
<div style='font-family: arial; font-variant: small-caps; font-size: 20px'>ez a kiskapitális betűstílus</div>


8.) „text-shadow”:

ez az ÁRNYÉKOLÁS betűstílus


QUOTE
<div style='font-family: arial; text-shadow: 4px 4px 8px purple; font-size: 20px'>ez az ÁRNYÉKOLÁS betűstílus</div>


9.) „text-align”:

ez a BALRA rendezett szöveg


QUOTE
<div style='font-family: arial; text-align: left; font-size: 20px'> ez a BALRA rendezett szöveg </div>


ez a JOBBRA rendezett szöveg


QUOTE
<div style='font-family: arial; text-align: right; font-size: 20px'> ez a JOBBRA rendezett szöveg </div>


ez a KÖZÉPRE rendezett szöveg


QUOTE
<div style='font-family: arial; text-align: center; font-size: 20px'> ez a KÖZÉPRE rendezett szöveg </div>


ez a SORKIZÁRTRA rendezett szöveg


QUOTE
<div style='font-family: arial; text-align: justify; font-size: 20px'> ez a SORKIZÁRTRA rendezett szöveg </div>



Nos, a tanmesém végéhez ért, remélem hasznos volt számotokra. Már csak némi visszajelzését szeretnék kapni tőletek! Hasznos volt ez egyáltalán? Van valami, amit esetleg magyarázzak meg ezzel kapcsolatban? Tudasd velem, és én megpróbálom a legjobb tudásom szerint megválaszolni a dolgot.

--------------------
user posted image
pm
^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options válaszol új topik szavazás