Pens from Marius Stuparu https://codepen.io/mariusstuparu/ en nospam@codepen.io Copyright 2024 2015-10-11T19:57:34-07:00 WebGL Smoke https://codepen.io/mariusstuparu/pen/PPKNLV https://codepen.io/mariusstuparu/pen/PPKNLV Marius Stuparu

See the Code - See it Full Page - See Details

Smoke particle system using an old vfx trick of scaled and rotating single sprite texture in WebGL, plus some additive blending for extra sass :) Color of smoke may be changed by modifying "color" attribute for smokeMaterial on line 45. Performance improvement can be had by reducing number of particles, and/or removing "opacity" setting from smokeTex (png will supply opacity, opacity setting simply allows us to "tone it back" or make it slightly more transparent) Low hanging fruit for visual improvement is randomly setting individual particles to have opposite direction rotation (helps with random look, and avoids edge cases where spinning particles are noticeable) Coolness improvement: wire up angular with an input box to change the text to user input. Tough to execute on canvas with good, non-aliased results though. Best bet might be wiring up a spritesheet with every letter of the alphabet, then generating planes and painting correct sprite position tex on them... Forked from [Teo Litto](http://codepen.io/teolitto/)'s Pen [WebGL Smoke](http://codepen.io/teolitto/pen/KwOVvL/).

]]>
WebGL Smoke 2015-10-11T19:57:34-07:00
A Pen by Marius Stuparu https://codepen.io/mariusstuparu/pen/NqEYwY https://codepen.io/mariusstuparu/pen/NqEYwY Marius Stuparu

See the Code - See it Full Page - See Details

]]>
A Pen by Marius Stuparu 2015-07-29T16:09:14-07:00
Modern grid using Flexbox https://codepen.io/mariusstuparu/pen/NPyevR https://codepen.io/mariusstuparu/pen/NPyevR Marius Stuparu

See the Code - See it Full Page - See Details

Define a content grid using the new Flexbox definition (2012), with fallback for non-supporting browsers.

]]>
Modern grid using Flexbox 2015-02-16T13:28:52-07:00
Flexible gradient with Compass https://codepen.io/mariusstuparu/pen/VYpvap https://codepen.io/mariusstuparu/pen/VYpvap Marius Stuparu

See the Code - See it Full Page - See Details

]]>
Flexible gradient with Compass 2015-01-13T13:59:09-07:00
Checkbox styling without JavaScript https://codepen.io/mariusstuparu/pen/YPZXbp https://codepen.io/mariusstuparu/pen/YPZXbp Marius Stuparu

See the Code - See it Full Page - See Details

]]>
Checkbox styling without JavaScript 2015-01-13T13:15:52-07:00
Loaders (WIP) https://codepen.io/mariusstuparu/pen/ZYLPEN https://codepen.io/mariusstuparu/pen/ZYLPEN Marius Stuparu

See the Code - See it Full Page - See Details

WIP of 12 loader. Pure CSS. Forked from [Tania LD](http://codepen.io/TaniaLD/)'s Pen [Loaders (WIP)](http://codepen.io/TaniaLD/pen/oKxep/).

]]>
Loaders (WIP) 2015-01-12T06:16:24-07:00
3D Paper button effects https://codepen.io/mariusstuparu/pen/LEbmyM https://codepen.io/mariusstuparu/pen/LEbmyM Marius Stuparu

See the Code - See it Full Page - See Details

I made this demo to try out and illustrate some of the subtle button effects you can create just using box-shadow and borders on pseudo–elements. Inspired by the work I saw a while back over on Beemuse (http://beemuse.com/paper) and so this is a heavily tweaked more dynamic version of those effects. Also see Nicolas Gallaghers previous post on effects like this: http://nicolasgallagher.com/css-drop-shadows-without-images/ Tested in latest Chrome and Firefox, but no reason it shouldn't work in all latest browsers. Forked from [Ashley Nolan](http://codepen.io/ashleynolan/)'s Pen [3D Paper button effects](http://codepen.io/ashleynolan/pen/djpCG/).

]]>
3D Paper button effects 2015-01-05T09:20:39-07:00
Apple's iMac scrolling effect https://codepen.io/mariusstuparu/pen/KwNRmm https://codepen.io/mariusstuparu/pen/KwNRmm Marius Stuparu

See the Code - See it Full Page - See Details

Forked from [Marius Balaj](http://codepen.io/mariusbalaj/)'s Pen [Apple's iMac scrolling effect](http://codepen.io/mariusbalaj/pen/qcfox/).

]]>
Apple's iMac scrolling effect 2015-01-05T09:17:12-07:00
Better Icons With CSS Filters & Background Blend https://codepen.io/mariusstuparu/pen/YPGZJq https://codepen.io/mariusstuparu/pen/YPGZJq Marius Stuparu

See the Code - See it Full Page - See Details

Uses filters and background-blend-mode on SVG icons as an alternative to traditional sprites. Full discussion on [my blog](http://demosthenes.info) on Monday. Forked from [Dudley Storey](http://codepen.io/dudleystorey/)'s Pen [Better Icons With CSS Filters & Background Blend](http://codepen.io/dudleystorey/pen/myeedV/).

]]>
Better Icons With CSS Filters & Background Blend 2014-12-24T18:11:01-07:00
SVG Loading icons https://codepen.io/mariusstuparu/pen/abRbGL https://codepen.io/mariusstuparu/pen/abRbGL Marius Stuparu

See the Code - See it Full Page - See Details

Animated SVG for use as loading animations. Forked from [Aurer](http://codepen.io/aurer/)'s Pen [SVG Loading icons](http://codepen.io/aurer/pen/jEGbA/).

]]>
SVG Loading icons 2014-09-10T08:54:02-07:00