UIUX Component

Here's a CSS trick also known as "the padding hack" to set the aspect ratio of an element! Image Ratio in 16/9 Image Ratio in 4/3 HTML < div class = "aspect-ratio" > < img src = "https://picsum.photos/1080/720" alt = "" > </ div > < div class = "aspect-ratio fourthree" > < img src = "https://picsum.photos/1080/720" alt = "" > </ div > CSS . aspect - ratio { -- aspect - ratio: 16 / 9 ; position: relative; height: 0 ; padding - bottom: calc( 100 %/ (var( -- aspect - ratio))); } . aspect - ratio . fourthree { -- aspect - ratio: 4 / 3 ; } . aspect - ratio > * { position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 100 % ; object - fit: cover; }

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }

Responsive image strategy with aspect-ratio on mobile gets square images and any landscape screen or device gets landscape images. Change the inline-size to width and play around with length values that fit the design. HTML < img class = "aspect-image" src = "https://picsum.photos/1080/720" alt = "" > CSS . aspect - image { aspect - ratio: 1 / 1 ; width: 80 vw; max - width: 100 % ; - o - object - fit: cover; object - fit: cover; transition: aspect - ratio . 5 s ease } @media (orientation: landscape) { . aspect - image { aspect - ratio: 16 / 9 ; } }

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default, to make number descending order add attribute reversed in ol element. DEMO Creeping Death (Ride The Lightning, 1984) Master Of Puppets (Master Of Puppets, 1986) One (…And Justice For All, 1988) For Whom The Bell Tolls (Ride The Lightning, 1984) Battery (Master Of Puppets, 1986) HTML < ol reversed > < li > Creeping Death (Ride The Lightning, 1984 ) </ li > < li > Master Of Puppets (Master Of Puppets, 1986 ) </ li > < li > One ( … And Justice For All, 1988 ) </ li > < li > For Whom The Bell Tolls (Ride The Lightning, 1984 ) </ li > < li > Battery (Master Of Puppets, 1986 ) </ li > </ ol >

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; }