Tag: css

Klikalne mapy w CSSie

(no, js też jest potrzebny)
Jakiś czas temu znalazłem bardzo przydatną rzecz – plugin/skrypt z mapami (w różnych rozmiarach i kolorystykach) z wybieralnymi województwami (dla Polski) lub innymi regionami (dla innych krajów Europy). Fajna rzecz, a po podaniu imienia, nazwiska i e-maila – darmowa. I można stosować w projektach komercyjnych!
cssmapsplugin.com

Ł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