10 trik贸w JavaScript, kt贸re u艂atwi膮 Ci 偶ycie!

Krzysiek Furtak JavaScript 0 Comments

Powiedzmy sobie szczerze, programowanie w JavaScript to nie jest lekki kawa艂ek chleba聽馃檪 Czasami trzeba si臋 nie藕le napoci膰, 偶eby napisa膰 co艣 dobrze dzia艂aj膮cego, a zarazem 艂adnego od strony kodu. Poni偶ej znajdziesz 10 trik贸w, dzi臋ki kt贸rym Tw贸j kod b臋dzie kr贸tszy, bardziej czytelny, a przede wszystkim prostszy do napisania. 1. Sprawdzenie czy funkcja JavaScript jest wspierana przez przegl膮dark臋 Pisz膮c aplikacje webowe, a ju偶 …

CSS user-select – blokowanie zaznaczania tekstu lub medi贸w

Krzysiek Furtak CSS/SCSS 0 Comments

Blokowanie zaznaczania tekstu to cz臋sto wa偶ny element UI naszej strony. Jest wiele聽element贸w naszych witryn lub aplikacji, kt贸re w interakcji z u偶ytkownikiem nie powinny si臋 zaznacza膰. Prostym przyk艂adem s膮 przyciski, w wielu przypadkach elementy menu, ikonki serwowane w postaci czcionki itp.

CSS @supports

Krzysiek Furtak CSS/SCSS 1 Comment

Ka偶dy developer doskonale wie, 偶e nasze projekty musimy testowa膰 pod r贸偶nymi przegl膮darkami. Im bardziej nowatorskie rozwi膮zania chcemy zastosowa膰, tym bardziej musimy si臋 do tego przy艂o偶y膰. Na szcz臋艣cie mamy wiele narz臋dzi do wykrywania czy dana przegl膮darka wspiera nasze rozwi膮zanie. Doskonale sprawdza si臋 w tym biblioteka Modernizr. Warto jednak zwr贸ci膰 uwag臋 na now膮 funkcj臋 CSS o nazwie @supports.

Atrybut download w HTML5

Krzysiek Furtak HTML 0 Comments

Wraz z nadej艣ciem HTML5 nast膮pi艂a ma艂a rewolucja w podej艣ciu do stron internetowych. Zawdzi臋czamy to tym wszystkim „zabawkom”, kt贸re dostali艣my do r膮k. Opr贸cz tych du偶ych, kt贸re w po艂膮czeniu z JavaScript’em daj膮 nam mas臋 mo偶liwo艣ci, dostali艣my tak偶e mniejsze. I o jednej z takich mniejszych rzeczy chc臋 dzi艣 napisa膰.

Obliczenia w CSS

Krzysiek Furtak CSS/SCSS 0 Comments

Aktualnie w arkuszach styli mamy ju偶聽do dyspozycji animacje, placeholder’y czy nawet obserwatory event贸w. Obliczenia w CSS’ie to kolejny spos贸b na odci膮偶enie JavaScriptu. Jeszcze nie tak dawno nawet najprostrze kalkulacje w arkuszach by艂y nie do pomy艣lenia. Wynieka艂o to g艂贸wnie ze statycznego harakteru samego CSS’a.

CSS Flexbox layout z dwoma kolumnami

Krzysiek Furtak CSS/SCSS 0 Comments

Nie tak dawno pisa艂em o zastosowaniu w艂a艣ciwo艣ci flexbox do centrowania element贸w w pionie. Mo偶esz o tym przeczy膰 w artykule CSS Vertical Center i Flexbox. Jak si臋 sami przekonali艣my flexbox jest bardzo uniwersalna i ekstremalnie prosta w u偶yciu. Dzi艣 zrobimy layout sk艂adaj膮cy si臋 z dw贸ch kolumn.

SCSS proste nak艂adanie gradient贸w

Krzysiek Furtak Code Snippets, CSS/SCSS, CSS/SCSS/LESS 2 Comments

B膮d藕my szczerzy … nak艂adanie gradient贸w w CSS’ie nie jest proste i przyjemne. Nie do艣膰, 偶e trzeba pami臋ta膰 o prefiksach, to jeszcze poszczeg贸lne prefiksy maj膮 r贸偶n膮 konstrukcj臋. Je艣li u偶ywasz w projekcie SASS’贸w, mo偶esz w znacznym stopniu u艂atwi膰 sobie prace!

Zmieniamy domy艣lny kursor za pomoc膮 CSS

Krzysiek Furtak CSS/SCSS 1 Comment

Na pewno wi臋kszo艣膰 z Was o tym s艂ysza艂a, ale dla przypomnienia zmienimy dzi艣 domy艣lny kursor myszy. Kursor mo偶emy zmieni膰 na dowoln膮 grafik臋 przez nas wybran膮. S艂u偶y do tego jedynie jedna linia kodu styli CSS.

CSS Flipping Animation

Krzysiek Furtak CSS/SCSS 0 Comments

Dzi艣 troch臋 zabawy z animacjami CSS. Zrobimy efekt odwracanej karty. Nie musimy do tego celu wykorzystywa膰 ani jednej linijki JavaScript’u. Z reszt膮 … zobacz sam 馃檪

CSS text gradient

Krzysiek Furtak CSS 0 Comments

Moim zdaniem jednym z 艂adniejszych efekt贸w tekstowych jakie mo偶emy osi膮gn膮膰 za pomoc膮 HTMLa i CSSa jest gradient na tek艣cie. Wykorzystujemy do tego: background-image jako linear-gradient, background-clip: text;, text-fill-color: transparent; oraz w pewnych przypadkach line-height. Rozpatrzymy dwa przypadki. W pierwszym pokolorujemy linie tekstu na r贸偶ne kolory, a w drugim na艂o偶ymy na tekst gradient. R贸偶ne kolory linii tekstu W tym przypadku przyda …