Vävning är En Del Över och Under en Annan Del

0
14

I detta inlägg, vi kommer att använda CSS superkrafter för att skapa en visuell effekt där två delar överlappar varandra och väver samman. Trettondagen för denna konstruktion kom under en kort skur av andlig nyfikenhet där jag hamnade på Bibeln Projektets hemsida. De gör riktigt häftiga animationer, och jag menar det, riktigt häftiga animationer.

Min uppmärksamhet, men avvikit från spiritualism webbdesign som jag höll spotting dessa in-och-ut gränsen illustrationer.

Skärmdump form Bibeln Projektets hemsida.

Jag undrade om en liknande kunde vara tillverkad av ren CSS… och halleluja, det är möjligt!

Se Pennan
Över och under gränsen design med hjälp av CSS genom att Preethi Sam (@rpsthecoder)
på CodePen.

Den huvudsakliga CSS standarder som vi använder i denna teknik är CSS blandningslägen och CSS Nätet.

Först börjar vi med en bild och en roterad ram framför den bilden.

<div class=”konstruktion”>
<img src=”bird-photo.jpg”>
<div class=”roteras i-gränsen”></div>
</div>
.design {
position: relative;
height: 300px;
width: 300px;
}

.design > > * {
position: absolute;
höjd: 100%;
width: 100%;
}

.roteras border {
box-sizing: border-box;
gränsen: 15px #eb311f solid;
förändra: rotera(45deg);
box-shadow: 0 0 10px #eb311f, infälld 0 0 20px #eb311f;
}

Den röda ramen är skapade med hjälp av gränsen. Sin box-sizing är som även gränsen storlek i måtten på lådan så att ramen är centrerad runt bilden efter att roteras. Annars ram kommer att vara större än bilden och få dras mot det nedre högra hörnet.

Då kan vi plocka ett par av motsatta hörn av bilden och overlay sina kvadranter med motsvarande del i en kopia av samma bild som tidigare. Detta döljer den röda ramen i dessa hörn.

Vi i grunden behöver för att göra ett snitt del av bilden som ser ut som nedan för att gå på toppen av en röd ram.

Den synliga två kvadranter kommer att ligga på toppen av den .roteras med gränsöverskridande inslag.

Så, hur gör vi för att ändra bilden så att endast två kvadranter av bilden syns? CSS Blandning Lägen! Den multiplicerar värdet är vad vi kommer att nå i det här fallet. Detta bidrar öppenheten till ett element genom att strippa vit från bilden för att avslöja vad som finns bakom elementet.

Chris har en fin demo som visar hur en röd bakgrund visar genom en bild med den multiplicera blend mode.

Se Pennan
Bakgrund Blandning av Chris Coyier (@chriscoyier)
på CodePen.

OK, trevligt, men vad händer om dessa kvadranter? Vi täcker de kvadranter som vi vill dölja med vita rutorna som kommer att orsaka bilden för att blöda igenom hela vägen i dessa områden med en kopia av fågeln bilden till höger på toppen av den i källkoden.

<div id=”konstruktion”>
<img src=”bird-photo.jpg”>
<div class=”roteras i-gränsen”></div>

<div class=”blandning”>
<!– Kopia av samma bild –>
<img src=”bird-photo.jpg”>
<div class=”grid”>
<!– Kvadrant 1: Överst Till Vänster –>
<div></div>
<!– Kvadrant 2: Upp Till Höger –>
<div data-vit></div>
<!– Kvadrant 3: Längst Ner Till Vänster –>
<div data-vit></div>
<!– Kvadrant 4: Längst Ner Till Höger –>
<div></div>
</div>
</div>

</div>
.blanda > * {
position: absolute;
höjd: 100%;
width: 100%;
}

/* Fastställer vårt nät */
.grid {
display: nätet.
rutnät: upprepa(2, 1fr) / repeat(2, 1fr);
}

/* Lägger till vit för att kvadranter med detta attribut */
[data-vit]{
background-color: white;
}

Resultatet är en två och två nätet med dess övre högra och nedre vänstra kvadranterna som är fylld med vita, samtidigt som den är grupperade tillsammans med bilden inuti .blandning.

Till er som är nya CSS Nätet, vad vi gör är att lägga till en ny .grid element som blir en “grid” – element när vi förklarar att visa: grid;. Sedan använder vi nätet för egendom (vilket är en förkortning som kombinerar grid-template-kolumner och rutnät-template-rader) för att skapa två jämnt fördelade rader och kolumner. Vi är i princip säga, “Hej, grid, upprepa två lika stora kolumner och upprepa två lika rader inne i dig själv för att bilda fyra rutor”.

