#cssdemo

06.08.2022, 19:59:48

15

To drzewo w 3D zrobiłem około 8 lat temu w CSS.
Zero skryptowania, według tej instrukcji: webkod.pl - sześcian 3D

Drzewo:
https://codepen.io/rukh/pen/WPXrPV

Domek

rukh - To drzewo w 3D zrobiłem około 8 lat temu w CSS.
Zero skryptowania, według tej... — **źródło:** comment_16598155047Kp02BlYGlcj2oRjlKNOF1.gif
Pobierz

77LatBedeNiedojrzaly

06.08.2022, 20:04:07

3

@rukh: nieźle miras

rukh

07.08.2022, 20:06:52

1

@matkaPewnegoMirka:
Jeszcze jest strona

the-art-of-web.com
Pod linkiem materiał z 2011 roku.
Jeszcze był ciekawy wpis o animacjach CSS.

rukh

18.07.2019, 14:37:01

5

Jeszcze zanim uczyłem się różnego rodzaju Frameworków, to w czystym Javascript pisałem nieraz kod CSS.
(codepen Te skrzynie napisałem w 2014, potem zmieniłem stary JS na ES6)

(→ #cssdemo ←) #webdev #css #html #sass #javascript #programowanie ( ͡° ͜ʖ ͡°)

rukh - Jeszcze zanim uczyłem się różnego rodzaju Frameworków, to w czystym Javascript... — **źródło:** comment_hIY9KVZrjPLgjR2HUmGE7yPXVyrQ3uUY.jpg
Pobierz

Chanandler

18.07.2019, 14:41:22

2

@rukh: teraz też się pisze podobnie (styled-components FTW ( ͡° ͜ʖ ͡°))

magic96

29.07.2019, 18:05:33

0

@Chanandler: kurrrrr a ja 10 lat temu walczyłem o sieć zbudowaną na progressive enhancement ( ͡° ʖ̯ ͡°)

rukh

14.07.2018, 18:55:07

8

Rok temu udostępniłem WPIS o przyciskach w CSS.
Dziś udostępniam kod - CODEPEN, bo ludzie prosili. ( ͡° ͜ʖ ͡°)

#cssdemo #webdev #frontend #html #css #chwalesie

rukh

14.07.2018, 18:55:37

4

Uczę się tworzenia dodatków do Chrome Opera Firefox.

Może kiedyś zrobię dodatek do Wykopu (⌐ ͡■ ͜ʖ ͡■) - WPIS

rukh

27.07.2019, 21:15:39

1

@janekhe: Do darmowego użytku. Możesz używać jak chcesz. Dodawać skrypty, zmieniać rozmiary / kolory. Możesz źródło kodu wpisać skąd pochodzi, nie musisz :)

rukh

05.02.2018, 19:47:04

6

Zapisać poniższy kod w notatniku jako .html

("Nazwa pliku: xd.html")
("Zapisz jako typ: Wszystkie pliki (\*.\*)")

Jest to przykładowe użycie POSITION: STICKY wspierane od 2017 przez większość przeglądarek (Edge, Firefox, Chrome ,

rukh - Zapisać poniższy kod w notatniku jako .html

("Nazwa pliku: xd.html")
("Zap... — **źródło:** comment_Lr7hiWs7DsgBkondNzFrKkEPIQEQzUxS.gif
Pobierz

laki1

05.02.2018, 20:06:41

5

a jakieś hacki do IE? Szefa oczko w głowie

@Arveit: jebnij mu

a.....z

konto usunięte 06.02.2018, 08:49:14

1

@rukh: Pan to je mądry! nie no spoko, wykorzystam w jakimś przyszłym projekcie, fajnie się prezentuje.

rukh

13.01.2018, 11:23:42

5

No i pojąłem kiedy warto używać margin, a kiedy padding. I czemu w przeglądarkach domyślne nie jest zastosowane "box-sizing: border-box;" jako zachowanie się elementów względem marginesów i paddingów.
Nie rozumiem natomiast tego, czemu użycie margin-top przesuwa rodziców w dół, a nie element który chcemy przesunąć (stackoverflow

#css #frontend #html → #cssdemo

rukh - No i pojąłem kiedy warto używać margin, a kiedy padding. I czemu w przeglądark... — **źródło:** comment_21eabCKazqYdAaKU2hBXEKNIFbLG1Ja3.gif
Pobierz

veranoo

13.01.2018, 12:32:20

0

@rukh: to jest CSS? pokaż kod ( ͡° ͜ʖ ͡°)

rukh

13.01.2018, 13:55:14

0

@veranoo:
Codepen 1 - ukrycie RADIO, LABEL FOR zastępuje radio.
Codepen 2 - skrzynie w CSS + JS do kopiuj wklej - dziś użyłbym zmienne w CSS
Codepen 3 - zabawa z perspektywą w perspektywie
Codepen 4 - domek w CSS - dziś użyłbym clip-path i wyrzuciłbym kod w SVG

rukh

11.01.2018, 06:08:54

4

Kończą mi się pomysły. Żaba skacze, i .., i nie mogę zatrzymać animacji, by np. zjechała ze schodów. Musiałbym użyć JS.
Może animacja się rozpocznie od wjechania do góry? Opóźnienie animacji skoków da radę napisać w CSS.

(inny kształt niż graniastosłup - link
(Chrome i Firefox prawidłowo renderują - Firefox renderuje z aliasingiem i wyraźne spadki FPS na wolnym PC - Edge to w ogóle masakra)
#frontend #css

rukh - Kończą mi się pomysły. Żaba skacze, i .., i nie mogę zatrzymać animacji, by np... — **źródło:** comment_vytrb0C0ZirndBPdF9BPA8At48pszrlh.gif
Pobierz

nawykopieod20lat

11.01.2018, 06:15:22

2

@rukh: fajnie wyszło

FearFactory

11.01.2018, 06:25:30 via Android

3

Wooo jaka fajna żabka

rukh

10.01.2018, 07:39:34

8

Część dalsza kodu w CSS. Na razie żaba w trakcie tworzenia. Ale tekstury już są dookoła nałożone. Są nawet drzwi wyjściowe z widokiem na parking.
#css #html #webdev #cssdemo

rukh - Część dalsza kodu w CSS. Na razie żaba w trakcie tworzenia. Ale tekstury już s... — **źródło:** comment_JCw50uXnDYO3oJTZbKvhnlsYSBppqY5v.gif
Pobierz

ludzik

10.01.2018, 07:53:11

0

@rukh: Jest to gdzieś publicznie dostępne? To czysty CSS?

rukh

10.01.2018, 08:41:04 via Android

1

@ludzik: będzie w czystym, jeśli wyrzucę kod JS który odczytuje przeciągania myszy po ekranie, i przypisuje nowe współrzędne do CSSa.
Np. obrót kamery idzie zautomatyzować przez animacje w CSS.

rukh

06.01.2018, 15:43:13

21

#cssdemo #html #css #grafika #grafika3d #webdev →starsze wpisy←

Bardzo rzadko coś udostępniam i porabiam w html'u, ale tym razem chciałem się pochwalić dziełem - Schody ruchome (⌐ ͡■ ͜ʖ ͡■)
Nie jest to winda, o której myślałem 1,5 roku temu, ale zawołam komentujących pod starym wpisem - @h3xxx @garsi @marcinzwwa @macjan_666

Udostępniam kod CSS do starej pracy,

rukh - #cssdemo #html #css #grafika #grafika3d #webdev →starsze wpisy←

Bardzo rzad... — **źródło:** comment_bNrZQ9M2H5O6jNLt8Uks1Mu34FU4XF7K.gif
Pobierz

dqdq1

06.01.2018, 15:58:31

0

@rukh: super! Chetnie zobaczylbym ten kod, bedziesz udostepnial czy zostanje to tajemnica?( ͡° ͜ʖ ͡°)

rukh

06.01.2018, 16:12:08

1

Komentarz usunięty przez autora

rukh

18.06.2017, 13:54:10

9

#webdev #html #css #gif #js #cssdemo
Bardzo prosty przycisk bez użycia JS i pochodnych bibliotek.

Jeden przycisk z użyciem zaledwie jednego , a trwałe przyciśnięcie przy pomocy ukrytego "checkbox" albo "radio" (inaczej musiałbym JS użyć).
Główny prostokąt to ten ciemniejszy czerwony z ustawionym cieniem wokół. A jasnoczerwony to pseudoelement ":before", czyli element zduplikowany bez utworzenia kolejnego elementu w HTML.

rukh - #webdev #html #css #gif #js #cssdemo
Bardzo prosty przycisk bez użycia JS i p... — **źródło:** comment_wkr3lEg6Ofwl3xRAooagr6aKwlM7fI3Z.gif
Pobierz

Rst00

18.06.2017, 14:02:16

4

@MegaZU0: no a jak straci focus to mu przycisk odskoczy więc lipa

rukh

19.06.2017, 06:55:26

0

@addr: przełączanie w CSS bądź w JS to nie robi różnicy chyba że ktoś wpadnie na pomysł wyłączenia JS na stronie. Jednak animowanie w CSS jest wydajniejsze.
@MegaZU0: im wyższa rozdzielczość, czyli większy element, tym niestety mniej wydajne. Już byłoby lepiej w Canvas zrobić, bo on renderuje wyświetlaną grafikę do rastrowej (powiększysz stronę i już widzisz schodkowanie krawędzi).
Dobrze widać to po aplikacjach na smartfony - samo rysujące

rukh

09.04.2017, 12:23:51

641

Pamiętacie jak ostatnio pod tagiem #cssdemo udostępniłem ten gif? Wiem, że nie - dlatego umieszczam wpis ponownie.
Zasada działania w komentarzu.
#css #webdev #html5

rukh

09.04.2017, 12:24:12

238

Tym razem więcej zdradzę, animacja zawdzięcza swą ruchliwość dzięki charakterystyce CSS "transform-origin", "transform-style", "perspective" oraz "transform".
Klikalność natomiast dzięki tagom w HTML - i

rukh - Tym razem więcej zdradzę, animacja zawdzięcza swą ruchliwość dzięki charaktery... — **źródło:** comment_eyrWdR35CzNLREqGZdOTJ5nXOqVdZia1.gif
Pobierz

Shirako

09.04.2017, 12:29:48

344

@rukh: @Wykop dajcie koledze trochę rogali i zaimplementujcie. Wygląda genialnie

rukh

15.02.2017, 13:23:14

9

#html #css #webdev #youtube #cssdemo #gif #ciekawostki
Interfejs Youtube'a w czystym HTML, bez języka wektorowego SVG czy canvas

rukh - #html #css #webdev #youtube #cssdemo #gif #ciekawostki
Interfejs Youtube'a w... — **źródło:** comment_I4VTLVTskiDQBMIAkI4SVKl3X8WmcuBE.gif
Pobierz

Jurigag

15.02.2017, 13:27:41

6

@rukh: no fajny czysty html bez svg

EDIT: a k---a, dodałem tam sobie jest w środku zdania, ja p------e XD

rukh

15.02.2017, 13:54:01

0

@Jurigag: źle się poprawiłem, bo to już nie interfejs (╯︵╰,)
a sam znak Play.

rukh

21.01.2017, 14:44:48

10

Bawiąc się tym przykładem dowiecie się dużo więcej i szybciej o bardzo ważnej - podstawowej właściwości "POSITION" w CSSie (obok "display"), niż z kilkustronnych "nudnych" kursów.
Zmniejszcie okienko byście również mogli zobaczyć jak każda z pozycji zachowuje się do scrollowania kółkiem myszki.
#html #css #webdev #cssdemo ##codepen

rukh

19.01.2017, 19:16:57

17

Ciekawy selektor CSS, który służy głównie do przesuwania się po podtematach na stronie.
Przy okazji adres strony się zmienia - więc po naciśnięciu wstecz strona nam się nie odświeża, a przechodzimy do poprzedniego stanu nawigacji po stronie.
:target można również wykorzystać do podobnych celów co checkbox i radio
w3schools
#css #html5 #cssdemo #gif #webdev starszewpisy

rukh

09.08.2016, 07:29:30

5

#webdev #html5 #css #cssdemo
Tym razem bez źródła, bo to dzieło przypadku.
i przepraszam za zacinający się gif, nagrywałem na laptopowym procesorze A6 od AMD.

rukh - #webdev #html5 #css #cssdemo
Tym razem bez źródła, bo to dzieło przypadku.
... — **źródło:** comment_yK0teBwTTkkveIF1ZlORAzLDuE9ywlHS.gif
Pobierz

isamaul

09.08.2016, 14:02:51

0

@rukh: za mało rdzenióf

rukh

09.08.2016, 14:18:21

0

@isamaul: W rzeczywistości się nic nie tnie - 60fps, Ten model APU skupiony jest na zintegrowanej grafice. To procesor przy nagrywaniu gifów nie wyrabia.

rukh

04.08.2016, 14:42:09

27

#webdev #css #cssdemo #r1 codepen
Byłem z ojcem w Wiedniu na montażach. Podczas monotonnego wnoszenia mebli na 3 piętro zaiskrzyło w mojej głowie, jak toby wykorzystać perspektywę w perspektywie. Można byłoby tworzyć inne figury niż tylko sześciany, bez wykorzystania języka SVG czy Canvas.
W wolnej chwili rozrysowałem swój pomysł, by nie zapomnieć w trakcie montażów szaf.
Sprawdziłem czy zadziała, i oto efekt:

rukh - #webdev #css #cssdemo \#r1 codepen
Byłem z ojcem w Wiedniu na montażach. Podc... — **źródło:** comment_Ad0rKR3kKuLaykJp2bHrvT456PrCeQBK.gif
Pobierz

radziu_11

04.08.2016, 15:38:02

3

@rukh: pewnie często słyszysz: O czym myślisz? :)

rukh

06.08.2016, 19:50:39

7

@Arakiel @brt @Bulew @CortesHernan @czupryniak @DarkAlchemy @Dawiducik @flamner @Folgowsky @Grzychu @Kyczan @laza @michalkortas @mk321 @oddajpierscien @Oinizrum @Pieczor @ppawel @radziu_11 @RicoElectrico @tomuho @Uszatyy @ziolo86
Wołam, bo mam kod

rukh

10.04.2016, 21:39:50

8

#cssdemo #webdev #svg ##codepen
( ͡° ͜ʖ ͡°)ﾉ⌐■-■

rukh

11.04.2016, 06:43:59 via Android

0

@Saeglopur: Link jest za dwoma haszami ##
@isamaul: kursor zanimowany. Skąd mam wiedzieć, czy sarkazm, kiedy nie ma uśmieszka

isamaul

11.04.2016, 06:49:32

1

@rukh: nie zauważyłem linku do codepena, a sam bym to zrobił animując tylko box-shadow :P A tu widzę ktoś kobyłę wsadził do tego efektu.

rukh

06.04.2016, 23:20:55

7

Językiem SVG (XML), służący do opisywania grafiki wektorowej. Polecam się zapoznać, ciekawy język.
Za pomocą [](http://www.w3schools.com/svg/svg_path.asp) narysujemy każdą figurę.
Nie trzeba się trudzić paskudząc kod pseudoelementami z CSS.
#webdev #svg #javascript #cssdemo #codepen_rukh

rukh - Językiem SVG (XML), służący do opisywania grafiki wektorowej. Polecam się zapo... — **źródło:** comment_HrjzaQgfpjQG1d9WWMU7OH7T3BZrbxmD.gif
Pobierz

Saeglopur

07.04.2016, 00:02:47

1

@rukh: #szanuje bo SVG mocno niedoceniony

larvaexotech

07.04.2016, 07:28:56

0

@rukh: W zasadzie SVG to chyba rozwiązanie na te wszystkie hacki typu tworzenie trójkąta za pomocą 'border' w css.

rukh

20.03.2016, 21:55:37

2

#webdev #css #cssdemo
transform-origin tylko dlatego znajduje się w tyle (perspektywicznie za ekranem), by elementy dla nas widoczne zachowały swoje oryginalne proporcje, nie wychodziły przed ekran powodując lekkie rozmazanie.
źródło

rukh

18.03.2016, 20:03:02

1

#nowywykop2016
Przepraszam, ale czemu nie widać starszych postów pod moim tagiem #cssdemo !?
Trzeba do tego albo przełączyć w ustawieniach na stary Wykop, albo wejść przez wersję mobilną.
Szukanie po archiwum jest trochę mało wygodne.
#psujo , @Moderacja