Category: Сайтостроение

JPNG.svg (Transparent PNG with JPEG Compression)

See the Code – See it Full Page – See Details Combine the transparency of a PNG with the compression of a JPEG.</strong> Based on the idea from <a href=”http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/”>Using SVG to Shrink Your PNGs</a>, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <code>&lt;img src=”image.svg”/&gt;</code> tag, or as a <code>background-image</code>. This techinique is tested & working in all modern

Scroll effect demo ??

See the Code – See it Full Page – See Details This is the demo for a revised version of a scrolling effect piece I put together previously. Better performance now using `requestAnimationFrame`. I couldn’t put the JS code straight in due to `flow` annotations etc. If you want to see the code etc. please check out the repo @ [github.com/jh3y/doormat](https://github.com/jh3y/doormat) Enjoy! This Pen uses: Pug, Stylus, Babel, and Babel

neon tile snake (pure CSS 3D)

See the Code – See it Full Page – See Details [Watch me code this in 25 minutes](https://www.youtube.com/watch?v=DPGN-GivbYw) (you can also speed it up if you feel I’m typing/ speaking too slow). Works in WebKit browsers and in Firefox. Doesn’t work in Edge due to lack of support for `clip-path`. If you like this demo in particular and my work in general and you want me to be able to

Повёрнутый текст, влияющий на поток

За­да­ча: по­лу­чить по­вёр­ну­тый на 90 гра­ду­сов текст. Про­бле­ма: При ис­поль­зо­ва­нии trans­form, блок ве­дёт себя ана­ло­гич­но сдви­гу че­рез po­si­tion:rel­a­tive — про­дол­жа­ет за­ни­мать ме­сто в по­то­ке по со­сто­я­нию до транс­фор­ма­ции, так что, из­ме­не­ние про­ис­хо­дит толь­ко визуальное. Но нужно по­вер­нуть блок так, что­бы текст вли­ял и на по­ток вывода.

Napoleon's Theorem

See the Code – See it Full Page – See Details Take a triangle. With each edge build an equilateral triangle. The 3 resulting centroids define an equilateral triangle – https://twitter.com/fermatslibrary/status/893459516846739456 This Pen uses: HTML, CSS, Babel, and Babel Source: codepen

Palette-js

See the Code – See it Full Page – See Details Add a beautiful palette colors to your project with a single line of code. Open source [project ](https://github.com/jotavejv/palette-js) This Pen uses: HTML, SCSS, Babel, and Babel Source: codepen

Peek-a-boo

See the Code – See it Full Page – See Details A little SVG Boo I made that follows and hides from the cursor This Pen uses: HTML, SCSS, Babel, and Babel Source: codepen