Łatwy kreator animacji CSS

Wreszcie. Doczekałem się.

Jest dostępny on-line’owy program do animowania. Prawie jak flash, ongiś. Prawie. No dobra, do flasha ongiś brakuje naprawdę dużo, ale zapowiada się bardzo dobrze. Teraz wszystkie moje strony będą się ruszały. :)

Spróbuj: https://keyframes.app/animate/

Ciekawostki z krainy HTML i CSS

Czy wiedziałeś że CSS może pobrać atrybut znacznika HTML?
<span data-cokolwiek=’tresc’>costam</span>
span::after {
content: attr(data-cokolwiek);
}

https://www.w3schools.com/cssref/func_attr.asp

Czy wiedziałeś że obrazem w <img> można maniulować niemal tak samo jak w background css’a?
<img src=”cos.jpg” style=”object-fit: cover;” alt=””>
img {
object-fit: fill | cover | contain | none | scale-down
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
(a backgroundy nie są indeksowane przez Google?)

Czy wiedziałeś, że samym CSSem możesz robić wykresy tortowe, za pomocą gradientu stożkowego?
.pie-chart {
width: 340px; height: 340px;

border-radius: 50%;
background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
}

https://codepen.io/ananyaneogi/pen/mYmrMJ


Więcej być może wkrótce :)

Filtry CSS

Wiedzieliście że CSS umożliwia bardzo szerokie manipulacje za pomocą filtrów? Wszystkie takie jak powyżej w ilustracji, poniżej są w kodzie:

.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

Niby z przedrostkami -webkit, ale działa też w Firefoxie… :)

Tutaj można zobaczyć działający przykład:
https://codepen.io/rss/pen/ftnDd

Fancybox pozamiatał wszystkie lightboxy

To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.

Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.

Parallax na Twojej stronie www

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.