HTML5 & CSS3

CSS Masking – co może nas czekać w przyszłości?

CSS Masking - co nas czeka w przyszłości?W3C intensywnie pracuje nad najrozmaitszymi nowościami. Oprócz mitycznego już flex-box’a ostatnimi czasy dość intensywnie opisuje się możliwe zastosowania dla tzw. CSS Masking. Co to jest i jak może wyglądać przyszła rekomendacja? To mam nadzieję uda się nam przedstawić (pokrótce) na łamach tego artykułu.

CSS Masking daje nam możliwość używania arkusza stylów trochę tak jak używa się programu graficznego. Każdy kto kiedykolwiek miał coś wspólnego z tworzeniem stron internetowych pewnie kojarzy schemat znany z Photoshop’a, czy GIMP’a. Mniej więcej podobne możliwości chce nam zaoferować W3C w ramach tworzącej się specyfikacji CSS Masking.

Co to jest?

Maski w css pozwalają na częściowe lub całkowite ukrycie elementów wizualnych (zasłonięcie). Elementem, który tworzy maskę jest element graficzny. Dzięki temu osiągniemy efekt zbliżony do wspomnianego wyżej.

Skutki implementacji tej technologii na szerszą skalę są raczej oczywiste. Choć pewnie nie da się całkowicie zastąpić programów graficznych to jednak będziemy mieli większą możliwosć „obrabiania” grafik bezpośrednio w arkuszu stylów i nie będą do tego potrzebne sztuczki związane z pozycjonowaniem absolutnym.

Jak działają maski?

Nie będzie to wielkie zaskoczenie ;) Maski w CSS mają być jakby warstwami nakładanymi na inne. W ten sposób będziemy mogli dostosowywać je do naszych potrzeb i modyfikować wygląd np. zdjęć zamieszczanych na stronie www.

Zobaczmy kilka przykładów kodu ze strony W3C:

body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(tl.png), url(tr.png) }
img { mask-image: url(#mask) }
span { mask-image: url(resources.svg#mask2) }
p { mask-image: url(#mask), url(tl.png) }
img { mask-image: url(#mask), url(resources.svg#mask2) }

Powyższa składnia może wyglądać trochę obco, ale w końcu jest to nowość. Niestety im dalej zagłębiamy się w dokument W3C tym poziom trudności staje się większy:

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
<radialGradient id="radialFill">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="black" offset="1"/>
    </radialGradient>
    <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>

<style>
    rect {
    mask-image: url(#SVGMask);
    mask-source-type: luminance;
    }
</style>

<rect width="200" height="200" fill="green"/>

Kiedy będzie można to stosować?

Na pewno nie dzisiaj i nie jutro. Wdrażanie powyższych rozwiązań w komercyjnych projektach było by bardzo niebezpieczne ponieważ Working Draft W3C może się jeszcze zmienić. To co możemy zrobić to poeksperymentować i zgłaszać uwagi do W3C – dzięki temu będziemy mieć realny wpływ na rozwój technologii internetowej.

Pozytywną stroną tego wszystkiego jest fakt, że po przeczytaniu dokumentu W3C widać, iż już niedługo (w takiej czy innej formie) otrzymamy potężne narzędzie operowania grafiką, które będzie dostępne bezpośrednio w arkuszu CSS naszej witryny. Mnogość nowych właściwości i wartości napawa nadzieją na przyszłość.

Wszystkie przykłady kodu pochodzą z dokumentu W3C: CSS Masking Level 1 W3C Working Draft 20 June 2013.

Image courtesy of Victor Habbick at FreeDigitalPhotos.net

komentarzy 7

  • Awatar
    Marcin Jagielnicki

    27 lipca 2013 11:08

    Swoją drogą… i tak będziemy musieli czekać na implementację tego rozwiązania w różnych przeglądarkach, co też do szybkiego procesu nie należy.

    Odpowiedz
    • Awatar
      Mr.Mr

      27 lipca 2013 14:20

      Niestety. Natomiast już teraz warto być na bieżąco. Maski mogą być rewolucyjnym rozwiązaniem w CSS.

      Odpowiedz
    • Awatar
      Karol

      26 listopada 2013 14:08

      Dlatego powinniśmy nawoływać ludzi do korzystania z przeglądarek które szybko reagują na zmiany – mam tu na myśli chrome’a który najszybciej implementuje nowinki.

      Odpowiedz
  • Awatar
    Analityk programista

    29 sierpnia 2013 21:31

    Ja już piszę aplikacje używając Html5 css3 JavaScript i do tego ASP.NET dla SQL Server! Panowie to jest rewelacja i jedyna przyszłość!

    Odpowiedz
    • Awatar
      Michał Kortas

      29 sierpnia 2013 21:36

      To zapewne jest przyszłość internetu, jednak nigdy nie mogłem się „przełamać” i usiąść do nauki ASP.NET. Mam chyba zbyt mało motywacji i czasu :-(

      Odpowiedz
      • Awatar
        feamoignargfaionakfj9ajfopamjv

        29 sierpnia 2013 21:37

        A ja za dużą niechęć do MS ;)

        Odpowiedz
      • Awatar
        Mr.Mr

        29 sierpnia 2013 21:42

        dobre :)

        Odpowiedz

Zostaw odpowiedź