Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

11 Klasikong mga Pamamaraan ng CSS na Pinadali sa pamamagitan ng CSS3

by
Difficulty:IntermediateLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Lahat tayo ay kinailangang makamit ang ilang epekto na ngangailangan ng karagdagang dakot ng mga div o PNG. Hindi tayo dapat maging limitado sa ganitong mga lumang pamamaraan kung may bagong panahon ng dumarating. Ang bagong panahong ito ay kasama ang paggamit ng CSS3. Sa tutoryal ngayon, ipapakita ko sa inyo ang labing-isang iba’t ibang nakakaubos ng oras ng mga epekto na maaaring makamit nang mas madali sa pamamagitan ng CSS3.


CSS3? Ano yan?!

Sigurado akong narinig na ninyo ang CSS sa pangkalahatan, Ang CSS3 ay hindi masyodong iba, sa talakayang palaugnayan; ngunit, ang kapangyarihan ng CSS3 ay sobrang tindi. Katulad ng makikita ninyo sa labing-isang mga pamamaraang ito, maaari kayong magkaroon ng maramihang panglikuran, dinamikong pagpapalit ng sukat ng mga panglikurang iyon, mga radius ng hangganan, mga anino ng teksto,at iba pa!

Narito kung ano ang opisyal (o kahit na, kung ano ang isinasaalang-alang kong opisyal) website ng CSS3, css3.info, ay may sasabihin tungkol sa CSS3:

Ang CSS3 ay ang bagong bata sa pamilya ng pahina ng istilo. Ito ay naghahandog ng nakakapukaw na mga bagong posibilidad upang makalikha ng bagsak sa inyong mga disenyo, pinahihintulutan kayong gumamit ng mas magkakaibang mga pahina ng istilo para sa iba’t ibang uri ng mga okasyon at napkarami pa.

Ano ang Aming Tatalakayin

Narito ang 11 mga pamamaraan na ipapakita ko sa inyo kung paano lumikhang muli sa pamamagitan ng CSS3. Ipapakita ko sa inyo kung paano likhain ang mga ito gamit ang CSS2 (o JavaScript), at pagkatapos ay sa pamamagitan ng mga propyedad ng CSS3. Tandaan – ang mga epektong ito ay gagana lamang sa mga makabagong browser na nagsasagawa 0ng mga tampok na ito ng CSS3. Ang pinakamabuti mong pagpipilian ay ang tingnan ang mga ito sa Safari 4.

  1. Pabilog na mga Sulok
  2. Anino ng Kahon
  3. Anino ng Teksto
  4. Magarang Font
  5. Kalabuan
  6. RGBA
  7. Sukat ng Background
  8. Maramihang mga panglikuran
  9. Mga Hanay
  10. Hangganan ng Larawan
  11. Mga Animasyon

1. Pabilog na mga Sulok

Rounded Corners

Marahil ang paborito ko sa listahan, ang pabilog na mga sulok ay nagbibigay sa bumubuo ng maraming mga pagpipilian. Maaari kayong lumikha ng butones ng pabilog na sulok sa ilang segundo. Ang bagay na paborito kong gawin ay ayusin ang panglikuran ng greydyent upang ulitin sa x-axis at pagkatapos ay gamitin ang mga pabilog na sulok upang makagawa ng napakagandang tingnang butones ng Web 2.0.

Maaari ninyong gayahin ang mga pabilog na sulok sa pamamagitan ng paggamit ng apat na karagdagang mga div o sa pamamagitan ng paggamit JavaScript. Kahit na, ang gumagamit ay hindi nakikita ang mga makikinis na sulok na ito kapag hindi pinagagana ang JavaScript, iniisip ko na ayos lamang ito basta ang website ay nananatiling gumagana kung paano dapat. Maaari kayong magbasa tungkol sa pamamaraang ito kung mas gugustuhin ninyong gumamit ng CSS sa paggawa ng pabilog na mga sulok.

Klasikong Pamamaraan

Ang klasikong pamamaraan ay gumagamit ng jQuery sa tabi ng plugin ng JavaScript na tinatawag na Mga Sulok.

CSS3 na Pamamaraan

