UIUX Component

Custom Material Design text inputs, using a combination of native Webflow components and some simple HTML and CSS. You can clone the project here , thanks to Steven Hanley. Spent yesterday evening spinning up some @materialdesign text fields using a combination of the @webflow Designer and some simple HTML and CSS. Feel free to clone the project, customize to your liking, and use this component in your next design! ↳ https://t.co/Ti5fVj5V8t pic.twitter.com/KUi1uwW7X1 — steven hanley (@_stevenhanley) December 4, 2019

Cool hover animation effect via transform rotate with value in degree and turn. CSS (Degree) . box { width: 150 px; height: 150 px; margin: 2 em; background: red; } . box:hover { transition - duration: 2 s; transform: rotate( 360 deg); } CSS (Turn) . box { width: 150 px; height: 150 px; margin: 2 em; background: green; } . box:hover { transition - duration: 2 s; transform: rotate( 3 turn); }

Selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form. Demo Heading 1 Heading 2 Heading 3 HTML < h1 > Heading 1 </ h1 > < h2 class = "success" > Heading 2 </ h2 > < h3 > Heading 3 </ h3 > CSS : is (h1, h2, h3) . success { color: red; }

  Use details element to create native accordion, is so simple and effective without javascript. Tap here to see more details Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia. HTML < details > < summary > Tap here to see more details </ summary > < article > Lorem ipsum dolor sit amet consectetur adipisicing elit . Ut eum perferendis eius . Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis . Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia .

Simple native progress bar - and it will automatically update whenever you change the value via JS etc. In progress element use these attributes value="25" max="100" . DEMO 25% HTML < progress value = "25" max = "100" > 25 %</ progress >

Images affect speed page loading. There is a native loading attribute with the lazy value for img elements! Image will be downloaded only when a browser have to display they in viewport. Just add attribute  loading="lazy" for img element. DEMO HTML < img src = "../imagepath.jpg" loading = "lazy" alt = "Image Title" >

Use Flexbox to create a cool and responsive text divider on your design.  Note:  --text-divider-gap is the variable to control spacing between the text and the lines. DEMO TEXT TITLE HTML < div class = "text-divider" > TEXT TITLE </ div > CSS . text - divider { display: flex; align - items: center; -- text - divider - gap: 1.5 rem; color: green; } . text - divider::before, . text - divider::after { content: "" ; height: 1 px; background - color: silver; flex - grow: 1 ; } . text - divider::before { margin - right: var( -- text - divider - gap); } . text - divider::after { margin - left: var( -- text - divider - gap); }

Adding smooth scrolling to a page used in a single CSS declaration! First, get your HTML set up with your navigation href pointing to IDs throughout the page. Then drop-in scroll-behavior smooth in the CSS and boom!  HTML < ! -- Anchor tag --> < a href = "#scrollme" > Scroll Me To </ a > < ! -- Section at the bottom of the page --> < section id = "scrollme" > I 'm Here Smooth Scrolling</section> CSS html { scroll - behavior: smooth; }

Create cool border design with CSS conic-gradient under border-image-source. Conic Gradient Border HTML   < section > Conic Gradient Border </ section > CSS section { inline - size: 80 vmin; block - size: 80 vmin; border: 5 vmin solid hsl( 100 100 % 60 % ); border - image - slice : 1 ; /* leverage cascade for cross - browser gradients */ border - image - source: linear - gradient( hsl( 100 100 % 60 % ), 50 % , hsl( 200 100 % 60 % ) ); border - image - source: radial - gradient( hsl( 100 100 % 60 % ), 75 % , hsl( 200 100 % 60 % ) ); border - image - source: conic - gradient( hsl( 100 100 % 60 % ), hsl( 200 100 % 60 % ), hsl( 100 100 % 60 % ) ); display: grid; place - content: center; padding: 4 ch; box - sizing: border - box; font - size: 10 vmin; }