Hello people! medyo nakaluwag na ko mula sa pagiging busy nitong nakaraan. Kaya heto napag desisyunan kong mag-post tungkol sa kung paano gumamit ng css sa html. Ang daming nangyari nitong mga nakaraang linggo kaya sobrang nahirapan ako ng pagkakataon para makapag-post, at isa pa ay wala akong maisip na i-topic dahil ayaw ko naman basta mag post lang ng walang kwentang artikulo na walang kapupulutan ng aral patungkol sa pag gawa ng website.
Paano gumamit ng css?
Kung regular kitang tagapag basa ay maraming beses mo na itong nakita dahil, inapply ko na ang CSS sa mga ilang pag tuturo ko lalo na sa may html tutorials. Sa simpleng paliwanag, ang CSS ay kaakibat ng HTML para ito ay hindi lamang mapaganda ngunit mailagay din sa maayos na mga pag kakalagyan. Importanteng matutunan din ito lalo na sa mga naguumpisa pa lamang at inaaral pang mabuti kung paano gumawa ng website.
Ang tatalakayin natin ngayon ay ang pag gawa ng maayos at magandang HTML link o button gamit lamang ang CSS. Dati (at least sa naabutan kong panahon) ay nangangailangan pa minsan na mag gawa ng image o imahe para sa magandang button para gamitin sa isang website, gumagana naman ito ngunit ito ay kumakain ng bandwidth ng iyong hosting at kadalasa’y nagiging dahilan ng pag bagal ng pag-load ng iyong website. Kaya’t sa tulong ng mga ilang CSS attributes na ating gagamitin ay gagawa tayo ng button na hindi lamang basta basic.
May mga iba’t ibang style
Ngunit sa ngayon ang gagawin muna natin ay ang minimalistic style o flat color style na hindi gaano nangangailangan ng maraming codes para mapaganda. Simple lamang ang itsura nito ngunit maaayos tignan, ika na eh “malamig sa paningin”.
Step 1 – Gumawa na ng html link
Pangalanan mo ito ng iyong nais na pangalan, ang ginamit ko ay “My Button” at lagyan ito ng class para sa pag gamit ng CSS maya maya. Tandaan na i-save mo ito at tignan ang itsura, dapat ay may makita kang isang napaka boring na link sa iyong webpage (hehe). Pero huwag mag alala pagagandahin natin yan sa next step.
<a class="my-button" href="#">My Button</a>
Step 2 – Ang CSS na ginamit
Puwede mo na lang basta kopyahin ang nasa ilalim, dahil ito ang mag sasa ayos o mag papaganda sa iyong link/button. Tandaan na dapat ito ay nakapaloob sa may style header sa itaas, gaya ng mga naunang pag tuturo ko. (I-review mo na lamang ito kung nalimutan mo, balikan mo na lang).
a.my-button {
display: block;
margin: 0 auto;
width: 140px;
font-family: arial;
text-align: center;
background-color: #27c672;
color: #FFFFFF;
font-size: 20px;
text-decoration: none;
padding: 10px 4px;
border-radius: 14px;
border-bottom: 10px solid #28965c;
}
Tignan ang resulta, at ikaw na ang mag husga kung alin ang mas maganda, ang una o ang nalagyan na ng style. Sa tingin ko ay obvious na ito. Puwede ka nga rin pala pumili ng ibang kulay gamit ang hexadecimal, palitan mo na lamang ang inilagay ko, dahil mahilig talaga ako sa kulay berde.
Makikita na malaki talaga ang naitutulong ng CSS, at hindi naman kailangan na sobrang ganda at komplikado ng iyong pag-code para lamang mag karoon ng disenteng style, napaka simple at straight-forward lang ng ginamit kong codes hindi ba? Isa kasi sa mga prinsipyo ko sa pag gamit ng CSS ay dapat kaunting attributes lamang pero maganda naman ang resulta, para din kasi ito sa loading speed ng iyong website.
Paano hanggang dito na muna, abangan ang mga susunod ko pang ipo-post na CSS Tricks!
Facebook Comments