Katulad ng nakikita ninyo, ang kailangan mo lamang gawin ay tukuyin ang tatlong propyedad ng CSS3. Sa huli, ito ay magiging isa lamang; kailangan ninyong gumamit ng tatlo ngayon dahil ang iba’t ibang mga browser ay gumagamit ng iba’t ibang mga pangalan ng propyedad.

Tingnan ang demo.

2. Box Shadow

Box Shadow

Ang anino ng Kahon ay nagbibigay sa inyo ng napakamakapangyarihang kagamitan. 99% ng oras kapag ako ay nagdidisenyo, nakikita ko ang sarili ko na gumagamit ng patak ng mga anino para isang bagay. Muli, gagamitin ko ang plugin ng jQuery upang mamahala sa klasikong pamamaraan dahil sa totoo, ang pagsubok na tayahin ito sa pamamagitan lamang ng CSS ay nakakalito. Bakit ko sasayangin ang oras ko sa pagkalikot sa negatibong mga mardyin kung mayroon ng isang bagay na nakasulat na gumagawa ng trabaho para sa akin? Habang ang disenyo ko ay maayos tingnan kapag ang mga tao ay hindi pinapagana ang JavaScript, ako ay ganap na kuntento sa paggamit ng plugin ng jQuery.

Klasikong Pamamaraan

Ginagamit ko ang plugin na patak ng Anino. Payak at kung ano ang gusto ko; kahit mas gusto kong gumamit ng CSS.

CSS3 na Pamamaraan

Ang mga halaga para sa mga propyedad ng kahon ng anino ay: ginalaw sa x ginalaw sa y na malabong kulay. Mas madali kaysa sa pag-angkat ng dalawang mga file ng JavaScript, at SOBRANG mas madali kaysa guluhin ang panglikuran ng mga imahe at negatibong mga mardyin.

Tingnan ang demo.

3. Anino ng Teksto

Text Shadow

Kung nakabasa na kayo kahit minsan ng tutoryal tungkol sa kung paano gumawa ng limbag na epekto sa Photoshop, malalaman ninyo na ang patak ng aninong epekto ang ginamit. Ito ay talagang madaling gumawa ng limbag na teksto, sundan lamang ang tutoryal na ito sa Line25 ni Chris Spooner.

Klasikong Pamamaraan

Sa halip na gumamit ng plugin ng jQuery sa pagkakataong ito, gumamit lamang ako ng mga payak na pagdaya ng CSS upang walang pasubaling maipwesto ang teksto sa likod ng ibang kopya ng teksto. Ang masama lamang tungkol sa hindi paggamit ng CSS3 para sa sitwasyong ito ay makakakuha ka ng dalawang kopya ng teksto kung hindi pinapagana ang CSS.

CSS3 Way

Kung binabalak ninyo na gamitin ang mga anino ng teksto na Malabo (ang ikatlong “pagpipilian” sa propyedad ng anino), hindi ko alam kung paano ninyo gagawin iyan sa pamamagitan ng purong CSS, at walang mga larawan.

Tingnan ang demo.

4. Magarang Font

Fancy Font

Pinangarap natin ang tungkol dito sa matagal na panahon, ngunit sa wakas ay maipapakita ninyo ang “magarang mga font” sa web nang hindi umaasa sa JavaScript. Siyempre ito ay nagdudulot ng ilang mga problem na pinapayagan ang mga bayad na font na maipamahagi sa internet. Sa papaano mang paraan, ipinapakita ko sa inyo ang @mukha ng font.

Klasikong Pamamaraan

Nagpasya akong gamitin ang Cufon upang palitan ang teksto. Hindi ko ipapaliwanag kung paano ito gamitin dahil ang Jeffrey ay mayroon ng kahanga-hangang screencast.

CSS3 na Pamamaraan

Lumilikha tayo ng pamilya ng font sa pamamagitan ng @mukha ng font at pagkatapos ay gagamitin ito bilang halaga para sa pamilya ng font. Si Michael Owens ay nagsulat ng artikulo dito halos isang buwan na ang nakaraan na ipinapaliwanag ng mahusay ang @mukha ng font.

Tingnan ang demo.

