Kawałek Kodu

Pomimo, że multum serwisów udostępnia multum fontów do użycia na stronach internetowych, to czasem jednak brakuje nam odpowiedniego. Dziś o stylu na miarę plazmy, czyli czwartego stanu skupienia materii obok ciekłego, stałego i gazowego (regular, bold, italic). O stylu, który możemy zastosować do dowolnej czcionki, a szczególnie tych, które tego stylu standardowo... nie mają.

Dziurawiec niepospolity.

Tak jak dziurawiec w naturze poprawia apetyt, tak dzisiejszy efekt zaspokoi go. Czy wartość tytułowej właściwości rzeczywiście istnieje? Nie, choć pokażę Ci jak w prosty sposób go "wytworzyć". Przekształcimy dowolny font w jego dziurawą wersję, czyli taką gdzie zostanie obrys każdej litery, ale wnętrze będzie przezroczyste, tak więc będzie prześwitywać przez nie pozostała część strony.

Będziemy potrzebować do tego kilku filtrów bazowych SVG. A! To, że użyjemy filtrów SVG, nie oznacza, że efekt będzie działał tylko w obrębie SVG - będziesz mógł go używać do standardowych elementów HTML.

A więc będą potrzebne filtry:

feMorphology - filtr, który na podstawie danych źródłowych pogrubi nam obiekt,
feFlood - wypełni obszar kolorem,
feComposite - wykona jedną z operacji mieszania obszarów (tzw. kompozycja Porter-Duff).

Cały nasz filtr będzie wyglądał tak:

<!-- <svg> nie musi być widoczny,
     więc ustawiamy wymiary na 0
-->
<svg width="0" height="0">

<!-- nasz cały filtr -->
  <filter id="hollow">

<!-- pierwszy filtr bazowy,
     wejściem jest kanał alpha,
     wszystko co nieprzezroczyste
     lub półprzezroczyste
     pogrubiamy o 1 piksel,
     czyli nasz obiekt/litera
     rozszerzy się o 1px w każdym
     kierunku, jeśli chcesz zmienić
     grubość obrysu, to możesz
     ustalać go niezależnie
     w obydwu osiach (wartość
     atrybutu radius)
-->
    <feMorphology
      operator="dilate"
      radius="1 1"
      in="SourceAlpha"
      result="morphology"
    />

<!-- wlewamy kolor pod obszar litery,
     czyli cały prostokąt, który zajmuje,
     wynik przechowujemy w zmiennej flood
-->
    <feFlood
      flood-color="#000"
      result="flood"
    />

<!-- łączymy wynik pogrubienia
     z prostokątnym, kolorowym
     obszarem, dzięki czemu
     otrzymujemy część wspólną,
     czyli pokolorowany, pogrubiony
     obiekt, wynik przechowujemy
     w zmiennej composite
-->
    <feComposite
      in="flood"
      in2="morphology"
      operator="in"
      result="composite"
    />

<!-- teraz łączymy pokolorowany,
     pogrubiony obiekt z wejściowymi
     danymi, a dzięki operatorowi out,
     zostanie usunięta część wspólna
     i obiekt wejściowy, czyli zostanie
     tylko dorysowany, pogrubiony brzeg
-->
    <feComposite
      in="composite"
      in2="SourceAlpha"
      operator="out"
    />
  </filter>
</svg>

Aby użyć filtr wystarczy dodać dla wybranego elementu właściwość CSS:

p{
  filter: url(#hollow);
}

Efekt będzie taki:

Niestety właściwość color nie ma wpływu na kolor obrysu, bo ten jest zależny od wartości atrybutu flood-color filtra bazowego feFlood. Nic nie stoi na przeszkodzie, aby zmieniać go w CSS (w przypadku tego atrybutu jest to możliwe):

/* odnosimy się poprzez
   id filtra do elementu
   feFlood
*/
#hollow feFlood {
  flood-color: #f00;
}

Pamiętaj jednak, że zmiana tej wartości wpływa na każdy tekst, dla którego użyto tego filtra.

Jeśli teraz pooksperymentujemy z filtrem to okaże się, że w przypadku kiedy używamy czarnego obrysu, możemy pozbyć się feFlood, bo efekt pierwszego filtra to czarne piksele, a co za tym idzie możemy pozbyć się również drugiego filtra feComposite, bo po co mamy farbować czarny obszar na czarny kolor. Filtr możemy wtedy uprościć do:

<svg width="0" height="0">
  <filter id="hollow">
    <feMorphology
      operator="dilate"
      radius="1 1"
      in="SourceAlpha"
      result="morphology"
    />
<!-- teraz łączymy bezpośrednio
     czarny pogrubiony obiekt
     z obiektem źródłowym
-->
    <feComposite
      in="morphology"
      in2="SourceAlpha"
      operator="out"
    />
  </filter>
</svg>

Słowa słowami, ale przydałby się jeszcze rysunek wyjaśniający jak działa ten filtr:

Nie obyłoby się bez wzmianki o Edge, bo na tej przeglądarce do tej pory w CSS nie działają SVG-owe filtry. Jak mówią, to "ostatnie podrygi konającej ostrygi", miejmy więc nadzieję, że nowa wersja oparta o Chromium połączy najlepsze cechy obydwu, a wymieniane w Wikipedii "with enhancements" nie spowodują jej powrotu do stylu pracy ala IE6. Do przeczytania!

Przydatne linki:
Operacje łączenia Porter-Duff.
Filtr bazowy feMorphology.
Filtr bazowy feFlood.
Filtr bazowy feComposite.