UIUX Component

Shape-Outside property in CSS to flow text around element.  Icon : img.icons8.com DEMO Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. HTML < p class = "txt-wrap" > < img src = "https://img.icons8.com/color/344/bitcoin--v1.png" alt = "" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua . At vero eos et accusam et justo duo dolores et ea rebum . Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet . </ p > CSS . txt - wrap img { shape - outside: circle( 50 % ); width: 100 px; height: 100 px; float : left; }

Create outline stroke around text using  -webkit-text-stroke DEMO Text Outline CSS h2 { - webkit - text - stroke: 2 px DarkTurquoise; font - size: 3 em; color: white; }

Like on every magazine, there is a drop caps on first paragraph. On web development style with the first-letter pseudo element selector. DEMO Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. CSS . drop - caps:first - letter { font - size: 400 % ; float : left; margin: 0 0.3 em 0 0 ; font-weight : bolder; li

Control element list for example a, A, 1, i and I via type attribute in <ol> element. type="a" Creeping Death (Ride The Lightning, 1984) Master Of Puppets (Master Of Puppets, 1986) One (…And Justice For All, 1988) HTML < ol type = "a" > < 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 > </ ol > type="A" Creeping Death (Ride The Lightning, 1984) Master Of Puppets (Master Of Puppets, 1986) One (…And Justice For All, 1988) HTML < ol type = "A" > < 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 > </ ol > type="1" Creeping Death (Ride The Lightnin

Create customize bullet points in element <li> via pseudo-elements. 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 < ul > < li class = "checked" > 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 class = "checked" > For Whom The Bell Tolls (Ride The Lightning, 1984 ) </ li > < li class = "checked" > Battery (Master Of Puppets, 1986 ) </ li > </ ul > CSS ul { list - style: none; } ul li::before { content: ' \2795' ; margin - right: 0.3 em; } ul li . checked::before { content: ' \2705' ; }

The readonly is an attribute in HTML it specifies that an input field is read-only. DEMO HTML < input type = "text" value = "This is Read Only Input!" readonly />

Create a very simple responsive sidebar in HTML, CSS and one tiny line of JavaScript. DEMO ☰ 🦁 LION 🦄 UNICORN 🤗 CONTENT AREA HTML < div id = "AreaBody" > < ! -- (A) SIDEBAR --> < div id = "AreaSide" > < ! -- (A1) EXPAND / COLLAPSE SIDEBAR --> < button id = "btnToggle" onclick = "document.getElementById('AreaBody').classList.toggle('open')" > & #9776; </ button > < ! -- (A2) SIDEBAR ITEMS --> < div class = "item" > < span class = "ico" >& #129409;</span> < span class = "txt" > LION </ span > </ div > < div class = "item" > < span class = "ico" >& #129412;</span> < span class = "txt"

In CSS :not() pseudo-classes, the style targeted only outside of the <picture> element.  Icon: icons8.com DEMO HTML < img src = "https://img.icons8.com/color/344/bitcoin--v1.png" alt = "" > < picture > < img src = "https://img.icons8.com/color/344/bitcoin--v1.png" alt = "" > </ picture > CSS img: not (picture * ) { filter : drop - shadow( 2 px 3 px 5 px #585858); }

The HTML <audio> element is used to play an audio file, here are three supported audio formats MP3, WAV, and OGG for Safari OGG is not supported for now. DEMO Your browser does not support HTML audio. HTML < audio controls > < source src = "https://actions.google.com/sounds/v1/cartoon/crazy_dinner_bell.ogg" type = "audio/ogg" > < p > Your browser does not support HTML audio .</ p > </ audio > Muted < audio controls muted > < source src = "https://actions.google.com/sounds/v1/cartoon/crazy_dinner_bell.ogg" type = "audio/ogg" > < p > Your browser does not support HTML audio .</ p > </ audio >

A visual representation of CSS positions relative and absolute, the black container is on position: relative and position: absolute for the rest of the coloured boxes. DEMO position: absolute; top: 0; left: 0; position: absolute; top: 0; right: 0; position: absolute; bottom: 0; left: 0; position: absolute; bottom: 0; right: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); HTML < div class = "container-box" > < article class = "top-left" > position: absolute; < br > top: 0 ; < br > left: 0 ; </ article > < article class = "top-right" > position: absolute; < br > top: 0 ; < br > right: 0 ; </ article > < article class = "bottom-left" > position: absolute; < br > bottom: 0 ; < br >

Simple code to display elements side by side via display: flex and display: grid in CSS. DEMO Flex Left Right Grid Left Right HTML < h2 > Flex </ h2 > < div class = "container-box flex-box" > < article >< span > Left </ span ></ article > < article class = "gold-color" >< span > Right </ span ></ article > </ div > < h2 > Grid </ h2 > < div class = "container-box grid-box" > < article >< span > Left </ span ></ article > < article class = "gold-color" >< span > Right </ span ></ article > </ div > CSS . container - box article {background: lightblue;} . container - box article span {display: block; padding: 0.5 em;} . container - box article . gold - color {background: gold;} . flex - box {display: flex;} . flex - box article {width: 50 % ;} . grid - bo

Transparent images use drop-shadow() filter function to create a shadow on the image's content, instead of box-shadow property which creates a rectangular shadow behind an element's entire box. Icon:  icons8.com DEMO box-shadow drop-shadow HTML < div class = "wrapper" > < div class = "mr-2" > < div class = "mb-1 text-center" > box - shadow </ div > < img class = "box-shadow" src = "https://img.icons8.com/color/344/money-bag.png" alt = "Image with box-shadow" > </ div > < div > < div class = "mb-1 text-center" > drop - shadow </ div > < img class = "drop-shadow" src = "https://img.icons8.com/color/344/money-bag.png" alt = "Image with drop-shadow" > </ div > </ di

Easily build flexible, responsive layouts—without writing code. Only in Webflow. Flexbox it’s a powerful layout mechanism that lets you solve common responsive web design problems with ease. Visit flexbox.webflow.com to make your own with easy to follow instructions.

  Create a custom scrollbar with CSS pseudo-class -webkit-scrollbar to customize color and border. DEMO Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. HTML < div class = "tile--custom-scrollbar" > < div class = "tile-content" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua . Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua . At vero

Use position: sticky; on elements. When a page is scrolled, a sticky element sticks to a given position on the screen within its parent container, credit to CSS-TRICKS. See the Pen position:sticky (CSS) by Preethi Sam ( @rpsthecoder ) on CodePen .

The counter function in conjunction with counter-* properties to number for headings. DEMO Metallica Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Megadeth Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia. Slayer Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim. Deep Purple Picta aliquam porro maxime minima sed a ullam, aspernatur corporis. HTML < div class = "listNum" > < h2 > Metallica </ h2 > < p > Lorem ipsum dolor sit amet consectetur adipisicing elit . Ut eum perferendis eius .</ p > < h2 > Megadeth </ h2 > < p > Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia .</ p > < h2 > Slayer </ h2 > < p > Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim .<

JavaScript Basics all 3 results with same output. Length let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band . length = 2 console . log(band) // [ "Metallica" , "Megadeth" ] Splice let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band = band . splice( 0 , 2 ) console . log(band) // [ "Metallica" , "Megadeth" ] Slice let band = [ "Metallica" , "Megadeth" , "Slayer" , "Deep Purple" , "Iron Maiden" ] band = band . slice( 0 , 2 ) console . log(band) // [ "Metallica" , "Megadeth" ]

A complicated table with massive data that has a sticky header and a sticky first-column. Pure CSS solution, via position: sticky and some clever stacking orders. No JS required! Source: CSS-TRICKS. See the Pen Table with Sticky Header and Sticky First Column by Chris Coyier ( @chriscoyier ) on CodePen .

WhatsApp's click to chat feature allows you to begin a chat with someone without having their phone number saved in your phone's address book. As long as you know this person’s phone number and they have an active WhatsApp account, you can create a link that will allow you to start a chat with them. By clicking the link, a chat with the person automatically opens. Click to chat works on both your phone and WhatsApp Web. Use https://wa.me/<number> where the <number> is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format. For body text please make sure use this code %20 for spacing between text. HTML < a href = "https://wa.me/1XXXXXXXXXX?text=Hi,%20please %20s hare%20job %20c ommission%20available." > WhatsApp Us About Job Commission ? </ a >

Adding the subject and body text to the mailto HTML tag is an easy way to help direct Emails when listing more than one e-mail address. DEMO Click Here to Email Us About Job Commission? HTML < a href = "mailto:name@email.com?subject=Job Commission&body=Hi friend, can you share me the list of job commission available." > Email Us About Job Commission ? </ a >

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u

Five websites that will save two plus hours per week for web developer. grammarly.com Get automatic detection and correction of grammar, spelling, and punctuation errors. squoosh.app Compress images in browser without losing quality. screenstab.com/editor Turn plain screenshots into dazzling image assets. Visual Studio - Instant Beautiful Code Generate pretty code snippets right out of VSCode. loading.io Create custom animated loaders and spinners.

The easiest way to make responsive text via CSS. Responsive Text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. CSS h2 { font - size: calc( 2 em * var( -- text - multiplier, 1 )); } p { font - size: calc( 1 em * var( -- text - multiplier, 1 )); } @media ( min - width: 720 px) { :root { -- text - multiplier: 1.4 ; } }

Change the text selection style in CSS via ::selection pseudo-class. Try select text inside the cyan box bottom below to see the action. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. CSS article::selection { background: green; color: yellow; }

  CSS hide scrollbars supports cross desktop browser. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. HTML < div class = "box" > < div class = "scroll" > < p > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua .</ p > < p > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua . At vero e