Het weven van Een Element Boven en Onder een Ander Element

0
21

In deze post gaan we het gebruik van CSS supermachten om een visueel effect, waarbij twee elementen elkaar overlappen en samen. De openbaring voor dit ontwerp kwam tijdens een korte uitbarsting van geestelijke nieuwsgierigheid waar ik beland in De Bijbel de Project-website. Ze maken echt cool animaties, en dan bedoel ik, echt coole animaties.

Mijn aandacht echter afgeweken van het spiritisme naar web design als ik bleef het spotten van deze in-en-out grens illustraties.

Screenshot vormen De Bijbel Project website.

Ik vroeg me af of een vergelijkbaar kan worden gemaakt van pure CSS… en hallelujah, het is mogelijk!

Zie de Pen
Boven en onder de grens van het ontwerp met behulp van CSS door Preethi Sam (@rpsthecoder)
op CodePen.

De opdrachtgever CSS standaarden die we gebruiken in deze techniek zijn CSS overvloeimodi en CSS Grid.

We beginnen eerst met een afbeelding en een gedraaid frame op de voorkant van dat beeld.

<div class=”design”>
<img src=”bird-photo.jpg”>
<div class=”gedraaid-border”></div>
</div>
.ontwerp {
position: relative;
height: 300px;
width: 300px;
}

.design > * {
position: absolute;
height: 100%;
breedte: 100%;
}

.gedraaid-grens {
box-sizing: border-box;
grens: 15px #eb311f solid;
transform: rotate(45deg);
box-shadow: 0 0 10px #eb311f, inzet 0 0 20px #eb311f;
}

Het rode frame is gemaakt met behulp van de grens. De box-sizing is ingesteld op de grens grootte in de afmetingen van de doos, zodat het frame is opgebouwd rond de foto na te zijn gedraaid. Anders, het frame zal groter zijn dan de afbeelding en meegetrokken naar de hoek rechtsonder.

Dan halen we een paar overstaande hoeken van de afbeelding en overlay hun kwadranten met hun corresponderende gedeelte in een kopie van het zelfde beeld als voorheen. Dit verbergt de rode kader in die hoeken.

In principe hebben We nodig om een snede te maken deel van het beeld dat eruit ziet als hieronder in te gaan op de top van het rode kader.

De zichtbare twee kwadranten zal leggen op de top van het .gedraaid-grens element.

Dus, hoe kunnen we veranderen van de afbeelding zodat slechts twee kwadranten van de afbeelding zichtbaar zijn? CSS overvloeimodi! Het vermenigvuldigen waarde is wat we gaan bereiken in dit geval. Dit geeft transparantie als een element door het strippen van wit in de afbeelding te onthullen wat er achter het element.

Chris heeft een mooie demo te laten zien hoe een rode achtergrond laat zien door middel van een afbeelding met de mengmodus vermenigvuldigen.

Zie de Pen
Achtergrond het Mengen van Chris Coyier (@chriscoyier)
op CodePen.

OK, leuk, maar hoe zit het met die kwadranten? We dekken de kwadranten we willen verbergen met wit raster cellen die zal leiden tot het beeld te bloeden helemaal door in die specifieke gebieden met een kopie van de vogel afbeelding rechts op de top van het in de broncode.

<div id=”design”>
<img src=”bird-photo.jpg”>
<div class=”gedraaid-border”></div>

<div class=”mix”>
<!– Kopie van dezelfde afbeelding –>
<img src=”bird-photo.jpg”>
<div class=”grid”>
<!– Kwadrant 1: Linksboven –>
<div></div>
<!– Kwadrant 2: Boven Rechts –>
<div data-wit></div>
<!– Kwadrant 3: Links Onder –>
<div data-wit></div>
<!– Kwadrant 4: Onderaan Rechts –>
<div></div>
</div>
</div>

</div>
.mix > * {
position: absolute;
height: 100%;
breedte: 100%;
}

/* Bepaalt onze raster */
.raster {
display: grid;
raster: herhaal(2, 1fr) / herhaal(2, 1fr);
}

/* Voegt wit te kwadranten met dit kenmerk */
[data-wit]{
background-color: white;
}

Het resultaat is een twee-bij-twee grid met de top-rechts en links-kwadranten die zijn gevuld met wit, terwijl gegroepeerd worden met de afbeelding naar binnen .mix.

Voor diegenen van jullie nieuwe CSS Grid, wat we doen is het toevoegen van een nieuwe .raster-element dat wordt een “grid” element wanneer wij verklaren display: grid;. Vervolgens gebruiken we de grid eigendom (dat is een afkorting die combineert grid-template-kolommen en raster-template-rijen) te maken in twee gelijke afstand van elkaar rijen en kolommen. We zijn in feite zegt: “Hé, raster, herhaal twee gelijke kolommen en herhaal twee gelijke rijen binnenkant van jezelf te vormen vier vakken.”

