Pens from asano_corp https://codepen.io/asanocorp/ en nospam@codepen.io Copyright 2024 2015-05-31T12:40:57-07:00 a note to oneself https://codepen.io/asanocorp/pen/BNpVPb https://codepen.io/asanocorp/pen/BNpVPb asano_corp

See the Code - See it Full Page - See Details

... so there was this pen on the front page today in the morning ... and seemed like an opportunity for me to do what i like doing so much and quote Cosmo Brown announcing very seriously just to annoy my girlfriend's mother: > i'm just about to be brilliant! ... or otherwise annoying ... you have been warned ... > one lecture by an over blown ego coming your way at high speed! > > take cover! so here's the pen: <p data-height="377" data-theme-id="15298" data-slug-hash="doNmyj" data-default-tab="result" data-user="shadeed" class='codepen'>See the Pen <a href='http://codepen.io/shadeed/pen/doNmyj/'>Turtle Lost</a> by Ahmad Shadeed (<a href='http://codepen.io/shadeed'>@shadeed</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> this is one seriously chilled out dude this turtle isn't he!? doesn't seem lost to me at all ... or even if he is lost ... hell, even if the whole world around him is falling apart ... and everything is absolutely shit ... and the shit is running really really deep, one thing is very clear and obvious ... this little guy does not give a single fuck about it. full stop. i love it! but for the moment let's leave him be in this relaxed state of his and take a look at the original graphic by [@jeroenvaneerden](https://twitter.com/jeroenvaneerden): [![Turtle Lost 404](https://d13yacurqjgara.cloudfront.net/users/78433/screenshots/2084608/turtle_lost404_1x.png)](https://dribbble.com/shots/2084608-Turtle-Lost-404) ... hmmm ... ... is this the same turtle? ... maybe it's his brother? ... or sister? ... or something? ... they do look very similar that's true but ... ... but maybe [@shadeed](http://codepen.io/shadeed/) who committed the html and css made a mistake with referencing ... i don't mean he did this on purpose or anything ... but it could happen, right? i'm only going through this because there is something markedly different about these two turtles isn't there? for the start you might say > well *the dude turtle* is moving while *the less than dude turtle* is not duh! and then you might be excused for quoting Lina Lamont asking > what's the big idea anyway? to which i would say > well there isn't any duh! and add as explanation that i simply wanted to join in the fun by getting *the dude turtle* react to the position of the device, started to contemplate how different these two turtles are even though they are exactly the same, and how silly `blink` can turn *chilled out* element of a turtle into *not so chilled out* element of a turtle which in turn led me to contemplate how web is like a turtle ... at which point i realised it's sunday morning and i might really need some caffeine. full stop. --- <!--20 minutes and one cup of coffee later.--> --- okay, so where were we? oh yeah the web is like a turtle and what i really have in mind here is only UI elements and i dare not going into other areas concerned but i would suppose they might be like turtles as well. however we would look at this it translates into one simple to remember rule that could be applicable to all web creations: > micro-interactions are the name of the game... so i better change the color of these buttons ... i can just imagine how whole army of highly trained *ux* experts working tirelessly on the usability of a button could be tripped over in a blink by a `blink`. rendering their whole expertise, work, time and resources that were poured into the web app they worked on ... well let's just say making it something you would not be *chilled out* about. full stop. i might need another coffee and i'm more than happy to leave this grim subject and go on to my fork of the initial pen and learn something about [DeviceOrientation Event](http://w3c.github.io/deviceorientation/spec-source-orientation.html) which i just discovered i know very little about with intention to disturb the peace of *the dude turtle* and also planning another rant on the issues surrounding authorship and referencing in the context of co-operative yet independent creative activity. in the meantime though big kudos to [@shadeed](http://codepen.io/shadeed/) for his `blink` and to [@jeroenvaneerden](https://twitter.com/jeroenvaneerden) for his [*not so dude turtle*](https://dribbble.com/shots/2084608-Turtle-Lost-404) Quick practise on animating this cute turtle. Design source: http://drbl.in/oQWG Forked from [Ahmad Shadeed](http://codepen.io/shadeed/)'s Pen [Turtle Lost](http://codepen.io/shadeed/pen/doNmyj/).

]]>
a note to oneself 2015-05-31T12:40:57-07:00
Three Daily Things https://codepen.io/asanocorp/pen/LVGOyb https://codepen.io/asanocorp/pen/LVGOyb asano_corp

See the Code - See it Full Page - See Details

]]>
Three Daily Things 2015-05-31T12:24:45-07:00
HTML5 Video Effects with CSS Blend Modes https://codepen.io/asanocorp/pen/ZGYWYN https://codepen.io/asanocorp/pen/ZGYWYN asano_corp

See the Code - See it Full Page - See Details

