▶️ Obramowanie przyciągające uwagę | CSS | Fajny CSS

Witajcie, jestem front-end developerem z wieloletnim stażem. Od prawie roku rozwijam swój kanał na YT. Jeśli jest ktoś zainteresowany podrzucam mój ostatni materiał.

[maniel]

a pamiętacie jak kiedyś generowało się 3 obrazki dla przycisku i obsługiwało je przez onmouseover itp?! ja pamiętam!!!11

[Fallenzgr]

@maniel: kiedyś się robiło 4 obrazki dla zaokrąglony rogów ( ͡° ͜ʖ ͡°)

[maniel]

@Fallenzgr: dokładnie, i layout na tabelach, frameset;-) ale pamiętam jak kiedyś na zaliczenie zrobiłem stronę w XHTML przy użyciu CSS, oczywiście nie działało na IE6.0, czułem ten power

[getin]

Takie efekty są w hurcie: https://freefrontend.com/css-cards/
imho ciekawszy pseudo-3D: https://codepen.io/robin-dela/pen/jVddbq

[getin]

@Kargaroth: tak jest, ten czas można poświęcić na inne rzeczy, a animacje to już raczej wychodzą z mody, no chyba, że mają zająć użytkownika, a w tle ładują się inne sekcje strony

[Halagar]

@Kargaroth: Witaj :) bawię się w takie rzeczy, bo chciałem po prostu spróbować czegoś nowego, a przy okazji może pomóc kilku osobom, które dopiero zaczynają przygodę z frontem ... nie planuje pokazywać się na konferencjach :)

[Mardos]

krótko i zwięźle łap sub'a ( ͡° ͜ʖ ͡°)

[orle]

sub'a

@Mardos: #apostrofoza

[Halagar]

@Mardos: Dziękuję :)

[rukh]

Bawiłem się w 2014 z CSS po przestrzeni. Firefox miał wtedy problemy z przetwarzaniem 3D, Chrome jedynie sobie radził

Polecam się poćwiczyć z właściwością matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)
3 pierwsze liczby z tej właściwości służą do modyfikacji współrzędnych osi X (1,0,0).
Jak powiększy do (2,0,0), to obiekt jest 2x szerszy. (0.5,0,0) - 2x węższy. (1,1,0) robi efekt Skew, czyli taki jakby romb od jednej strony.
W tych liczbach są jeszcze ukryte współrzędne dla osi Y i Z, po jednej

[rukh]

Miałem gotowy kod na obracające się plusy i minusy na Wykopie.
Zajęłoby mi to kilka godzin by ogarnąć lekki bałagan w kodzie Wykopu, by przystosować mój kod do Wykopowego, i w końcu udostępnić skrypcik, albo dodatek do przeglądarek :)

[rukh]

Przecinające się dwa powierzchnie dają fajny efekt przestrzennego drzewa. Razem z cieniem robi jeszcze lepsze wrażenie.
Wszystko w CSS, z wyjątkiem obracającej się kamery. Zmodyfikowałem kod Javascript przemieszczania obrazków myszą, i współrzędne myszy wrzuca pod kręcenie się obiektu. LINK

[the_revenant]

Ech, a ja robiłem frontend w czasach, kiedy wszystkie elementy graficzne były robione w Photoshopie jako bitmapy, wyrównywanie elementów w pionie było masakrycznie trudne, a i nawet w poziomie nie zawsze działało, każdy "efekt" trzeba było sobie wybić z głowy, bo w "najważniejszej przeglądarce" nie działa, JS w każdej przeglądarce był inny, do tego tak siermiężny, że część ludzi zastąpiła jego używanie jakimś frameworkiem. Trauma na wiele lat. Boziu, jakby to wyglądało

[test30]

Wow, Krzysztof

Jestem pod ogromnym wrażeniem tego materiału wideo,

nie z uwagi na przekaz, który jest oczywiście interesujący,
ale z uwagi na sposób, w jaki wszystko prezentujesz,

[Halagar]

@test30: Bardzo Ci dziękuję za ten wpis! Duży kop energii :)

[d.....c]

@test30: @Halagar: potwierdzam

[danoxide]

https://tympanus.net/codrops/ - łapcie jeszcze ciekawego linka ode mnie :)

[lukaszw_]

@Halagar: Weź zainwestuj w mikrofon.

[Halagar]

@lukaszw_: będzie na pewno :) dzięki :)

[WlasnieInstalujeWindowsa]

Fajnie byłoby tak umieć w klepanie kodu ( ͡° ʖ̯ ͡°)

[piotr-ciechowski]

niech mi ktos lopatologicznie wytlumaczy o co chodzi w filmie prosze