En kopia av bilden och ett rutnät med vita celler på toppen av röd kant.

Nu kan vi tillämpa den multiplicera blend mode till .blandning med hjälp av mix-blandning-läge hotellet.

.blanda { mix-blandning-läge: multiplicera; }

Resultatet:

Som du kan se, blend mode påverkar alla fyra kvadranter snarare än bara de två vi vill se igenom. Det innebär att vi kan se genom alla fyra kvadranter, som avslöjar alla röda roteras rutan.

Vi vill få tillbaka den vita som vi förlorat i övre vänstra och nedre högra kvadranterna så att de döljer den röda roteras rutan bakom dem. Låt oss lägga till en andra nätet, den här gången på toppen av .blanda i källkoden.

<div id=”konstruktion”>
<img src=”bird-photo.jpg”>
<div class=”roteras i-gränsen”></div>

<!– En andra grid –>
<!– Denna gång lägger vi till en vit till bilden quandrants där vi vill dölja den röda ramen –>
<div class=”grid”>
<!– Kvadrant 1: Överst Till Vänster –>
<div data-vit></div>
<!– Kvadrant 2: Upp Till Höger –>
<div></div>
<!– Kvadrant 3: Längst Ner Till Vänster –>
<div></div>
<!– Kvadrant 4: Längst Ner Till Höger –>
<div data-vit></div>
</div>

<div class=”blandning”>
<img src=”bird-photo.jpg”>
<div class=”grid”>
<!– Kvadrant 1: Överst Till Vänster –>
<div></div>
<!– Kvadrant 2: Upp Till Höger –>
<div data-vit></div>
<!– Kvadrant 3: Längst Ner Till Vänster –>
<div data-vit></div>
<!– Kvadrant 4: Längst Ner Till Höger –>
<div></div>
</div>
</div>

</div>

Resultatet!

Sammanfattningsvis kan sägas att webbläsaren tolkar delar i vår demo så här:
​​

  1. På nedersta är fågeln bild (representeras av den vänstra grå form i diagrammet nedan)
  2. Sedan en roterad röd ram
  3. På toppen av dem är ett rutnät med övre vänstra och nedre högra vita blodkroppar (hörn där vi inte vill se den röda ramen i den slutgiltiga resultat)
  4. Följt av en kopia av fågeln bild från innan och ett rutnät med övre högra och nedre vänstra vita blodkroppar (hörn där vi vill se den röda ramen) – som båda är grupperade tillsammans och med tanke på den blandning av mode, föröka sig.

Du kanske har några frågor om den metod jag använt i detta inlägg. Låt mig försöka ta itu med dem.

Vad sägs om att använda CSS Maskering i stället för CSS Blandning Lägen?

För dig som är bekant med CSS Maskering – antingen via mask-bilden eller clipart-väg – det kan vara ett alternativ till att använda blend mode.

Jag föredrar att blanda eftersom det har bättre webbläsare än masker och klippning. Till exempel, WebKit webbläsare inte har stöd för SVG <mask> referens i CSS-mask-bild egendom och de är också delvis stöd för klipp-väg värden, särskilt Safari.

En annan anledning till att välja blend mode är bekvämligheten av att kunna använda nätet för att skapa en enkel vit struktur i stället för att behöva skapa bilder (om de är SVG eller på annat sätt).

Sedan igen, jag är helt ombord CSS blend mode tåget, efter att ha använt det för knockout sms: a, sms: a fragmentering effekt… och nu detta. Jag är ganska mycket på det.

Varför gjorde du använda nätet för kvadranter?

De vita rutorna som behövs i demoversionen kan skapas på annat sätt, naturligtvis, men nätet gör saker och ting lättare för mig. Till exempel, vi kunde har lutat sig mot flexbox istället. Använda vad som fungerar för dig.

Varför använda en data-attribut på nätet kvadrant element för att göra dem vita?

Jag använde den medan du kodar demo utan att tänka mycket på det – jag antar att det var snabbare att skriva. Jag har senare tänkt på att ändra det till en klass, men lämnade det som det är eftersom HTML såg snyggare på det sättet… åtminstone för mig. 🙂

Är du multiplicera bara blend mode som fungerar för detta exempel?

Nope. Om du redan vet om blandningslägen så har du förmodligen vet också att du kan använda antingen skärmen mörkare, eller ljusare för att få en liknande effekt. (Både skärm och ljusare behöver svarta rutorna istället för vit.)