UI & UX

Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉

Clip Path - Slanted Edges
This is some text inside of a div block.

Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.

Tap to Expand
Datepicker
This is some text inside of a div block.

Add a custom date picker to your form for consistent date input. No more manually typing it in for your visitors. Customize the look to match your design.

Tap to Expand
Custom Javascript Accordion
This is some text inside of a div block.

Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.

Tap to Expand
Disable User Select
This is some text inside of a div block.

Disable the option for any user to highlight and select an element on your web page.

Tap to Expand
Apple Frost Blur
This is some text inside of a div block.

This simple CSS snippet will apply a background frosted blur effect like Apple is known for.

Tap to Expand
Custom Selection & Highlight Color
This is some text inside of a div block.

With this snippet you can change the selection / highlight colors that you see when selecting a bit of text for example.

Tap to Expand
Reveal Submit Button When Email is Validated
This is some text inside of a div block.

This awesome code crumb will hide the submit button on any form until the email is validated in the email input field. Adds a really nice visual experience.

Tap to Expand
Dynamic Weekday
This is some text inside of a div block.

This snippet will generate the text dynamically for the correct weekday where ever you want in your project.

Tap to Expand
Dynamic Copyright Year
This is some text inside of a div block.

This short Javascript code crumb will allow you to dynamically set the current year for your © copyright year in your footer automatically.

Tap to Expand
Custom Select Field
This is some text inside of a div block.

This snippet allows you to customize the select field for your forms replacing the default select UI and UX for an arguably nicer one.

Tap to Expand
Custom Placeholder Animation
This is some text inside of a div block.

This small snippet allows you to animate or add a transition to your placeholder text when an input field is focused. You can expand on the transition animations to whatever you'd like.

Tap to Expand
HTML Tables
This is some text inside of a div block.

Here is an HTML table you can use in your Rich Text Elements or E-Commerce websites for products or simply to show data since Webflow doesn't natively support it yet.

Tap to Expand
Ignore Pointer (Cursor) Events
This is some text inside of a div block.

This one line of CSS code will ignore any cursor (pointer) event such as clicks or hovers etc.This can be useful if you have a video or a gif that is not necessary for your users to interact with.

Tap to Expand
Remove iOS Form Styles
This is some text inside of a div block.

This small bit of CSS will remove those unwanted shadows that show up on Safari's default input field styles. This way your forms input fields can look the way you intended them to.

Tap to Expand

Know when new crumbs drop!

Never spam. Just honest updates about new snippets!

Built by
Built with