Tag: projektowanie

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

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

Darmowy generator wykresów

Quickchart.io to rewelacyjny system łatwego generowania wykresów w czasie rzeczywistym, poprzez zmianę parametrów w nazwie obrazka wykresu.

Rewelacyjnie to działa. Podajesz tytuły, wartości, typ wykresu, kolory, skale – po prostu wszystko. I aby przyspieszyć cały proces – możesz edytować kod wprost pod powyższym linkiem, a potem wkleić na swoją stronę.

Proste, użyteczne, wygodne. Takich narzędzi szukamy. :)

Sprawdzanie poczucia estetyki UI/UX

Zobaczcie cantunsee.space.

Can’t unsee to pseudo-gra, w której musisz oznaczyć bardziej prawidłowy (ze wszechmiar) projekt elementu interfejsu graficznego.

Na początku jest łatwo i prosto, potem następuje kilka błędów, a potem trzeba się dobrze przypatrzyć, żeby oznaczyć ten dobry obrazek. Trudne, czasochłonne, ale uczące i dające dużo satysfakcji. Szczególnie projektantom. Polecam Can’t unsee – nie będzie to czas zmarnowany!

Zrób sobie gluta

Mogłoby się wydawać, że stworzenie grafiki z losowym kształtem, który jednak nie jest totalnie losowy, ale jako-tako pasuje do naszej wizji, jest proste.

I może nawet tak jest – po kilku próbach masz spoko losowy kształt…
Ale potrzebujesz takich jeszcze 10. I muszą się różnić od siebie.

Zaczyna być niełatwo, prawda?

Nieprawda. Bo wystarczy odpalić Blobmakera. To mała webappka która tworzy gluty, bloby, i inne losowe kształty.
Możemy sobie ustawić kolor, złożoność i stopień zakrzywiania nibynóżek. ;)
I możemy wynik ściągnąć w svg.

I to jest spoko, niczego więcej nie trzeba. A teraz kliknij powyżej i zrób sobie gluta.