16 Gru 2019

Gradient text CSS/JS

Poniżej wygląd tekstu jaki chcemy uzyskać.

Będą to dwa przykłady. Pierwszy w czystym css, nie będzie kompatybilny ze starymi przeglądarkami czyli IE11 i niżej, druga zaś będzie wersją opartą na SVG + javascript i co najzabawniejsze działa nawet w IE9 przetestowane 😉
Wielkość czcionki będzie ustawiania dynamicznie za po pomocą vw – viewport width, na temat jednostek polecam skarbnicę wiedzy w postaci tej strony developer.mozilla.org

12 Gru 2019

PostCSS narzędzie do przekształcania CSS w JavaScript

W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉
Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki.

Do czego można to wykorzystać, a no do miliona rzeczy 😉 Najczęściej używany plugin prze zemnie to autoprefixer.
Co on nam daje, a no to że nie musimy martwić dodawaniem prefiksów. Powiedzmy piszemy display: flex; a w wyniku dostajemy display: -webkit-box;display: -ms-flexbox;display: flex; Oczywiście zależne to jest od tego co ustalimy w package.json
W naszym package.json musimy dodać taki wpis, oczywiście ten wpis jest uzależniony od tego jakie przeglądarki chcemy wspierać:

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

Ten wpis można by opisać tak, ostatnie 2 wersje przeglądarek, więcej niże 1% używa tych przeglądarek, no i ostatni wpis „nie martwe” czyli takie przeglądarki, które nadal są używane. Jeżeli chcemy zobaczyć jak budować tą listę polecam zapoznać się z browserslist oraz sprawdzić jakie jest pokrycie tego wpisu na tej stronie browserl.ist

24 Cze 2017

Nowy sposób serwowania ikon SVG

Sposób ten działa nawet w starszych przeglądarkach takich jak IE9.
Jednym z pierwszych możliwości jest budowa zestawu ikon które umieszczam od razu za „body” dla czego tutaj a nie na dole strony przed zamknięciem „/body” otóż gdy strona jest zbyt złożona i renderuje się dość wolno lub otwieramy stronę na telefonie i to w dodatku na słabym internecie np. 2G to ikony nie są widoczne od razu tylko renderują się dopiero po jakimś czasie. Sprawdzone i przetestowane.

<svg xmlns="http://www.w3.org/2000/svg" style="width: 0; height: 0; display: none;">
  <symbol id="icon-home" viewBox="0 0 32 32">
    <title>home</title>
    <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
  </symbol>
  <symbol id="icon-pencil" viewBox="0 0 32 32">
    <title>pencil</title>
    <path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z">
    </path>
  </symbol>
</svg>

Teraz w miejscu w którym chcemy umieścić ikonę

<svg class="icon icon-home">
  <use xlink:href="#icon-home"></use>
</svg>

Oczywiście nie obejdzie się bez dodania odpowiedniego stylu dla icon 🙂

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
27 Lut 2014

SVG animacja

Najpierw styl którym nadajemy kolor wykresów.

<style>
    rect {
        fill:red;
    }
</style>

Teraz umieszczamy svg w stronie.

<svg width="500px" height="300px">
    <g transform="scale(1, -1) translate(0, -300)">
        <rect x="0" y="0" height="30%" width="15%">
            <animate attributeName="height" from="0" to="30%" dur=".5s"/>
        </rect>
        <rect x="20%" y="0" height="10%" width="15%">
            <animate attributeName="height" from="0" to="10%" dur=".5s"/>
        </rect>
        <rect x="40%" y="0" height="20%" width="15%">
            <animate attributeName="height" from="0" to="20%" dur=".5s"/>
        </rect>
        <rect x="60%" y="0" height="70%" width="15%">
            <animate attributeName="height" from="0" to="70%" dur=".5s"/>
        </rect>
        <rect x="80%" y="0" height="40%" width="15%">
            <animate attributeName="height" from="0" to="40%" dur=".5s"/>
        </rect>

    </g>
</svg>

Poniżej działający przykład, jak to zwykle bywa działa tylko w niektórych przeglądarkach 😉