[TUT] Create Stylish Text in CSS3 - Shadow Effect (1/2)

[CodingSource]

Pwede mong gawing mas maganda ang text mo sa tulong ng shadow, banner, at rotating effect gamit ang CSS3.

Kapag gusto mong magkaroon ng shadow effect ang text mo, i-consider mo kung saan mo ilalagay ito sa webpage mo. We're going to set ours above and slightly to the left. Ang formula ng shadow effect sa text ay ganito:

text-shadow: x-axis offset, y-axis offset, amount of blur, color;

Whereas sa code ang amount of blur ay optional lamang. Para mailagay natin ang shadow effect sa lower right ng text:

.shadow{
               text-shadow: 0.2em 0.2em #ccc
           }

Para paliitin natin ang shadow para mas maging realistic ang resulta, magdagdag lang tayo ng amount of blur.

.shadow{
              text-shadow: 0.2em 0.2em 0.2em #ccc
             }

Puwede na tayong maglagay ng <div> sa ating HTML webpage para ma-iapply natin doon ang shadow effect para sa text na "CodingSource tutorials"

<div id="layer">
<p class = "shadow">CodingSource tutorials</p>
</div>

At para naman sa CSS:

#layer {
     background: #900;
}
p {
    padding: 2em;
    color: #600;
    font: 3em Century Gothic;
    font-weight: 900;
}
.shadow {
   text-shadow: 0.03em 0.03em 0.03em #D00
}

Ayan, puwede mo ng i-run ang webpage sa browser mo.

Para maggawa tayo ng illusion sa 3d text na iyan (embossed, ika nga), kailangan lang natin ipagpalitin ang text at background colors, at saka yung mga side kung saan naka-focus ang lighting.

#layer {
   background: #600;
}
p {
    padding: 2em;
    color: #800;
    font: 3em Century Gothic;
    font-weight: 900;
}
.shadow {
    text-shadow: -0.03em -0.03em 0.03em #D00;
}

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

Kapag gusto mo na may mas believable feeling, dapat gawin nating advantage yung kakayahan ng CSS3 na maglagay ng layer of several shadow styles.

Hindi natin kailangan pakialaman ang HTML para ma-iapplay ito. CSS lang:

.shadow {
    text-shadow: -0.01em -0.01em #D00
      -0.02em -0.02em #D00, -0.03em -0.03em
        #D00, -0.04em -0.04em #D00, -0.05em
          -0.05em #D00, -0.06em -0.06em #D00,
           -0.07em -0.07em #D00, -0.08em

Sa code natin naglagay tayo ng 8 shadpw layers where each layer is offset 0.01em from its predecessor.

Sa next part we will be focusing on rotating and banner effect.

 

[arenjay25]

Wow ayus to ahh
Saan ko Pwede apply ito css3 mo hehehe

 

[PotatoCannon7]

UP! UP! UP! cool css3 reference.

 

[CodingSource]

Wow ayus to ahh
Saan ko Pwede apply ito css3 mo hehehe

Kahit anong text editor basta naka-save siya sa file .css.