Pens from Ildar Sagdejev https://codepen.io/tknomad/ en nospam@codepen.io Copyright 2024 2021-08-07T20:46:15-07:00 Flag of the United States (CSS) https://codepen.io/tknomad/pen/vYJwem https://codepen.io/tknomad/pen/vYJwem Ildar Sagdejev

See the Code - See it Full Page - See Details

This is an experiment, which I was inspired to do after analyzing the star pattern ( http://lea.verou.me/css3patterns/#stars ) made by Nicholas Gallagher. Testing it in different browsers has revealed that, as of June 2014, the flag renders most beautifully in the latest Firefox Nightly. WebKit rendering engines (Chrome, Safari, Opera) take a more crude approach to calculating these shapes, and therefore show a number of artifacts - pieces coming apart or overlapping, undesired bleed through of image tiles at the borders. Not recommended for use in production... yet. Use SVG ;)

]]>
Flag of the United States (CSS) 2017-12-15T10:40:49-07:00
Glass ball (CSS) https://codepen.io/tknomad/pen/rNzOaM https://codepen.io/tknomad/pen/rNzOaM Ildar Sagdejev

See the Code - See it Full Page - See Details

Glass ball made in pure CSS. Use this in your style sheet and have a perfect gradient image without SVG. Tweak rgba values to your liking.

]]>
Glass ball (CSS) 2017-12-15T10:32:26-07:00
CSS Word Soup https://codepen.io/tknomad/pen/wvgMzY https://codepen.io/tknomad/pen/wvgMzY Ildar Sagdejev

See the Code - See it Full Page - See Details

Stroked text drifting through mood lighting. Done using CSS transforms. Works best in WebKit based browsers (Chrome, Safari, Opera Next). Very choppy in Firefox.

]]>
CSS Word Soup 2017-12-15T10:39:53-07:00
3D DNA Plasmid (CSS) https://codepen.io/tknomad/pen/xxRjXd https://codepen.io/tknomad/pen/xxRjXd Ildar Sagdejev

See the Code - See it Full Page - See Details

DNA plasmids are circular DNA molecules that are physically separate from, and can replicate independently of, chromosomal DNA within a cell. Most commonly found in bacteria and sometimes present in archaea and eukaryotic organisms.

]]>
3D DNA Plasmid (CSS) 2017-12-15T10:31:54-07:00
Link Spinner https://codepen.io/tknomad/pen/GRjxBQ https://codepen.io/tknomad/pen/GRjxBQ Ildar Sagdejev

See the Code - See it Full Page - See Details

Circular menu. Hover over the button and see icon bubbles swirl out and orbit the main piece. On mouse out, they swirl back in. Excellent way to implement a list of links. Be aware that touch browsers may not implement a :hover event.

]]>
Link Spinner 2021-08-07T20:46:15-07:00