CSS: gradienteak

Gradiente bat kolore batzuen bidez eratzen da. Kolore horiek etengabe aldatzen dira, kolore batetik besterako trantsizio leun batekin.

Gradienteak irudi gisa sortzen dira eta elementuaren atzealdean gehitzen dira background-image edo background propietateekin.

Gradientekin irudia sortzeko, CSSk funtzio hauek eskaintzen ditu:

• linear-gradient (posizioa, angelua, koloreak) —Funtzio horrek gradiente lineal bat sortzen du. posizioa atributuak gradientea hasteko eta top, bottom, left eta right balioekin deklaratzeko aldea edo izkina zehazten du; angelua atributuak gradientearen norabidea definitzen du, eta deg (graduak), grad (gradianak), rad (radianak) edo turn (espirak) unitateetan adieraz daiteke, eta koloreak atributua gradientea osatzen duten koloreen zerrenda da eta komaz bereizita idazten dira. koloreak atributurako balioek bigarren balio bat izan dezakete, ehunekotan, kolorea amaitzen den posizioa adierazteko eta espazio batek bereizita idazten dira.
• radial-gradient (posizioa, forma, koloreak, luzapena) —Funtzio horrek gradiente erradial bat sortzen du. posizioa atributuak gradientearen jatorria adierazten du, eta pixeletan adieraz daiteke, ehunekotan, edo center, top, bottom, left eta right balioen konbinazioaren bidez; forma atributuak gradientearen forma zehazten du, eta zirkle eta ellipse balioekin deklaratzen da; koloreak atributua gradientean parte hartzen duten koloreen zerrenda da, koma bidez bereizita idazten dira; eta hedadura-atributuak zehazten du gradienteak closest-side, closest-corner, farthest-side eta farthest-corner balioekin lortuko duen forma. koloreak-atributurako balioek bigarren balio bat izan dezakete, ehunekotan, kolorea amaitzen den posizioa adierazteko, espazio batek bereizita idazten dira.

Gradienteak hondoko irudi gisa deklaratzen dira; beraz, elementu bati aplika dakizkioke background-image edo background propietateen bidez, hurrengo adibidean egiten dugun bezala.

        
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background: -webkit-linear-gradient (top, #FFFFFF, # 66666);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
        
Gradiente lineal bat gehituz goiburuari
      

Gradiente lineala

GARRANTZITSUA: CSS propietate eta funtzio batzuk esperimentaltzat jotzen dira oraindik. Horregatik, erabilitako web motorra irudikatzen duen aurrizki batekin deklaratu behar dira. Adibidez, linear-gradient() funtzioa Google Chrome-n funtzionatzea nahi badugu, -webkit-linear-gradient() idatzi behar dugu. Zure webgunean funtzio hori erabili nahi baduzu, lehenetsita dagoen nabigatzaile bakoitzerako background  propietatea errepikatu beharko duzu, dagokion aurrizkiarekin. Nabigatzaile ezagunenen aurrizkiak hauek dira:

• -moz- Mozilla Firefoxentzat
• -webkit-Safari eta Google Chromerentzat
• -o-Operarentzat
• -ms-Internet Explorerrentzat eta Edgerentzat

Aurreko adibidean, top balioa erabili dugu gradientearen hasierako posizioa zehazteko, baina bi balio ere konbina ditzakegu elementuaren izkina batetik gradientea hasteko, hurrengo adibidean bezala.

          
        header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background: -webkit-linear-gradient(top right, #FFFFFF, #666666);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Hasierako posizioa ezarriz
        

Hasiera desberdina gradiente lineal baterako

Gradiente linealekin lan egiten dugunean, angelua gradutan jarrita konfigura dezakegu norabidea.

          
            header {
              margin: 30px;
              padding: 15 px;
              text-align: center;
              border: 1px solid;
              background: -webkit-linear-gradient(30deg, #FFFFFF, #866666);
              }
              #titulua {
              font: bold 26px Verdana, sans-serif;
              }
          
30 graduko helbidea duen gradientea
        

Gradiente lineala, gradutan ezarritako norabidearekin

Aurreko gradienteak bi kolorerekin bakarrik sortu dira, baina balio gehiago gehitu ditzakegu kolore anitzeko gradientea sortzeko.

          
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background:-webkit-linear-gradient(top, #000000, #FFFFFF, #999999);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Kolore anitzeko gradiente bat sortuz
        

Kolore anitzeko gradiente lineala

Kolore baten ordez balio gardena erabiltzen badugu, gradientea zeharrargitsua izan daiteke eta, horrela, hondoarekin nahas daiteke (efektu hori aurretik aztertutako rgba() funtzioarekin ere lor daiteke). Hurrengo adibidean, atzealdeko irudi bat esleituko diogu elementuari, orriaren hondoa aldatzeko eta gradiente zeharrargi bat lortzen dugula egiaztatzeko.

          
         body {
          background: URL("adreilu-argiak.jpg");
          }
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background:-webkit-linear-gradient(top, transparent, #666666);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Gradiente zeharrargi bat sortzen
        

Gradiente zeharrargia

Koloreak definitzen dituzten parametroek kolore bakoitzaren hasiera eta amaiera puntua ere zehaztu dezakete, portzentajezko balio gehigarri bat barne.

          
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background:-webkit-linear-gradient(top, #FFFFFF 50%, #666666 90%);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Kolore bakoitzaren hasierako eta amaierako puntuak konfiguratuz
        

Gradiente lineala, hasierako eta amaierako balioekin

Gradiente linealez gain, gradiente erradialak ere sor ditzakegu. Gradiente erradialetarako sintaxia eta aztertu berri ditugun gradiente linealak ez dira oso desberdinak. Desberdintasun bakarra da erradial-gradient() funtzioa erabili behar dugula linear-gradient() funtzioa erabili beharrean, eta parametro bat sartu behar dugula, gradientearen forma zehazten duena circle edo ellipse balioekin.

          
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background:-webkit-radial-gradient(center, ellipse, #FFFFFF, #000000);
          }
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Gradiente erradial bat sortzen
        

Gradiente erradiala

Formagatik izan ezik (zirkulua edo elipsea), funtzio honen gainerakoak bezala lan egiten du. Gradientearen posizioa pertsonalizatu egin daiteke, eta kolore bat baino gehiago erabil ditzakegu, bigarren balio batekin, kolore bakoitzaren mugak zehazteko.

          
          header {
          margin: 30px;
          padding: 15 px;
          text-align: center;
          border: 1px solid;
          background:-webkit-radial-gradient(30px 50px, ellipse, #FFFFFF 50% , #666666  70%, #999999  90%);
          #titulua {
          font: bold 26px Verdana, sans-serif;
          }
          
Gradiente erradiala hasierako eta amaierako puntuekin
        

Gradiente erradiala hasierako eta amaierako puntuekin