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

11.12.2019, 06:44:23

49

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

11.12.2019, 06:48:28 via Wykop Mobilny (Android)

52

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

maniel

11.12.2019, 06:57:31

19

@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

10.12.2019, 20:55:27

27

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

getin

11.12.2019, 16:48:44

0

@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

11.12.2019, 20:54:03

0

@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

10.12.2019, 12:42:55

27

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

orle

11.12.2019, 09:22:48

7

sub'a

@Mardos: #apostrofoza

Halagar

11.12.2019, 20:47:23

0

@Mardos: Dziękuję :)

rukh

11.12.2019, 08:46:05

12

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 liczbie dla perspektywy X,Y,Z. Trzy przedostatnie liczby dla przemieszczania po przestrzeni. A ostatnia liczba do ogólnego skalowania.

rukh

11.12.2019, 08:50:59

40

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

11.12.2019, 08:58:28

14

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

rukh - Przecinające się dwa powierzchnie dają fajny efekt przestrzennego drzewa. Raze...

the_revenant

11.12.2019, 06:54:40

8

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

paliwoda

11.12.2019, 07:06:31

6

@the_revenant: Opisałeś również mnie i moje doświadczenia. ( ͡° ͜ʖ ͡°) Przez te kombinacje – dla IE tak, dla FF srak, a dla Opery jeszcze inaczej – odpuściłem sobie to rzeźbienie. Do tego ograniczenia GIFa, problemy z PNG w niektórych wersjach przeglądarek (których ludzie nie chcieli aktualizować) – to była masakra, a nie praca. Większość czasu zajmowało obchodzenie problemów, tworzenie rozwiązań dla każdej przeglądarki z osobna

test30

11.12.2019, 10:25:11

5

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,