3 Sty 2020

Animacja kart css

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.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="lightning" viewBox="0 0 32 32">
    <path d="M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z"></path>
  </symbol>
  <symbol id="wind" viewBox="0 0 32 32">
    <path d="M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z"></path>
  </symbol>
  <symbol id="sun" viewBox="0 0 32 32">
    <path d="M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z"></path>
  </symbol>
</svg>
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"></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>