Een kopie van de afbeelding en een grid met witte cellen op de top van de rode rand.

Nu passen we de mengmodus op vermenigvuldigen .mix met behulp van de mix-mix-modus eigendom.

.mix { mix-mix-mode: vermenigvuldigen; }

Het resultaat:

Zoals u kunt zien, de mengmodus van invloed op alle vier de kwadranten in plaats van alleen de twee die we willen zien door middel van. Dat betekent dat we kunnen zien door alle vier de kwadranten, die onthult alle rode gedraaid vak.

We willen weer terug te brengen in de witte verloren we in de top-links-en rechtsonder kwadranten, zodat ze verbergen de rode gedraaid vak achter hen. Laten we het toevoegen van een tweede rooster, deze keer op de top van .mix in de broncode.

<div id=”design”>
<img src=”bird-photo.jpg”>
<div class=”gedraaid-border”></div>

<!– Een tweede rooster –>
<!– Deze keer zijn we met het toevoegen van wit naar het beeld quandrants waar we willen verbergen, het rode frame –>
<div class=”grid”>
<!– Kwadrant 1: Linksboven –>
<div data-wit></div>
<!– Kwadrant 2: Boven Rechts –>
<div></div>
<!– Kwadrant 3: Links Onder –>
<div></div>
<!– Kwadrant 4: Onderaan Rechts –>
<div data-wit></div>
</div>

<div class=”mix”>
<img src=”bird-photo.jpg”>
<div class=”grid”>
<!– Kwadrant 1: Linksboven –>
<div></div>
<!– Kwadrant 2: Boven Rechts –>
<div data-wit></div>
<!– Kwadrant 3: Links Onder –>
<div data-wit></div>
<!– Kwadrant 4: Onderaan Rechts –>
<div></div>
</div>
</div>

</div>

Het resultaat!

Samengevat, de browser maakt de elementen in onze demo zoals deze:
​​

  1. Op de onderste is de vogel afbeelding (vertegenwoordigd door de meest linkse grijze shape in de tekening hieronder)
  2. Dan is een gedraaid rood frame
  3. Op de top van hen is een raster met linksboven en rechtsonder van de witte bloedcellen (hoeken, waar we niet willen zien van het rode kader in het eindresultaat)
  4. Gevolgd door een kopie van de vogel beeld van voor en een rooster met top-rechts en links-witte cellen (hoeken, waar we willen het zien van de rode frame) – zowel gegroepeerd en gezien de overvloeimodus, vermenigvuldigen.

U nog vragen heeft over de aanpak die ik heb gebruikt in deze post. Laat me proberen aan te pakken die.

Hoe zit het met behulp van CSS Maskeren in plaats van CSS overvloeimodi?

Voor die van u bekend bent met CSS Masking – hetzij met behulp van masker-afbeelding of clip-pad – het kan een alternatief voor het gebruik van blend mode.

Ik geef de voorkeur mengen, omdat het een betere browser ondersteunt dan maskers en knippen. Bijvoorbeeld WebKit browsers bieden geen ondersteuning voor SVG <masker> referentie in de CSS-masker-image eigenschap en ze bieden ook gedeeltelijke ondersteuning voor clip-pad waarden, in het bijzonder Safari.

Een andere reden voor het kiezen mengmodus is het gemak van het kunnen gebruiken van grid naar een eenvoudige witte structuur in plaats van te moeten maken foto ‘ s (of ze zijn SVG-of anders).

Dan weer, ik ben er volledig van op de boord van de CSS mengmodus trein, die voor de knock-out, tekst fragmentatie effect… en nu dit. Ik ben helemaal in op.

Waarom gebruik je rooster voor de kwadranten?

De witte dozen nodig in de demo kan gecreëerd worden door een ander middel, natuurlijk, maar raster maakt het wat makkelijker voor me. Bijvoorbeeld, we kunnen leunde op flexbox plaats. Gebruik wat werkt voor u.

Waarom gebruik maken van een data-attribuut op het rooster kwadrant elementen om ze wit?

Ik gebruikte het tijdens het coderen van de demo zonder na te denken veel over – ik denk dat het sneller te typen. Later heb ik gedacht het te wijzigen in een klas, maar gelaten zoals het is, omdat de HTML zag er netter op die manier… althans bij mij. 🙂

Is vermenigvuldigen alleen de mengmodus dat werkt voor dit voorbeeld?

Nee. Als u al weet over de overvloeimodi dan heeft u waarschijnlijk ook weet dat je het kunt scherm donkerder of lichter te krijgen een vergelijkbaar effect. (Zowel scherm en lichter moet zwart grid cellen in plaats van wit.)