Using Linear Gradients to Create Stripes

Sa halip na gumamit ng maraming div, puwede nating gamitin ang CSS linear-gradient() function para maglagay ng stripes sa design natin.

Francis Rubio

Tue, Jul 28, 2020

Ang problema

Sa banners ng Courses by Antares Programming, makikita ang ganitong design:

Makikita sa banner ng Courses ang design ng stripes na may iba't ibang kulay.

Sa ilalim ng banner title (Courses by Antares Programming), may makikitang underline na gawa sa stripes na iba’t iba ang kulay. Pero hindi iyan underline gamit ang text-decoration. Gawa iyan sa linear-gradient() function ng CSS.

Ang Linear Gradients

Tumatanggap ang background-image ng CSS ng url() function, na puwede nating bigyan ng URL papunta sa isang image na gagawing background sa isang element. Pero bukod diyan, puwede rin nating ilagay ang iba’t ibang functions para sa mga gradient na gaya ng linear-gradient() at radial-gradient().

Ang linear-gradient() ay isang function na maglalagay sa background natin ng mga kulay na nagbe-blend sa isa’t isa sa iisang direction. Hindi ito gaya ng radial-gradient() na naglalagay at nagbe-blend ng colors mula sa gitna ng element papaplabas. Tumatanggap ito ng mga arguments:

<direction> Ini-specify nito ang direction ng gradient. Puwede tayong maglagay rito ng mga values na gaya ng to bottom, to top, to top left, to bottom right, etc. Puwede rin tayong maglagay ng angle gamit ang deg unit, gaya ng 45deg, 90deg, 180deg, etc.
<color> ang mga kulay na ilalagay sa gradient. Puwede kahit maraming kulay na ipasa.

Pansinin ang example na ito:

background-image: linear-gradient(orange, yellow);

Ito ang magiging hitsura niyan:

Puwede nating baguhin ang direction ng linear-gradient. Kapag naglagay tayo ng to right, magsisimula ang mga colors sa top left, kaya makikita ang orange sa taas, at magtatapos ang yellow sa right. Ito ang code para riyan:

background-image: linear-gradient(to right, orange, yellow);

Ito naman ang magiging hitsura niyan:

Puwede rin nating i-adjust ang position ng bawat isang kulay. Para mas madaling mabasa ito, ilalagay ko sa individual lines ang bawat isang kulay. Pansinin na puwede tayong gumamit ng kahit na anong unit na ginagamit natin sa width at height.

background-image: linear-gradient(
  to right,
  red 20px,
  green 30%,
  yellow
);

Heto ang itsura niyan:

Kagaya ng makikita, hindi magbe-blend sa iba pang kulay ang red red for 20 pixels. Mula sa pang-21 na pixel onwards, magbe-blend na ito sa ibang mga kulay. Magiging mas obvious ito sa video sa baba, kung saan makikita na nagbabago ang width ng kulay kapag binago ang position:

Sa dulo ng video, makikita natin na kapag lumampas na sa position ng kasunod na kulay, hindi na sila magbe-blend together, at magkakaroon ng solid na distinction sa pagitan ng dalawang kulay. Sa video, makikita ito kapag lumampas na ang red sa position ng green na 30%, magmumukha na silang dalawang magkatabing div na may magkaibang kulay:

Puwede nating gamitin ang principle na iyan sa paggawa ng striped design.

Stripe design gamit ang `linear-gradient`

Para magkaroon ng stripes, kailangan na ang position ng isang color at ng kasunod nito ay magkapareho. Kaya ang gagawin natin, sa bawat isang kulay, magkakaroon tayo ng dalawang version, isa na may position na kaparehas sa naunang kulay at isa pa na may position na nag-i-indicate kung gaano kahaba ang kulay. Subukan natin iyan sa nakaraang gradient. Pansinin na para mag-resize din ito kasabay ng element, percent ang gagamitin natin sa halip na pixels.

background-image: linear-gradient(
  to right,
  red 30%,
  green 30%,
  green 50%,
  yellow 50%,
  yellow 70%,
  blue 70%,
  blue 100%
);

Now, puwede natin itong gamitin sa isang element na may text, gaya sa example natin. Puwede natin iyang gamitin, halimbawa, sa isang h2 element:

<style>
h2 {
  background-image: linear-gradient(
    to right,
    red 30%,
    green 30%,
    green 50%,
    yellow 50%,
    yellow 70%,
    blue 70%,
    blue 100%
  );
}
</style>

<h2>This is an example element</h2>

Kung gusto naman nating gawin iyan na mas maliit at mukhang underline, puwede nating gamitin ang background-size, background-repeat, at background-position.

background-size: Puwede tayong mag-set ng width at height sa background lang
background-repeat: kailangan natin itong i-set sa no-repeat. By default kasi, ita-tile ng browser ang background-image kapag mas maliit ito sa element, at hindi natin maa-achieve ang underline appearance na gusto nating makuha.
background-position: magagamit natin ito para ilagay sa ilalim ng text ang underline.

Sa current code natin para sa h2 element, puwede nating idagdag ang mga ito:

background-size: 100% 5px;
background-repeat: no-repeat;
background-position: bottom;

Para sa background-size property, ang unang value na nilagay natin (100%) ay para sa width, at ang ikalawa naman (5px) ay para sa height. Ito ang magiging hitsura niyan ngayon: