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 z otwieralnymi drzwiami i oknami:
(tutaj JS robi za obrót kamerą, wpisuje współrzędne kursora w kod CSS)
https://codepen.io/rukh/pen/zBOyoz

Otwieralne skrzynie:
https://codepen.io/rukh/pen/jbMrmo

Skacząca żaba w galerii handlowej i schody ruchome:
link.gif


#cssdemo #html #css #webdev

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 ( ͡° ͜ʖ ͡°)

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

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

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 , ..)

#cssdemo #frontend #css #webdev

  .pole_bezowe {
    margin-top: 100px;
    width: 400px;
    height: 600px;
    background-color: moccasin;
  }


  .pole_bezowe > .pole_zielone {
    position: sticky;
    top: 0;

    width: 100%;
    height: 200px;
    background-color: lightgreen;
    box-shadow: inset 0 0 0 4px;
  }

  #powiekszacz_pionowej_zawartosci_strony {Pokaż całość

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

Pokaż spoiler

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 #gif #cssdemo

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

Pokaż spoiler

#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, w której użyłem JS jedynie do uzupełnieniaPokaż całość

#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.

Pokaż spoiler

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

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

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

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

#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.

#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:

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

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

Pokaż spoiler

#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

#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

#css #webdev #cssdemo
Maj 2014. Nie pojmowałem wtedy jeszcze pseudoelementów, stąd wstyd dzielić się brudnym kodem ( ͡° ͜ʖ ͡°)