5. Kalabuan

Opacity

Kung napuntahan na ninyo ang Envato na website na muling pagdidisenyo kalian lamang, maaaring napansin ninyo na maraming mga naaaninag na elemento. Kahit na ito ay nakamtan sa pamamagitan ng naaaninag na mga PNG, maaari ninyong makamtan ang kaparehong epekto sa pamamagitan ng propyedad ng kalabuan. Ngayon, ang propyedad ng kalabuan ay nasa paligid ng ilang saglit, ngunit ang minamahal nating IE ay mayroong sariling mga propyedad nito.

Klasikong Pamamaraan

CSS3 na Pamamaraan

Sa pamamagitan ng CSS3, tinanggal lamang natin ang dalawang propyedad na tiyak sa IE,  hindi ba matindi ito?!

Tingnan ang demo.

6. RGBA

RGBA

Lahat ay alam kung para saan tumatayo ang RGB (pula, berde, asul), ngunit para saan tumatayo ang A? Ito ay tumatayo para sa alpha, na tumuturing sa pag-aninaw.

Maliban sa mga pabilog na sulok, ang RGBA ay ang sunod na pinakagamit ko propyedad ng CSS3. Minsan gusto ko lamang magdagdag ng kaunting puti/itim na liwanag na panglikuran sa mga link ng nabigasyon kapag ang gumagamit ay umaali-aligid sa mga ito. Ito ay sobrang mas madali kaysa sa lumikha ng bagong larawan para sa bawat kulay; ngunit, sa pamamagitan ng kaunting PHP nagagawa nitong sobrang mas madali ang mga bagay.

Klasikong Pamamaraan

Nakikitang kung paanong hindi ito artikulo ng PHP, hindi ko tatalakayin ang PHP. I-save lamang ang file na ito bilang rgba.php at kapag kailangan ninyo ng tiyak na kulay ng RGBA, gawin ang “kulay” na panglikuran bilang (rgba.php?r=R&g=G&b=B&a=A).

Ngayon gamitin ito sa div...

CSS3 na Pamamaraan

Tingnan ang demo.

7. Sukat ng Background

Background Size

Ang propyedad ng sukat ng panglikuran ay kahanga-hangang bagay na dapat magkaroon sa inyong sinturong kasangkapan kapag kayo ay lumilikha ng likidong layout. Ang halimbawa nito ay maaaring kapag mayroon kayong panglikuran ng larawan para sa lalagyan na para sa sidebar. Ang klasikong pamamaraan ng paggawa nito ay mangangailangan ng pagsabunot upang maulit ang larawan sa y-axis, ngunit sa CSS3 ito ay parang pagdaragdag ng ibang propyedad ng panglikuran.

Klasikong Pamamaraan

CSS3 na Pamamaraan

Sa kasamaang-palad, ang propyedad na ito ay hindi isinasagawa sa Firefox (V3.5.2) sa oras na sinusulat ito.

Tingnan ang demo.

8. Maramihang mga panglikuran

Multiple Backgrounds

Ah, maramihang mga panglikuran. Ngayon ito ay nagbibigay sa mga bumubuo ng napakamakapangyarihang kasangkapan. Nakakaisip ako ng napakaraming mga bagay na mangangailangan ng maramihang mga div upang magkaroon lamang ng mahigit sa isang panglikuran. Ang pinakakaraniwang lugar na nakikita kong mapapakinabangan ito ay sa seksyon ng header ng website, ngunit iyon ay unang bagay lamang na naisip ko.

Klasikong Pamamaraan

Ang klasikong pamamaraan ay medyo halata, balutin lamang ang div ng ibang div at iba pa para sa bawat panglikurang kailangan ninyo. Nakakagawa ng magandang tingnang code, hindi ba?

CSS3 na Pamamaraan

Ang palaugnayan ay talagang madaling makuha sa isang ito. Ang lahat ng ginagawa ninyo sa maramihang panglikuran ay magdagdag ng kuwit sa pagitan ng bawat isa! Ngunit, muli, ito ay limitadong propyedad at sa Safari lamang.

Tingnan ang demo.

9. Mga Hanay

Columns