Video by [Maximilian Kempe](https://vimeo.com/114966584), licensed under Creative Commons. [Complete explanatory article](http://demosthenes.info/blog/1020/HTML5-Video-Effects-with-CSS-Blend-Modes) Forked from [Dudley Storey](http://codepen.io/dudleystorey/)'s Pen [HTML5 Video Effects with CSS Blend Modes](http://codepen.io/dudleystorey/pen/wavpGe/).

]]>
HTML5 Video Effects with CSS Blend Modes 2015-04-25T21:21:25-07:00
Scrolling controls for HTML5 video https://codepen.io/asanocorp/pen/LVYdJq https://codepen.io/asanocorp/pen/LVYdJq asano_corp

See the Code - See it Full Page - See Details

Forked from [Ollie](http://codepen.io/ollieRogers/)'s Pen [Scrolling controls for HTML5 video](http://codepen.io/ollieRogers/pen/lfeLc/). Forked from [@rafszul](http://codepen.io/rafszul/)'s Pen [Scrolling controls for HTML5 video](http://codepen.io/rafszul/pen/emvGvK/).

]]>
Scrolling controls for HTML5 video 2015-04-23T11:36:52-07:00
README.md https://codepen.io/asanocorp/pen/rVNWgm https://codepen.io/asanocorp/pen/rVNWgm asano_corp

See the Code - See it Full Page - See Details

the more i work on it the more i love the way it behaves need to check the mobile in fact i need to look into this js as i have no idea whats there i was just too excited to see some of my own svg experiments in the enviro it provides but by and large this is a fork of [rec convos]() by [ge1doot](http://codepen.io/ge1doot/) it still is wip so the credits are all over the place the layout belongs to i feel encouraged so it came from (forked conversations)[http://codepen.io/rafszul/details/ByXBae/] /* <span title="" data-original-title="April 21 2015 10:23 AM &lt;br&gt;(Alt-click to quote)">3 hours ago</span> */ this was always WIP it still is i feel encouraged so it came from (forked conversations)[http://codepen.io/rafszul/details/ByXBae/] funnily enough i'm below the radar licence expired heads will roll whatever this is work of many mostly those not scared of text editors and command line for credits you have to see the page it's all about credits some stuff is in info or in details section check them out usually the links are interesting if you like this stuff okay let's go i was given information that this is going to be `rec-convo-the-edge` a story from when i still was afraid of text editors you might remember it better than i do ![]() this is a sign of ... zorro? ... meh Forked from [@rafszul](http://codepen.io/rafszul/)'s Pen [README.md](http://codepen.io/rafszul/pen/OPBNRd/).

]]>
README.md 2015-04-22T11:12:59-07:00
pure coincidence https://codepen.io/asanocorp/pen/WvNoWb https://codepen.io/asanocorp/pen/WvNoWb asano_corp

See the Code - See it Full Page - See Details

I used to see her on her way to school. I knew her face by heart... Forked from [Gerard Ferrandez](http://codepen.io/ge1doot/)'s Pen [to see her](http://codepen.io/ge1doot/pen/OVLqKp/). Forked from [Gerard Ferrandez](http://codepen.io/ge1doot/)'s Pen [to see her](http://codepen.io/ge1doot/pen/OVLqKp/).

]]>
pure coincidence 2015-04-22T11:07:26-07:00
to see her https://codepen.io/asanocorp/pen/MwWbxj https://codepen.io/asanocorp/pen/MwWbxj asano_corp

See the Code - See it Full Page - See Details

I used to see her on her way to school. I knew her face by heart... Forked from [Gerard Ferrandez](http://codepen.io/ge1doot/)'s Pen [to see her](http://codepen.io/ge1doot/pen/OVLqKp/).

]]>
to see her 2015-04-23T16:31:14-07:00
unexpected toy https://codepen.io/asanocorp/pen/PqobXL https://codepen.io/asanocorp/pen/PqobXL asano_corp

See the Code - See it Full Page - See Details

Forked from [Gerard Ferrandez](http://codepen.io/ge1doot/)'s Pen [unexpected toy](http://codepen.io/ge1doot/pen/vOYOVz/).

]]>
unexpected toy 2015-04-22T10:59:05-07:00
Liquid Lights https://codepen.io/asanocorp/pen/jPOVKO https://codepen.io/asanocorp/pen/jPOVKO asano_corp

See the Code - See it Full Page - See Details

Forked from [Tiffany Rayside](http://codepen.io/tmrDevelops/)'s Pen [Liquid Lights](http://codepen.io/tmrDevelops/pen/rVNxVQ/).

]]>
Liquid Lights 2015-04-22T10:32:49-07:00
Image Animation/Manipulation https://codepen.io/asanocorp/pen/ravQLE https://codepen.io/asanocorp/pen/ravQLE asano_corp

See the Code - See it Full Page - See Details

An example of image animating with CSS keyframes. Forked from [Joe Howard](http://codepen.io/jhoward/)'s Pen [Image Animation/Manipulation](http://codepen.io/jhoward/pen/xruBF/).

]]>
Image Animation/Manipulation 2015-02-24T23:12:02-07:00