CSS īpašību ģenerators

CSS īpašību ģenerators ir rīks, kas no slīdņu un krāsu atlasītāju kopas izveido CSS kodu vizuālam efektam, nevis liek lietotājam kodu rakstīt ar roku. Šis ģenerators aptver četrus efektus: gradientus, bloka ēnas, apmaļu rādiusu un teksta ēnas. Katrā panelī tiek rādīts priekšskatījums reāllaikā un izveidots tūlītējai kopēšanai gatavs CSS kods.

Ko tas ģenerē

• Gradienti: lineāras vai radiālas krāsu pārejas starp divām krāsām
• Bloka ēnas: ēna ap elementu vai tā iekšpusē ar nobīdes, izpludinājuma, izkliedes, krāsas un necaurredzamības vadīklām
• Apmaļu rādiuss: noapaļoti stūri — vienādi visiem četriem stūriem vai iestatīti katram atsevišķi
• Teksta ēnas: ēna aiz teksta ar nobīdes, izpludinājuma, krāsas un necaurredzamības vadīklām

Katrs iestatījums vienlaikus atjaunina priekšskatījumu un ģenerēto CSS, tāpēc izmaiņas var pārbaudīt pirms koda kopēšanas.

Kā aprēķināt CSS lineāro gradientu

Lineārs gradients pāriet no vienas krāsas uz otru pa taisnu līniju. Tā CSS sintakse ir:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Leņķi mēra grādos no 0 līdz 360. position1 un position2 nosaka, kur katra krāsa sasniedz pilnu intensitāti, izteiktu procentos no gradienta garuma.

Aprēķina piemērs

Ģeneratora sākotnējās vērtības ir 90 grādu leņķis, #ff5f6d pozīcijā 0% un #ffc371 pozīcijā 100%. Tādējādi tiek iegūts:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

Pirmā rinda ir vienkāršas krāsas rezerves variants pārlūkprogrammām, kurās kāda iemesla dēļ neizdodas attēlot gradientu. Otrā rinda ir pats gradients.

Radiālā gradienta formula

Radiāls gradients izplešas uz āru no centra punkta, nevis pa līniju:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Šis ģenerators vienmēr izveido apļveida radiālo gradientu. Tas nepiedāvā elipses formas iespēju vai veidu, kā pārvietot centra punktu; var mainīt tikai abas krāsas un to pārejas punktu pozīcijas.

Abi šī rīka gradientu veidi izmanto tieši divas krāsas, kas iestatītas ar Color 1 un Color 2 atlasītājiem. Nav iespējas pievienot trešo krāsas pārejas punktu.

CSS bloka ēnas formula

Bloka ēna ir ēna, kas tiek zīmēta ap elementa malām:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset un v-offset pārvieto ēnu pa kreisi/pa labi un uz augšu/uz leju. Pozitīvas vērtības to pārvieto pa labi vai uz leju, bet negatīvas — pa kreisi vai uz augšu. blur padara ēnas malu maigāku; lielāks skaitlis izpludinājumu izpleš tālāk. spread palielina vai samazina ēnas izmēru pirms izpludinājuma piemērošanas. Ja pirms nobīdēm pievieno atslēgvārdu inset, ēna tiek zīmēta elementa apmales iekšpusē, nevis ārpus tās.

Aprēķina piemērs

Izmantojot noklusējuma iestatījumus (horizontālā nobīde 5 pikseļi, vertikālā nobīde 5 pikseļi, izpludinājums 10 pikseļi, izkliede 0 pikseļi, melna krāsa ar 20% necaurredzamību), rīks izvada:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Krāsu atlasītāja necaurredzamības slīdnis darbojas diapazonā no 0 līdz 100 un tiek pārveidots skalā no 0 līdz 1, ko izmanto rgba(), tāpēc 20% kļūst par 0,2.

CSS apmaļu rādiusa formula

Apmaļu rādiuss noapaļo elementa stūrus. Pastāv divas formas:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Ja visiem četriem stūriem ir viena vērtība, ģenerators izmanto saīsināto formu. Ja vērtības atšķiras, tas uzskaita četras vērtības tieši šādā secībā: augšējais kreisais, augšējais labais, apakšējais labais, apakšējais kreisais.

Aprēķina piemērs

Noklusējuma rādiuss katram stūrim ir 10 pikseļi:

1border-radius: 10px;
2

Apļveida avatara attēlam parasti izmanto border-radius: 50%, lai gan šī vērtība pārsniedz diapazonu, ko pieļauj šī ģeneratora slīdnis (no 0 līdz 100 pikseļiem).

