Pens from Anusuya https://codepen.io/arc6789/ en nospam@codepen.io Copyright 2024 2023-10-31T05:22:22-07:00 User is typing... (React version) https://codepen.io/arc6789/pen/qBgbabK https://codepen.io/arc6789/pen/qBgbabK Anusuya

See the Code - See it Full Page - See Details

]]>
User is typing... (React version) 2023-10-31T05:22:22-07:00
CRUD todo in React https://codepen.io/arc6789/pen/RwYMorr https://codepen.io/arc6789/pen/RwYMorr Anusuya

See the Code - See it Full Page - See Details

]]>
CRUD todo in React 2023-03-23T08:36:05-07:00
React Modal with Hooks https://codepen.io/arc6789/pen/rNZYVZW https://codepen.io/arc6789/pen/rNZYVZW Anusuya

See the Code - See it Full Page - See Details

How to make a simple and reusable React modal with hooks.

]]>
React Modal with Hooks 2023-04-01T04:35:49-07:00
User is typing... https://codepen.io/arc6789/pen/wvqEeew https://codepen.io/arc6789/pen/wvqEeew Anusuya

See the Code - See it Full Page - See Details

]]>
User is typing... 2023-03-09T03:37:09-07:00
Scrolling Content https://codepen.io/arc6789/pen/WPwRBa https://codepen.io/arc6789/pen/WPwRBa Anusuya

See the Code - See it Full Page - See Details

Scroll content sections. Also I am using vw units for font size for the first time. Because I want the tiny thumbnail pic to look responsive and pretty. I was inspired by the CodePen challenge for perfect purples. Picture from Pixabay***

]]>
Scrolling Content 2023-01-20T00:02:09-07:00
Scalable Slack Logo in CSS (Hover me) https://codepen.io/arc6789/pen/bzNwMW https://codepen.io/arc6789/pen/bzNwMW Anusuya

See the Code - See it Full Page - See Details

In the past few days I have seen lots of cool versions of this slack logo. I decided to jump in and create mine. With the help of some basic css, math, and CSS's flex property this scales pretty nicely if you were to go in and change the $flex-container width. Also just for funzies hover over logo to remind you of the old Slack logo orientation.

]]>
Scalable Slack Logo in CSS (Hover me) 2023-03-03T01:06:50-07:00
Floating label within text area https://codepen.io/arc6789/pen/jXgKeb https://codepen.io/arc6789/pen/jXgKeb Anusuya

See the Code - See it Full Page - See Details

]]>
Floating label within text area 2023-03-09T03:10:50-07:00
Angular Progress Bar Directive https://codepen.io/arc6789/pen/XoGPjM https://codepen.io/arc6789/pen/XoGPjM Anusuya

See the Code - See it Full Page - See Details

Progress bar directive in Angular. Its an element of "progress-bar" and requires two attributes: step = the active step number and steps= total number of steps in progress bar. Click through forms to watch progress bar move. Also combining this with Codepen's primary colors challenge 😃 ----------------------------------------------------------------------------------------------- I recently worked on a project where I had to build the progress bar above. Turning it into a directive seemed like the best options because there were many instances of implementation throughout the code. Also to have to duplicate that much code for each step seemed overkill. It was a fun directive so dropping a snippet of code here. Also more info on the fun codepen challenge https://codepen.io/challenges/2019/january/2

]]>
Angular Progress Bar Directive 2022-05-27T05:49:33-07:00
Partial Image Blurs with Linear/Radial Gradients https://codepen.io/arc6789/pen/zyWXqN https://codepen.io/arc6789/pen/zyWXqN Anusuya

See the Code - See it Full Page - See Details

Blur() function in CSS only allows for full image blurs. Here is a method to achieve partial blurs. The trick is to super impose the same image on top of each other, and apply a mask with a gradient and then a blur. This will smoothly clip the top blurred image at a certain percentage exposing the image at the bottom.

]]>
Partial Image Blurs with Linear/Radial Gradients 2019-01-25T05:15:37-07:00
Partial Image Blur https://codepen.io/arc6789/pen/dwRJVv https://codepen.io/arc6789/pen/dwRJVv Anusuya

See the Code - See it Full Page - See Details

Simplest code snippet for Partial Image Blurs

]]>
Partial Image Blur 2019-01-11T08:53:58-07:00