zxz 25.02.2015 19:31
Predmet:first-line

Ovaj pseudo element vazi samo za prvu liniju teksta.
PreuzmiIzvorni kôd (HTML):
  4. p::first-line {
  5.     color: #0000FF;
  6.     font-variant: small-caps;
  7. }
  8. p.samovelika{
  9. font-variant: small-caps;
  10. }
  12. <TITLE>Title of your page</TITLE>
  13. </HEAD>
  15. <p>Ovdje ce prvi red biti ispisan velikim slovima i plavom bojom dok ce iduci redovi ispod prvog reda biti obicni odnosno nece potpadatai pod postavke u klasi p. Ovo je dobro kada hocemo nesto naglasiti ili napisati kao naslov.Ukoliko vam je veliki monitor mozda i ne viditi ucinak ako cio tekst stane u jedan red. Onda smanjite velicinu prozora vseg brovsera da bi vidjeli ucinak ovoga.</p>
  16. <p class="samovelika">Ovo ce bir samo velika slova bez boje i biti ce i nakon preloma teksta</p>
  17. </BODY>
  18. </HTML>

zxz 25.02.2015 19:41
Predmet:First-letter

Odnosi se samo na prvi karakter u tekstu.
PreuzmiIzvorni kôd (HTML):
  4. p::first-letter {
  5.     color: #FF00FF;
  6.     font-size: "25";
  7. }
  9. <TITLE>Prvi znak u tekstu</TITLE>
  10. </HEAD>
  12.  
  13. <p>Ucinak se vidi samo na prvom karakteru u tekstu.</p>
  14. </BODY>
  15. </HTML>

zxz 26.02.2015 21:35
Predmet:Gradients

PreuzmiIzvorni kôd (HTML):
  4. #grad {
  5.     height: 100px;
  6.     background: -webkit-linear-gradient(0deg, green, blue);
  7.     background: -o-linear-gradient(0deg, green, blue);
  8.     background: -moz-linear-gradient(0deg, green, blue);
  9.     background: linear-gradient(0deg, green, blue);
  10. }
  12. <TITLE>Gradisents</TITLE>
  13. </HEAD>
  15. <div id="grad" style="color:white;text-align:center;">Ovdje moze biti i neki tekst</div><br>
  16. <p><strong>Napomena:</strong><br>Ne podrzavaju verzije internet explorera nize od 9.</p>
  17. </BODY>
  18. </HTML>

zxz 27.02.2015 10:03
Predmet:text-shadow

PreuzmiIzvorni kôd (HTML):
  4. h1 {
  5.     text-shadow: 4px 4px 4px #FF00FF
  6. }
  8. <TITLE>Tekst Shadow</TITLE>
  9. </HEAD>
  11.  <h1>Ovo je tekst Shadow</h1>
  12.  <p><b>Note:</b><br> Ne podrzavaju verzije internet explorera nize od 9./p>
  13. </BODY>
  14. </HTML>

zxz 28.02.2015 12:32
Predmet:font-family

PreuzmiIzvorni kôd (HTML):
  4. p.roman {
  5.     font-family: "Times New Roman", Times, serif;
  6. }
  7. p.serif {
  8.     font-family: Arial, Helvetica, sans-serif;
  9. }
  11. <TITLE>Font</TITLE>
  12. </HEAD>
  14. <p class="roman">Ovo je font Times New Roman.</p>
  15. <p class="serif">Ovo je  Arial font.</p>
  16. </BODY>
  17. </HTML>

zxz 28.02.2015 13:55
Predmet:Font-stil

PreuzmiIzvorni kôd (HTML):
  4. p.normal {
  5.     font-style: normal;
  6. }
  7. p.italic {
  8.     font-style: italic;
  9. }
  10. p.oblique {
  11.     font-style: oblique;
  12. }
  14. <TITLE>Font stil</TITLE>
  15. </HEAD>
  17. <p class="normal">Normal klas stil.</p>
  18. <p class="italic">Italik klas stil.</p>
  19. <p class="oblique">Oblique klas stil.</p>
  20. </BODY>
  21. </HTML>

