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
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
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;
}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"></animate>
</rect>
<rect x="20%" y="0" height="10%" width="15%">
<animate attributeName="height" from="0" to="10%" dur=".5s"></animate>
</rect>
<rect x="40%" y="0" height="20%" width="15%">
<animate attributeName="height" from="0" to="20%" dur=".5s"></animate>
</rect>
<rect x="60%" y="0" height="70%" width="15%">
<animate attributeName="height" from="0" to="70%" dur=".5s"></animate>
</rect>
<rect x="80%" y="0" height="40%" width="15%">
<animate attributeName="height" from="0" to="40%" dur=".5s"></animate>
</rect>
</g>
</svg>