Jakiś czas temu ukazały się wyniki ankiety State of CSS 2019. Jedna z zakładek, które szczególnie mnie zainteresowały dotyczyła interakcji. Konkretnie opisuje ona 3 egzotyczne właściwości CSS dotyczące scrolla.
Tekst w kolorze gradientu
Wymyśliłam sobie, że chcę umieścić na tratva.pl tekst w kolorze gradientu. Taki kaprys, a co. Moje pierwsze pomysły przez chwilę zawędrowały w stronę edytorów graficznych typu Gimp czy Gravit Designer. Zaraz potem wróciły na ziemię. Przecież ja to CSSami ogarnę!
O tym, jak jeden placeholder wywrócił moje życie do góry nogami
Już Wam tłumaczę, o co chodzi. Była sobie makieta strony internetowej. A w niej input wraz placeholderem. Chcąc być tym dobrym developerem, o którym marzy po nocach każdy grafik – postawiłam sobie za punkt honoru stylowanie techniką pixel perfect. Więc zabieram się za tego placeholera, pfff jakie proste, pfff jakie przyjemne. Szkoda tylko, że nie działa. Whyyy?
CSS @import vs. Sass @import
To pytanie z serii niestandardowych zagadnień poruszanych na rozmowach rekrutacyjnych. Z mojego doświadczenia powiem Wam, że raczej nie jest popularne. Choć… w sumie idealnie nadaje się na sprawdzenie nieco ponad podstawowej wiedzy z CSSów.
Gradient nie taki straszny, jak go malują
Co pomyślicie, jeśli wam powiem, że stylowanie tła strony za pomocą gradientów to super pomysł? Pewnie części z was w pierwszej chwili stanęły przed oczami kolorowe obrazki rodem sprzed 10 lat, Word Art? :)… Efektowne przejścia między kolorami wywołujące co najmniej oczopląs. I odruch wymiotny. Jednak po kilku sekundach nostalgicznych wspomnień dochodzimy do wniosku, że owszem – gradienty to dobry pomysł na tło.
@rules w CSS. Czy znasz je wszystkie?
Specyficzne reguły CSS, tzw. at-rules, to nic innego jak specjalne wyrażenia w CSS, które zaczynają się od małpki, czyli znaku @. Zbierzmy je dziś do kupy i przypomnijmy sobie, że w ogóle istnieją i do czego służą.
Czy znasz te pseudoselektory CSS?
Na samym początku dogadajmy się co do nazewnictwa. CSS posiada takie bogactwa jak pseudoselektory. Dzielą się one na pseudoklasy (poprzedzone oraz pseudoelementy (poprzedzone ::). Teraz możemy zaczynać
Flexbox: prezentacja + źródła nauki
Dziś dzielę się z Wami moją prezentacją o flexboxie. Przygotowałam ją w celu przedstawienia podstawowych informacji: czym jest flexbox, jakie daje możliwości, czy warto z niego skorzystać. Przyznaję się bez bicia – nie jest ona najświeższej daty. Mimo wszystko uważam ją za uniwersalną pigułkę bazowej wiedzy – dlatego też puszczam ją w świat. Usunęłam z […]
Stylujemy rodzica w CSS :focus-within, :has(), pointer-events
Często podczas stylowania mamy do czynienia z sytuacją, kiedy rodzic musi zareagować na zmiany w dziecku. Proste – coś dzieje się na danym elemencie, a my chcemy, aby na tę akcję odpowiedział element nadrzędny. Łatwo się mówi.
BEM czyli sprytny sposób na CSS
Dziś krótko o BEM. CO TO? Konwencja nazywania klas w HTML i CSS. SKĄD NAZWA? BEM => Block, Element, Modifier Czasami spotkacie się z nazwą BEM101. Ta stojedynka oznacza nic innego jak „informacje podstawowe” (wiki). PRZYKŁAD? CZEMU TAK, A NIE INACZEJ? a) Block -> blok, to abstrakcyjny twór utożsamiający ogólny, reużywalny komponent, np.: .btn {} […]