Ito ang pinakakawili-wiling propyedad ng CSS3 na nakita ko. Ito ay hindi isang bagay na nakikita ninyo sa madaming disenyo ng web. Sa ganang akin, nakakita pa lamang ako ng mukhang-pahayagang mga hanay minsan o dalawang beses; ngunit, gusto ko kung ano ang hitsura ng epekto nito kapag ginawa ng tama. Karaniwan ng ihihiwalay ninyo ang nilalaman sa mga div at palutangin ang mga div na iyon, ngunit natuklasan ko ang plugin ng jQuery na dinamikong naggagawad sa mga hanay.

Klasikong Pamamaraan

Nagdagdag ako ng kaunting palaman sa mga hanay upang ang mga teksto ay hindi lamang nakikipagdurugan sa bawat isa.

CSS3 na Pamamaraan

Mayroong sandakot na ibang mga propyedad ng hanay ng CSS3 na maaari ninyong gamitin, ngunit para sa mga pagtuturong layunin, tiniyak ko lamang ang bilang ng mga hanay. Kung gusto ninyong mas matututo pa ng tungkol sa ibang mga propyedad na ito, tingnan ang maramihang-hanay na pahina sa CSS3.info.

Tingnan ang demo.

10. Hangganan ng Larawan

Border Image

Wala akong palatandaan tungkol sa propyedad ng hangganan ng larawan hanggang magpataas ako sa Firefox 3.5 at pumunta sa website ni Chris Spooner at makita na ang mga nakapaskil niyang mga larawan ay may mga hangganan ng larawan. Para sa akin, wala akong anumang interes sa propyedad na ito, ngunit hindi ito makakapagpahinto sa akin sa pagpapaliwanag kung paano makakamtan ito.

Klasikong Pamamaraan

Sa halip na gumugol ng oras sa paglikha ng maramihang mga div at pag-uulit ng panglikurang larawan sa paligid ng div, natagpuan ako ang plugin ng jQuery  na gumagawa ng trabaho para sa akin. Ito ay tinatawag na hangganan ng larawan at nagtatrabaho kung paano ito dapat.

CSS3 na Pamamaraan

Katulad ng nakikita ninyo, ang propyedad ng hangganan ng larawan ay bahagyang kakaiba. Ang W3 ang nagpapaliwanag kung paano ito kinakalkula nang SOBRANG mas mabuti.

Tingnan ang demo

11. Mga Animasyon

Animations

Tama, sino ang hindi gusting makakita ng ilang elementong marahang dumadausdos pakaliwa o kumukupas kapag umaali-aligid kayo sa isang bagay? Ang mga animasyon ay matindi upang palakihin ang interface ng gumagamit, ngunit siguraduhing hindi kayo lumalampas! Ang tanging mga browser na sumusuporta sa mga animasyon ng CSS3 ay nakabatay sa Webkit na mga browser.  Ang tanging ibang paraan upang ipakita ang mga animasyon ay upang gamitin ang JavaScript. Gagamitin ko ang jQuery dahil ito ang paborito kong aklatan ng JavaScript (kung hindi pa ninyo nahuhulaan hanggang ngayon).

Klasikong Pamamaraan

CSS3 na Pamamaraan

Ginagawa ng parehong mga piraso ng code na ito ang parehong bagay: padausdusin ang div 20 pixel pababa sa loob ng kursong 300 ms. Tandaan, ang code ng CSS3 ay gumagana lamang sa mga Webkit na browser!

Tingnan ang demo.

Konklusyon

Ayan mayroon na kayo: 11 mga pamamaraan ng CSS na magiging sobrang mas madali sa pamamagitan ng CSS3 sa (inaasahang malapit na) hinaharap. Walang alinlangan, magtatagal bago tayo 100% makaasa sa mga propyedad na ito sa lahat ng mga browser.

Huwag kalimutang suruin ang ibang mga tutoryal ng Nettuts+ na ito na tumatalakay sa CSS3:

  • Subaybayan kami sa Twitter, o mag-subscribe sa Nettuts+ RSS Feed para sa mas madaming araw-araw na mga tut at mga artikulo sa pagbuo ng web.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.