Mały przerywnik, coś miłego dla oka - animacja kart.
Każda z kart składa się z nagłówka w którym jest ikona, oraz sekcji z opisem i buttonem "więcej". Powiedzmy 3 karty w rzędzie a gdy zmniejszymy stronę karty ustawiają się w pionie.
Zacznijmy od ikon, tutaj opisałem dokładnie jak dodajemy obecnie ikony svg do strony - nowy sposób serwowania ikon SVG
Najpierw ikony które dodajemy na górze strony.
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>