Pens from PJ Mullen https://codepen.io/tectix/ en nospam@codepen.io Copyright 2024 2017-12-19T23:35:25-07:00 Dynamic Paper Form (CSS Only) https://codepen.io/tectix/pen/qpbQQx https://codepen.io/tectix/pen/qpbQQx PJ Mullen

See the Code - See it Full Page - See Details

An idea for a forms design I want on my website. I wanted to constrain myself to CSS for now so I could begin to learn SCSS. Still need to add checkboxes, radio buttons, sliders, file upload, etc. Then I'll make a javascript version that allows validation and the fancier things I wasn't able to implement just yet.

]]>
Dynamic Paper Form (CSS Only) 2017-12-19T23:35:25-07:00
Simple Search (with SVG Animation) https://codepen.io/tectix/pen/QgBjjm https://codepen.io/tectix/pen/QgBjjm PJ Mullen

See the Code - See it Full Page - See Details

]]>
Simple Search (with SVG Animation) 2017-10-09T20:54:30-07:00
Triangle Obscurantism https://codepen.io/tectix/pen/rmJQBo https://codepen.io/tectix/pen/rmJQBo PJ Mullen

See the Code - See it Full Page - See Details

Just a weird idea I had to hide blog post content behind triangles. I like the glassy look it has. The movement was pretty difficult to work out. In order to make the animation dynamically changeable, I mapped the bottom-left portion of a circle where the y-axis has value 1 at x = 2 (because the top 2 rows of triangles move in the opposite direction than the rest) and where the y-axis has value 0 at x = # of triangle rows. Math --> goo.gl/WURc3e There was probably an easier way to do this, but I am still an ameture when it comes to this stuff. For instance, it doesn't really dynamically change with window size, it doesn't look good on mobile, etc.

]]>
Triangle Obscurantism 2017-12-18T18:52:54-07:00