CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS Gradiënte


Gradiënt agtergronde

Met CSS-gradiënte kan u gladde oorgange tussen twee of meer gespesifiseerde kleure vertoon.

CSS definieer drie tipes gradiënte:

  • Lineêre gradiënte (gaan af/op/links/regs/skuins)
  • Radiale gradiënte (gedefinieer deur hul middelpunt)
  • Kegelvormige gradiënte (om 'n middelpunt gedraai)

CSS lineêre gradiënte

Om 'n lineêre gradiënt te skep, moet jy ten minste twee kleurstops definieer. Kleurstoppe is die kleure waartussen jy gladde oorgange wil gee. Jy kan ook 'n beginpunt en 'n rigting (of 'n hoek) saam met die gradiënteffek stel.

Sintaksis

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Rigting - Bo na onder (dit is verstek)

Die volgende voorbeeld toon 'n lineêre gradiënt wat aan die bokant begin. Dit begin rooi en gaan oor na geel:

bo na onder (verstek)

Voorbeeld

#grad {
  background-image: linear-gradient(red, yellow);
}

Rigting - van links na regs

Die volgende voorbeeld toon 'n lineêre gradiënt wat van links begin. Dit begin rooi en gaan oor na geel:

Links na regs

Voorbeeld

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Rigting - Diagonaal

Jy kan 'n gradiënt diagonaal maak deur beide die horisontale en vertikale beginposisies te spesifiseer.

Die volgende voorbeeld toon 'n lineêre gradiënt wat links bo begin (en regs onder gaan). Dit begin rooi en gaan oor na geel:

links bo na regs onder

Voorbeeld

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}


Gebruik hoeke

As jy meer beheer oor die rigting van die gradiënt wil hê, kan jy 'n hoek definieer, in plaas van die voorafbepaalde rigtings (na onder, na bo, na regs, na links, na onder regs, ens.). 'n Waarde van 0deg is gelykstaande aan "na bo". 'n Waarde van 90deg is gelykstaande aan "na regs". 'n Waarde van 180deg is gelykstaande aan "tot onder".

Sintaksis

background-image: linear-gradient(angle, color-stop1, color-stop2);

Die volgende voorbeeld wys hoe om hoeke op lineêre gradiënte te gebruik:

180 grade

Voorbeeld

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Gebruik veelvuldige kleur stops

Die volgende voorbeeld toon 'n lineêre gradiënt (van bo na onder) met veelvuldige kleurstoppe:

Voorbeeld

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Die volgende voorbeeld wys hoe om 'n lineêre gradiënt (van links na regs) met die kleur van die reënboog en 'n bietjie teks te skep:

Reënboog agtergrond

Voorbeeld

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Gebruik deursigtigheid

CSS-gradiënte ondersteun ook deursigtigheid, wat gebruik kan word om vervaag-effekte te skep.

Om deursigtigheid by te voeg, gebruik ons ​​die rgba() funksie om die kleur stops te definieer. Die laaste parameter in die rgba()-funksie kan 'n waarde van 0 tot 1 wees, en dit definieer die deursigtigheid van die kleur: 0 dui volle deursigtigheid aan, 1 dui volkleur aan (geen deursigtigheid).

Die volgende voorbeeld toon 'n lineêre gradiënt wat van links begin. Dit begin heeltemal deursigtig en gaan oor na volkleur rooi:

Voorbeeld

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Herhaal van 'n lineêre gradiënt

Die repeating-linear-gradient() funksie word gebruik om lineêre gradiënte te herhaal:

Voorbeeld

'n Herhalende lineêre gradiënt:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}