zxz 01.03.2015 10:12
Predmet:Transform rotate

PreuzmiIzvorni kôd (HTML):
  4. div {
  5.     width: 100px;
  6.     height: 100px;
  7.     background-color: red;
  8.     /* Rotate div */
  9.     -ms-transform: rotate(45deg); /* IE 9 */
  10.     -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  11.     transform: rotate(45deg); /* Standardna syntaksa */
  12. }
  14. <TITLE>Transform</TITLE>
  15. </HEAD>
  17. <div>iCentar</div>
  18. </BODY>
  19. </HTML>

zxz 01.03.2015 10:17
Predmet:Transform-Translate

PreuzmiIzvorni kôd (HTML):
  4. div{
  5.     width: 200px;
  6.     height: 125px;
  7.     background-color: red;
  8.     border: 1px solid black;
  9.     -ms-transform: translate(450px,200px); /* IE 9 */
  10.     -webkit-transform: translate(450px,200px); /* Chrome, Safari, Opera */
  11.     transform: translate(450px,200px); /* Standarda syntaksa */
  12. }
  14. <TITLE>Transform</TITLE>
  15. </HEAD>
  17. <div>iCentar</div>
  18. </BODY>
  19. </HTML>

zxz 02.03.2015 11:03
Predmet:Transform-Scalse

PreuzmiIzvorni kôd (HTML):
  4. div {
  5.     width: 90px;
  6.     height: 70px;
  7.     background-color: green;
  8.     border: 1px solid black;
  9. }
  10. div#div1 {
  11.     margin: 100px;
  12.     -ms-transform: scale(1,3); /* IE 9 */
  13.     -webkit-transform: scale(1,3); /* Chrome, Safari, Opera */
  14.     transform: scale(1,3); /* Standardna sintaksa */
  15. }
  17. <TITLE>Transform scale</TITLE>
  18. </HEAD>
  20. <div>Ovo je div element</div>
  21. <div id="div1">Ovo je div1 element</div>
  22. </BODY>
  23. </HTML>

zxz 03.03.2015 21:27
Predmet:Tekst u kolonama-column-count

PreuzmiIzvorni kôd (HTML):
  4. .kolone {
  5.     -webkit-column-count: 4; /* Chrome, Safari, Opera */
  6.     -moz-column-count: 4; /* Firefox */
  7.     column-count: 4;
  8. }
  10. <TITLE>Kolone</TITLE>
  11. </HEAD>
  13. <div class="kolone">Izgleda nevjerojatno da su Egipani izgradili metropolu tako
  14. veli
  15. anstvene arhitekture kao Å¡to je piramida, u pustinjskom
  16. podru
  17. ju naizgled negostoljubivom prema životu i
  18. nesposobnom za pružanje prikladnog okoliša razvoju jedne
  19. civilizacije. To izvanredno postignue poslužilo je egiptologu
  20. Kurtu Mendelsohnu kao potvrda njegove teorije o tome da
  21. se gradnja piramida razvila kao vrsta civilne službe, u
  22. nastojanju da se sprije
  23. i nezaposlenost i povea blagostanje
  24. u Egiptu.
  25. Mendelsohn pretpostavlja da je administracija u drevnom
  26. Egiptu, vjerujui u potrebu stvaranja više državno
  27. orijentiranog naroda, prisilila religiju i obredne tradicije
  28. utjelovljene u filozofiji piramide da ustupe vodee mjesto
  29. njihovim društveno-ekonomskim planovima.
  30. Takvo moderno vienje drevne i visokorazvijene civilizacije
  31. u najboljem je slu
  32. aju postavka koja se može primijeniti na
  33. piramide iz mnogo kasnijeg razdoblja propadanja Egipta.
  34. Društveno-ekonomska teorija povijesti,
  35. ovjekovih
  36. nastojanja i djelovanja, teško je održiva
  37. ak i kada se primijeni
  38. na moderno doba, a kamoli tek na civilizacije nadahnute </div>
  39. </BODY>
  40. </HTML>