tekoms-web-dizajn

 

Nazad

Drop Caps - stilizovano prvo veliko slovo


Da bi se u HTML kod ubacio DROP CAPS (stilizovani SPAN div tag) potrebno je u HEAD sekciju (ili u fajl sa stilovima) ubaciti klasu ".dropcaps" sa svojstima koja stilizuju prvo veliko slovo paragrafa a potom u sam tekst unutar BODY sekcije ubaciti SPAN div tag kod prvog slova koje će postati DROP CAPS slovo.

U Head sekciji kreirati klasu i definisati stilove koji oblikuju prvo slovo (font, boju, veličinu slova ...)


<style type="text/css">
        .dropcaps {
          color: #903;
          float: left;
          font-family: Georgia;
          font-size: 75px;
          line-height: 60px;
          padding-top: 4px;
          padding-right: 8px;
          padding-left: 3px;
        }
</style>

U odeljak Body unesite sledeći kod odnosno TAG SPAN klase dropcaps koji ide oko prvog slova.


    <p>
       <span class="dropcaps">D</span>rop Caps predstavlja veliko naglašeno prvo slovo paragrafa ...
    </p>

Prikaz u Browser-u


Drop Caps predstavlja veliko naglašeno prvo slovo paragrafa. Ubacivanje Drop Caps-a u HTML kod se ubacuje vrlo jednostavno i predstavlja stilizovanje prvog slova tako što se to slovo "oiviči" SPAN div tagom (ranija predavanja daju objašnjenja čemu služe SPAN div tag-ovi) i kroz stilove se definišu svojstva klase ( u ovom slučaju to je klasa naziva - dropcaps). Kroz stilove se definiše vizuelno prvo slovo - boja, veličina slova, pozicija itd. Unutar samog teksta se pre prvog slova otvori SPAN Div tag klase "dropcaps" i naravno isti se zatvori iza. Na taj način, samo prvo slovo dobija svojstva klase Dropcaps. Na taj način tekst vizuelno ima lepšu formu, ima izgled teksta kao u knjigama.

DEMO verziji gde je platforma za online učenje za web dizajn možete pristupiti LOGIN PANELA

Cenu i način plaćanja Online obuke za web dizajn i programiranje - CENA OBUKE