I am trying to recreate “Post-it notes” as Tabs. The concept works, I have applied 2D Transform Rotation and Box Shadows to various States to imitate 3 rows of 3 tabs randomly placed (like you would do with real Post-it notes, they will never be vertically & horizontally aligned).
The have also of tidying up to do in order to make the page fully interactive across all devices, that’s a hurdle I will come to so please discard that for now.
If you go into preview mode, and you hover on and off over the “Bridge” button, you would note the box shadows work fairly good. If you click / press the “Bridge” button and the state changes to pressed, and then hover on and off over the “Bridge” button, you will note the outlines are jagged / aliased because there is a rotation of the element and the box shadow seems to amplify this due to the contract in colors. The “Gazebo” button to the right has no rotation applied as yet, and the outlines are perfect in all states in that instance.
This is my first attempt at building a website from scratch for my new business. I am part way through the Homepage and really enjoying the learning journey, The online recourses and forums are invaluable, however I realize I have a long way to go.
I welcome any suggestions on how to overcome this, please keep in mind I am a beginner, I don’t know custom code, so please try keep any suggestions as basic as possible. I am hoping there is a solution within Webflow to correct this or perhaps I have not done something right that can be pointed out.
I really appreciate any input
Regards, Q
Here is my site Read-Only: https://preview.webflow.com/preview/quentins-top-notch-project-718aaa?utm_medium=preview_link&utm_source=designer&utm_content=quentins-top-notch-project-718aaa&preview=adfe96929075c4f38b13c5a660b78440&workflow=preview