2014. január 13., hétfő

HTML §1. | Betűk közti távolság megnő, Elhalványuló fejléc

Sziasztok!
Mivel az oldal azzal foglalkozik, hogy segítsen nektek egy esztétikus, designos blogot készíteni, arra gondoltam, hogy mostantól hozok nektek HTML kódokat, amikkel feldobhatjátok az oldalatok kinézetét! Tisztába vagyok vele, hogy mostanában már elég nagy az igény az ilyesféle "díszítőelemekre", hozzám is érkezett már néhány privát üzenet ezzel kapcsolatban, úgyhogy remélem a segítségetekre lesznek majd! Természetesen lehet kérni, hogy miket hozzak akár chatben, akár e-mailben vagy éppen az ezzel kapcsolatos posztok alatt kommentben! 
Az első körben most két alap kódot hozok nektek, és mellette képesen azt is megmutatom hova kell bemásolnotok ahhoz, hogy működjön ! Használjátok bátran! Ha pedig valami nem egyértelmű vagy nem sikerül, akkor írjatok nyugodtan és megpróbálok segíteni!

xx, Diush

------------------------------------------------------------------------------------------------------------------------

Betűk közti távolság megnő

<STYLE type=text/css>
 A:hover {
letter-spacing:2pt; CURSOR: hand; COLOR: black; TEXT-DECORATION: none }
--> </STYLE>

(katt a képre és nagyobb lesz)

(katt a képre és nagyobb lesz)
Miután beíertad a kódot ne felejts el rányomni a 'Sablon mentése' gombra! Ha valami nem jó, akkor piros hibajelzés fog megjelenni a már előbb említett gomb alatt, azaz a keret fölött!

 Elhalványuló fejléc - ha ráviszed az egeret

 <p> <style type="text/css"> .site { padding-top: 7px; /* keret és a szöveg közti távolság */ padding-bottom: 5px; /* keret és a sZöveg közti távolság */ border-left: #cccccc 0px solid; border-right: #cccccc 0px solid; border-bottom: #e22b0c 5px solid; border-top: #cccccc 0px solid; -moz-border-radius: 2em 2em 2em 2em; /* a keret szélek kerekítése */ -webkit-border-radius: 2em 2em 2em 2em; /* a keret szélek kerekítése */ text-transform: uppercase; font-weight: normal; } td.modbody { /* tartalmi modul része */ background-color: #292121; font-family: Times New Roman; font-size: 14px; color: #998080; padding-left: 5px; /* keret és a szöveg közti távolság */ padding-right: 5px; padding-bottom: 4px; padding-top: 5px; border-left: #cccccc 0px solid; border-right: #cccccc 0px solid; border-bottom: #cccccc 0px solid; border-top: #cccccc 0px none; -moz-border-radius: 0em 0em 1.1em 1.1em; -webkit-border-radius: 0em 0em 1.1em 1.1em; } img { border: 0px solid #abdebf; padding: 0px; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em;} img:hover { border: 0px solid #e95a82; padding: 0px; cursor: ; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em;} a:link img, a:visited img { border: 0px solid #e95a82; background-color: transparent; padding: 0px; filter: alpha(opacity=60); opacity: 1; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em;} a:hover img { border: 0px solid #e95a82; background-color: transparent; padding: 0px; filter: alpha(opacity=90); opacity: .5; /* Mennyire legyen halvány a kép */; -webkit-transition: opacity .5s ease-in; /* Hány másodpercig tartson az átmenet. (Chrome, Opera...) */ -moz-transition: opacity .5s ease-in; /* Hány másodpercig tartson az átmenet. (Mozilla Firefox) */ -o-transition: opacity .5s ease-in; /* Hány másodpercig tartson az átmenet. (Internet Explorer) */ cursor: ; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em;} } </style> </p>

(katt a képre és nagyobb lesz)

(katt a képre és nagyobb lesz)
Miután beíertad a kódot ne felejts el rányomni a 'Sablon mentése' gombra! Ha valami nem jó, akkor piros hibajelzés fog megjelenni a már előbb említett gomb alatt, azaz a keret fölött!



f. AranyMeliGP

6 megjegyzés:

  1. Meg kellene mutatnod, mit kell írogatni a kitöltendő helyekre.

    VálaszTörlés
  2. Adelheid Berger és Jelly ßelly, melyiket nem engedi nektek? És mit ír ki?
    Crazy Tiny, milyen kitöltendő helyre gondolsz? Ezeket csak ki kell másolnod és beillesztened a képen megjelölt helyre!

    VálaszTörlés
  3. Nem, mert akkor felül kiírja pirossal, hogy valami nem jó. Pl.: a betűsnél a STYLE type rész van rosszul, amiatt nem engedi elmenteni.

    VálaszTörlés
  4. szia:) először nekem sem engedte az elsőt, de a "STYLE"-t átírtam kisbetűre és ide: type=text/css> pedig raktam idézőjelet: type="text/css"> és így már elfogadta.:) Csak szóltam, hogy ezt tudják és amúgy köszönöm ez a cikk jól jött!:)

    VálaszTörlés