Horúce nové pravidlá CSS, ktoré môžete vyskúšať teraz

Strana 3 zo 4: Opakovanie pozadia, pomer strán, režim prelínania

Opakovanie pozadia (guľaté a medzery)

Opakovanie pozadia je stabilnou súčasťou CSS už niečo, čo sa javí ako večnosť, ale sú k dispozícii dve menej známe možnosti - Round a Space. Obe tieto možnosti fungujú tak, že sa zabezpečí, že 100% deklarovaného obrázka na pozadí sa bude opakovať a bude vždy viditeľné. Pracujú mierne odlišnými spôsobmi a budú mať jemný rozdiel v tom, ako sa obrázky zobrazujú.

Možnosť zaoblenia zmení veľkosť vášho obrázka tak, aby sa zmestil

The okrúhly Táto možnosť zmení veľkosť vášho obrázka tak, aby sa zmestil

opakovanie pozadia: okrúhle; opakuje váš obrázok na pozadí bez toho, aby ste ho orezali. Namiesto toho rovnomerne zmení veľkosť obrázka, kým nebude dostatok miesta na to, aby sa do neho vošla ďalšia dlaždica.



Voľba medzery vytvorí medzi vašimi dlaždicami ďalší priestor

The priestor Táto voľba vytvorí ďalší priestor medzi dlaždicami

Opakovanie pozadia: medzera; dlaždice obrázok v oboch smeroch. Je to podobné ako okrúhle, až na to, že namiesto zmeny veľkosti obrázka, kým nezostane viac priestoru na zobrazenie inej dlaždice, sa vytvorí medzi dlaždicami biely priestor, kým nebude možné zobraziť ďalší riadok alebo stĺpec.

Ani jedna z týchto možností nie je taká nová, ale dá vám tak trochu navyše kontrolu nad spôsobom obkladania v rôznych veľkostiach výrezu. Čo je tiež veľmi užitočné pri týchto možnostiach, je to, že ich podporuje každý prehľadávač.

mediálne dotazy s pomerom strán

Zavedenie mediálnych otázok zmenilo spôsob, akým staviame webové stránky. Dostali sme príležitosť vytvoriť naše rozloženia v závislosti od toho, ako si používateľ prezeral stránku. Najčastejšie by to vychádzalo iba zo šírky alebo výšky výrezu, ale nedávno bola pridaná nová možnosť.

prečo sú notebooky moleskine také drahé

Teraz ste schopní použiť CSS na základe výrezu stránky pomocou mediálneho dotazu, ktorý zistí pomer strán okna, ktoré prehliadate. Ste tiež schopní zistiť, či sa okno zhoduje s maximálnym alebo minimálnym pomerom strán.

Kliknutím na ikonu vpravo hore obrázok zväčšíte

Kliknutím na ikonu vpravo hore obrázok zväčšíte

Kód, ktorý sa dá použiť, je pomerne jednoduchý. Zhoduje sa s konvenciou použitou v akejkoľvek inej deklarácii mediálneho dotazu - napríklad:

@media screen and (aspect-ratio: 16/9) { Your CSS } @media screen and (min-aspect-ratio: 16/9) { Your CSS }

Existuje iba niekoľko scenárov, v ktorých pomer strán užitočné by boli mediálne dotazy. Ak staviate niečo špeciálne pre mobilné zariadenia, môžete použiť min / max pomer strán zacieliť na to, či používateľ prehľadáva v režime na šírku alebo na výšku (aj keď toto použitie je možné vyriešiť aj pomocou dotazu na orientačné médium).

Avšak pomer strán je podporovaný všetkými hlavnými prehľadávačmi, pričom podpora prehliadača Internet Explorer siaha až do verzie 9.

Režim miešania

Aplikácia obrázkov na pozadí je zvyčajne stabilnou súčasťou každého zostavenia projektu. Ale niekedy je dobré byť trochu kreatívnejší s našimi obrázkami na pozadí, ktoré sú kde zmiešaný režim príde.

Namiesto toho, aby ste pozadie umiestnili navrch farby, zmiešaný režim kombinuje obrázok pozadia s farbou pozadia v definovanom štýle. Možnosti, ktoré môžete použiť, sú normálne, násobenie, obrazovka, prekrytie, stmavenie, zosvetlenie, dodge color, sýtosť, farba a svietivosť.

Zľava hore v smere hodinových ručičiek: prekrytie, rozdiel, zreťazené efekty, svietivosť (kliknutím na ikonu vpravo hore obrázok zväčšíte)

ako nakresliť skutočného medveďa
Zľava hore v smere hodinových ručičiek: prekrytie, rozdiel, zreťazené efekty, svietivosť (kliknutím na ikonu vpravo hore obrázok zväčšíte)

Poďme sa pozrieť na niektoré z možností. Na obrázku vyššie máme:

Prekrytie (hore v ľavo)
Zmieša sa súčasne obrázok aj farba pozadia tak, aby odrážala tmavosť alebo ľahkosť oblasti pozadia.

Rozdiel (hore vpravo)
Odčíta tmavšie farby od obrázka pozadia / farby od najsvetlejších odtieňov, čím sa získa veľmi vysoký kontrastný efekt.

previesť dennú fotografiu na noc online

Svietivosť (vľavo dole)
Zachováva najvyššiu farbu pri slabnúcom odtieni a sýtosti pozadia, aby získal vyblednutý starý vzhľad fotografie.

Kód, ktorý sa dá použiť na zmiešanie pozadia, je pomerne jednoduchý - potrebujete iba jeden riadok CSS na zlúčenie obrázka pozadia s farbou pozadia:

background-blend-mode: *blending-option*;

Pokiaľ ide o aplikáciu zmesí na obrázok na pozadí, nemusíte používať iba jeden režim. Môžete spojiť viac režimov miešania dohromady a vytvoriť tak jedinečnejší efekt (zobrazený v pravom dolnom rohu vyššie uvedeného obrázka) pomocou niečoho podobného ako je uvedené nižšie:

background-blend-mode: multiply, darken;

Režimy prelínania sú podporované takmer vo všetkých prehliadačoch (vrátane všetkých verzií Microsoft Edge), s výnimkou všetkých verzií prehľadávačov Internet Explorer a Opera Mini.

Ďalšia stránka: Prispôsobenie objektu, tvar mimo, currentColour a ďalšie

  • 1
  • dva
  • 3
  • 4

Aktuálna stránka: Opakovanie pozadia, pomer strán, režim prelínania

Predchádzajúca stránka Filtre CSS a premenné CSS Ďalšia strana Prispôsobenie objektu, tvar mimo, currentColour a ďalšie