CSS teksta ēnas formula

Teksta ēna darbojas līdzīgi bloka ēnai, taču tai nav izkliedes vērtības, un tā attiecas uz burtiem, nevis elementa lodziņu:

1text-shadow: h-offset v-offset blur color;
2

Aprēķina piemērs

Izmantojot noklusējuma iestatījumus (horizontālā nobīde 2 pikseļi, vertikālā nobīde 2 pikseļi, izpludinājums 3 pikseļi, melna krāsa ar 50% necaurredzamību):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Kādus krāsu kodus ģenerators pieņem

Katrai krāsas vadīklai ir krāsas paraugs un teksta lauks. Teksta laukā var ievadīt heksadecimālu krāsu kodu — # formu, ko izmanto visā CSS. Derīgi ir četri garumi: trīs cipari (#f00), četri cipari (#f00c), seši cipari (#ff0000) un astoņi cipari (#ff0000cc). Saīsinātās formas nozīmē to pašu krāsu ko garās formas, jo katrs cipars tiek dublēts: #123 ir tādas pašas krāsas kods kā #112233.

Četrciparu formas pēdējais cipars un astoņciparu formas pēdējais pāris nosaka caurspīdību. Ēnu ģeneratori šos ciparus ignorē un alfa vērtību ņem no necaurredzamības slīdņa, tāpēc slīdnis vienmēr rāda faktiski piemēroto caurspīdību. Ja teksta laukā ir kas tāds, kas nav heksadecimāla krāsa, piemēram, nepabeigts kods, ēna kļūst melna, nevis tiek izveidota nederīga deklarācija.

Kā izmantot CSS īpašību ģeneratoru

1. Izvēlieties cilni: Gradient, Box Shadow, Border Radius vai Text Shadow.
2. Pielāgojiet slīdņus, krāsu atlasītājus un izvēles rūtiņas. Katram slīdnim blakus ir skaitļa lauks, kurā var ievadīt precīzu vērtību. Gan priekšskatījuma panelis, gan CSS kods tiek atjaunināts nekavējoties.
3. Izvēlieties pogu “Copy to Clipboard” un ielīmējiet kodu stila lapā vai style atribūtā.
4. Izvēlieties “Reset”, lai atjaunotu katra lauka sākotnējo vērtību visās četrās cilnēs. Tādējādi aktīvā cilne tiek pārslēgta atpakaļ uz Gradient, pat ja iepriekš bija atvērta cita cilne.

Biežāk uzdotie jautājumi

Kādam nolūkam izmanto CSS īpašību ģeneratoru? Tas pārvērš slīdņu un krāsu atlasītāju ievadi gatavā CSS kodā gradientiem, ēnām un noapaļotiem stūriem, lai lietotājam šī sintakse nebūtu jāraksta vai jāiegaumē ar roku.

Ar ko atšķiras lineārs gradients no radiāla gradienta? Lineārs gradients maina krāsu pa taisnu līniju noteiktā leņķī. Radiāls gradients maina krāsu virzienā uz āru no centra punkta. Šī rīka radiālā opcija vienmēr izmanto apļveida formu.

Vai šis rīks var izveidot gradientu ar vairāk nekā divām krāsām? Nē. Gan lineārā, gan radiālā gradienta panelis atbalsta tieši divas krāsas — Color 1 un Color 2 — katrai ar savu pārejas punkta pozīciju.

Ar ko iekšēja bloka ēna atšķiras no parastas ēnas? Parasta bloka ēna atrodas ārpus elementa malām, līdzīgi kā gaisma, kas krīt aiz tā. Iekšēja ēna atrodas malu iekšpusē, liekot elementam izskatīties iespiestam, nevis izvirzītam.

Kāpēc noapaļoto stūru vērtības tiek rādītas secībā: augšējais kreisais, augšējais labais, apakšējais labais, apakšējais kreisais? Tā CSS īpašība border-radius pieprasa rakstīt četras atsevišķas vērtības, virzoties pulksteņrādītāja virzienā no augšējā kreisā stūra.

Vai ģenerētais CSS darbojas visās pārlūkprogrammās? Gradienti, bloka ēnas, apmaļu rādiuss un teksta ēnas tiek atbalstīti pašreizējās pārlūkprogrammu Chrome, Firefox, Safari un Edge versijās. Izvadam netiek pievienoti ražotāju prefiksi.

Atsauces

1. MDN Web Docs: CSS gradientu izmantošana
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow