M

MLOG

Lietuvių

Atraskite CSS kaukių savybes, kad sukurtumėte stulbinančius vizualinius efektus, atskleistumėte paslėptą turinį ir pakeltumėte savo interneto dizainą į aukštesnį lygį.

CSS kaukės savybės: kūrybiškų vizualinių efektų panaudojimas internete

CSS kaukės savybės suteikia galingą ir universalų būdą valdyti elementų matomumą jūsų tinklalapiuose, leidžiantį kurti stulbinančius vizualinius efektus, atskleisti paslėptą turinį ir suteikti jūsų dizainui unikalumo. Skirtingai nuo tradicinės paveikslėlių redagavimo programinės įrangos, CSS kaukių naudojimas leidžia dinamiškai ir adaptyviai taikyti kaukes tiesiogiai naršyklėje, todėl tai yra nepakeičiamas įrankis šiuolaikiniams interneto kūrėjams. Šiame išsamiame vadove pasinersime į CSS kaukių pasaulį, nagrinėsime įvairias jų savybes, panaudojimo atvejus ir geriausias praktikas.

Kas yra CSS kaukės?

CSS kaukė – tai būdas pasirinktinai paslėpti arba atskleisti elemento dalis, naudojant kitą paveikslėlį ar gradientą kaip kaukę. Įsivaizduokite, lyg iškirptumėte formą iš popieriaus lapo ir uždėtumėte ją ant paveikslėlio – matomos tik tos sritys, kurios yra iškirptos formos viduje. CSS kaukės sukuria panašų efektą, tačiau suteikia papildomą pranašumą – jos yra dinamiškos ir valdomos per CSS.

Pagrindinis skirtumas tarp `mask` ir `clip-path` yra tas, kad `clip-path` tiesiog apkerpa elementą pagal apibrėžtą formą, padarydamas viską, kas yra už formos ribų, nematomu. Tuo tarpu `mask` naudoja kaukės paveikslėlio alfa kanalą arba šviesumo reikšmes, kad nustatytų elemento skaidrumą. Tai atveria platesnes kūrybines galimybes, įskaitant išplaukusius kraštus ir pusiau permatomas kaukes.

CSS kaukės savybės: išsami apžvalga

Štai pagrindinių CSS kaukės savybių apžvalga:

`mask-image`

`mask-image` savybė yra CSS kaukių naudojimo pagrindas. Ji nurodo paveikslėlį arba gradientą, kuris bus naudojamas kaip kaukė. Galite naudoti įvairius paveikslėlių formatus, įskaitant PNG, SVG ir net GIF. Taip pat galite naudoti CSS gradientus, kad sukurtumėte dinamiškas ir pritaikomas kaukes.

Pavyzdys: PNG paveikslėlio naudojimas kaip kaukės


.masked-element {
  mask-image: url("mask.png");
}

Šiame pavyzdyje `mask.png` paveikslėlis bus naudojamas `.masked-element` maskavimui. Skaidrios PNG sritys pavers atitinkamas elemento sritis skaidriomis, o neskaidrios sritys pavers atitinkamas elemento sritis matomomis.

Pavyzdys: CSS gradiento naudojimas kaip kaukės


.masked-element {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

Šis pavyzdys naudoja linijinį gradientą, kad sukurtų blukimo efektą `.masked-element` elementui. Gradientas pereina iš neskaidrios juodos spalvos į skaidrią, sukuriant sklandų išblukimo efektą.

`mask-mode`

Savybė `mask-mode` nustato, kaip interpretuojamas kaukės paveikslėlis. Ji turi kelias galimas reikšmes:

Pavyzdys: `mask-mode: luminance` naudojimas


.masked-element {
  mask-image: url("grayscale-image.jpg");
  mask-mode: luminance;
}

Šiame pavyzdyje kaip kaukė naudojamas pilkų tonų paveikslėlis. Šviesesnės paveikslėlio sritys pavers atitinkamas `.masked-element` sritis matomomis, o tamsesnės – nematomomis.

`mask-repeat`

Savybė `mask-repeat` valdo, kaip kartojamas kaukės paveikslėlis, jei jis yra mažesnis už maskuojamą elementą. Ji veikia panašiai kaip `background-repeat` savybė.

Pavyzdys: `mask-repeat: no-repeat` naudojimas


.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
}

Šiame pavyzdyje `small-mask.png` paveikslėlis bus naudojamas kaip kaukė, tačiau jis nebus kartojamas. Jei elementas yra didesnis už kaukės paveikslėlį, nemaskuotos sritys bus matomos.

`mask-position`

Savybė `mask-position` nustato pradinę kaukės paveikslėlio poziciją elemento viduje. Ji veikia panašiai kaip `background-position` savybė.

Pozicijai nurodyti galite naudoti raktinius žodžius, tokius kaip `top`, `bottom`, `left`, `right` ir `center`, arba galite naudoti pikselių ar procentines reikšmes.

Pavyzdys: `mask-position: center` naudojimas


.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
}

Šiame pavyzdyje `small-mask.png` paveikslėlis bus centruotas `.masked-element` elemento viduje.

`mask-size`

Savybė `mask-size` nurodo kaukės paveikslėlio dydį. Ji veikia panašiai kaip `background-size` savybė.

Pavyzdys: `mask-size: cover` naudojimas


.masked-element {
  mask-image: url("mask.png");
  mask-size: cover;
}

Šiame pavyzdyje `mask.png` paveikslėlio mastelis bus pakeistas taip, kad jis padengtų visą `.masked-element` elementą, prireikus paveikslėlį apkerpant.

`mask-origin`

Savybė `mask-origin` nurodo kaukės pozicionavimo atskaitos tašką. Ji nustato tašką, nuo kurio skaičiuojama `mask-position` savybė.

`mask-clip`

Savybė `mask-clip` apibrėžia sritį, kurią apkerpa kaukė. Ji nustato, kurias elemento dalis paveikia kaukė.

`mask-composite`

Savybė `mask-composite` nurodo, kaip turėtų būti sujungti keli kaukės sluoksniai. Ši savybė naudinga, kai tam pačiam elementui taikomos kelios `mask-image` deklaracijos.

`mask` (sutrumpinta savybė)

Savybė `mask` yra sutrumpinimas, leidžiantis vienu metu nustatyti kelias kaukės savybes. Ji leidžia vienoje deklaracijoje nurodyti `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-size`, `mask-origin` ir `mask-clip` savybes.

Pavyzdys: sutrumpintos `mask` savybės naudojimas


.masked-element {
  mask: url("mask.png") no-repeat center / cover;
}

Tai yra ekvivalentu:


.masked-element {
  mask-image: url("mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

Praktiniai panaudojimo atvejai ir pavyzdžiai

CSS kaukių naudojimas gali būti pritaikytas kuriant įvairiausius vizualinius efektus. Štai keletas pavyzdžių:

1. Turinio atskleidimas užvedus pelę

Galite naudoti CSS kaukes, kad sukurtumėte efektą, kai turinys atskleidžiamas vartotojui užvedus pelę ant elemento. Tai gali būti naudojama norint suteikti jūsų dizainui interaktyvumo ir intrigos.


<div class="reveal-container">
  <div class="reveal-content">
    <h2>Paslėptas turinys</h2>
    <p>Šis turinys atskleidžiamas užvedus pelę.</p>
  </div>
</div>


.reveal-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.reveal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  mask-image: url("circle-mask.png");
  mask-size: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: mask-size 0.3s ease;
}

.reveal-container:hover .reveal-content {
  mask-size: 200%;
}

Šiame pavyzdyje `.reveal-content` elementui iš pradžių taikoma maža apskritimo kaukė. Kai vartotojas užveda pelę ant `.reveal-container`, kaukės dydis padidėja, atskleisdamas paslėptą turinį.

2. Formų perdangų kūrimas

CSS kaukės gali būti naudojamos kuriant įdomias formų perdangas ant paveikslėlių ar kitų elementų. Tai gali būti naudojama norint suteikti jūsų dizainui unikalų vizualinį stilių.


<div class="shape-overlay">
  <img src="image.jpg" alt="Image">
</div>


.shape-overlay {
  position: relative;
  width: 400px;
  height: 300px;
}

.shape-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shape-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  mask-image: url("triangle-mask.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

Šiame pavyzdyje trikampio kaukė taikoma pseudo-elementui, kuris dengia paveikslėlį. Taip sukuriamas formos perdangos efektas, suteikiantis paveikslėliui vizualinio įdomumo.

3. Teksto maskavimas

Nors `mask-clip: text` vis dar yra eksperimentinė funkcija, teksto maskavimo efektus galite pasiekti pozicionuodami elementą su fono paveikslėliu už teksto ir naudodami patį tekstą kaip kaukę. Ši technika gali sukurti vizualiai įspūdingą tipografiją.


<div class="text-mask">
  <h1>Maskuotas tekstas</h1>
</div>


.text-mask {
  position: relative;
  width: 500px;
  height: 200px;
  font-size: 72px;
  font-weight: bold;
  color: white;
  background-image: url("background.jpg");
  background-size: cover;
  -webkit-text-fill-color: transparent; /* Reikalinga Safari */
  -webkit-background-clip: text; /* Reikalinga Safari */
  background-clip: text;
}

Šis pavyzdys naudoja `background-clip: text` (su gamintojų prefiksais platesniam suderinamumui), kad tekstas būtų naudojamas kaip kaukė, atskleidžiant už jo esantį fono paveikslėlį.

4. Animuotų kaukių kūrimas

Animuodami `mask-position` ar `mask-size` savybes, galite sukurti dinamiškus ir įtraukiančius kaukių efektus. Tai gali būti naudojama norint suteikti jūsų dizainui judesio ir interaktyvumo.


<div class="animated-mask">
  <img src="image.jpg" alt="Image">
</div>


.animated-mask {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.animated-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: url("circle-mask.png");
  mask-size: 50px;
  mask-repeat: repeat;
  mask-position: 0 0;
  animation: moveMask 5s linear infinite;
}

@keyframes moveMask {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: 100% 100%;
  }
}

Šiame pavyzdyje animuojama `mask-position`, sukuriant judančios kaukės efektą, kuris laikui bėgant atskleidžia skirtingas paveikslėlio dalis.

Geriausios praktikos ir svarstymai

Dirbdami su CSS kaukėmis, atsižvelkite į šias geriausias praktikas:

Alternatyvos ir atsarginiai sprendimai

Jei reikia palaikyti senesnes naršykles, kurios nepalaiko CSS kaukės savybių, galite naudoti šias alternatyvas:

Išvada

CSS kaukės savybės suteikia galingą ir universalų būdą kurti stulbinančius vizualinius efektus internete. Suprasdami įvairias kaukių savybes ir jų panaudojimo atvejus, galite atverti naują kūrybiškumo lygį ir suteikti savo dizainui unikalumo. Nors svarbu atsižvelgti į naršyklių suderinamumą ir našumą, potenciali nauda naudojant CSS kaukes yra verta pastangų. Eksperimentuokite su skirtingais kaukių paveikslėliais, gradientais ir animacijomis, kad atrastumėte begalines CSS kaukių galimybes ir pakeltumėte savo interneto dizainą į naujas aukštumas. Pasinaudokite CSS kaukių galia ir paverskite savo tinklalapius vizualiai patraukliomis patirtimis.

Nuo subtilių atskleidimų iki sudėtingų formų perdangų, CSS kaukių naudojimas suteikia galimybę kurti unikalias ir įtraukiančias vartotojo sąsajas. Naršyklių palaikymui nuolat gerėjant, CSS kaukės neabejotinai taps dar svarbesne šiuolaikinio interneto kūrėjo įrankių dalimi. Taigi, nerkite, eksperimentuokite ir išlaisvinkite savo kūrybiškumą su CSS kaukės savybėmis!