CSS3 apļveida un elipsveida gradienti [CSS3 padomi]
Šodien mēs turpināsim diskusiju CSS3 gradienti. Iepriekšējā ziņojumā mēs parādījām, kā izveidot Lineārie gradienti. Šoreiz mēs segsim viņu radiniekus, Apļveida un elipsveida gradienti.
Gradienta sintakse
CSS3 gradients tiek deklarēts, izmantojot fona attēls īpašums. Tas ir nepieciešams, lai panāktu labāku savietojamību, kad mums ir arī jāpievieno fona krāsa vienā noteikumā, lai tie nesaskartos viens ar otru. Tad, lai radītu radiālo gradientu, mēs to vienkārši saucam par to radiālais slīpums () funkciju. Funkcijā ir četras vērtības, lai pareizi iestatītu gradientu.
Pirmā vērtība nosaka gradienta pozīcija. Mēs varam izmantot aprakstošu atslēgvārdu, piemēram, augšējo, apakšējo, centrālo un kreiso, vai arī mēs varam būt specifiskāki, 50% 50% lai iestatītu slīpumu centrā vai 0% 0% lai iestatītu slīpumu, lai sāktu augšējais kreisais.
Otrā vērtība nosaka formu un gradienta lielumu, ir divi argumenti, lai veidotu slīpumus, vispirms elipse kas ir noklusējuma, un otrais ir aplis.
Un par gradienta lielums, mēs varam izvēlēties vienu no šādiem sešiem argumentiem.
| Vērtības | Apraksts |
|---|---|
vistuvāk | Slīpuma forma atbilst kastes malai, kas atrodas vistuvāk tās centram (apļiem), vai atbilst gan vertikālajām, gan horizontālajām malām, kas atrodas vistuvāk centram (elipsēm). |
tuvākais stūris | Slīpuma forma ir izmēra, lai tā precīzi atbilstu vistuvāk esošajam kastes stūrim no tās centra. |
vistālāk | Līdzīgi kā vistuvāk, izņemot formu, lai tā atbilstu kastes malai, kas atrodas vistālāk no tā centra (vai vertikālām un horizontālām malām). |
vistālāk | Slīpuma forma ir izmēra, lai tā precīzi atbilstu vistālāk esošajam kastes stūrim no tās centra. |
satur | Sinonīms |
piesegt | Sinonīms |
Tabulas avots: Mozilla izstrādātāju tīkls.
Visbeidzot, trešais un ceturtais definē krāsu kombinācija. Tātad, šeit ir, kā mēs rakstām sintaksi, lai izveidotu Elipsveida gradienti, un šoreiz mēs izmantosim piesegt gradienta lielumam, tāpēc tas plaši izplatīsies, aptverot konteineru;
ķermenis fona attēls: radiālais slīpums (centra centrs, elipses vāks, # ffeda3, # ffc800);
Lai izveidotu Apkārtraksts slīpums, ko mēs varam vienkārši darīt šādi:
ķermenis fona attēls: radiālais slīpums (centra centrs, apļa apvalks, # ffeda3, # ffc800);
Kā norāda nosaukums, gradienta forma būs aplis.
Pārlūka atbalsts
Vienkārši ņemiet vērā, ka visas pārlūkprogrammas joprojām sniedz pilnīgu atbalstu šai funkcijai, tāpēc tām joprojām ir vajadzīgs pārdevēja prefikss. Tādējādi visa pilnā sintakse, kas darbosies visās mūsdienu pārlūkprogrammās - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ un Opera 11+ - izskatīsies kaut kas līdzīgs šim;
ķermenis fona attēls: radiālais slīpums (centra apakšā, elipses vāks, # ffeda3, # ffc800); fona attēls: -o-radiālais slīpums (centrālais apakšējais, elipses vāks, # ffeda3, # ffc800); fona attēls: -ms-radial-gradient (centrālais apakšējais, elipses vāks, # ffeda3, # ffc800); fona attēls: -moz-radial-gradient (centra apakšā, elipses vāks, # ffeda3, # ffc800); fona attēls: -webkit-radial-gradient (centrālais apakšējais, elipses vāks, # ffeda3, # ffc800);
Pārbaudiet demonstrāciju vai lejupielādējiet avotu, lai atskaņotu apkārt ar gradientiem.
- Demo
- Lejupielādēt avotu
Galīgie vārdi
CSS3 radiālā gradienta izveide nav tik grūti, kā jūs domājat, un it īpaši, ja saņemat palīdzību no šiem rīkiem koda ģenerēšanai:
- Colorzilla Gradients
- Gradientoo
Radiālais slīpums ir tikai viens no CSS3 sīkrīku veidiem, mēs turpināsim diskusijas par šo tēmu turpmākajos amatos, tāpēc palieciet uz Hongkiat.com
