UIUX Component

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }

The border-style property sets the style of an element's for borders. List of all the border styles as shown on below sample. DEMO Solid Dotted Dashed Double Groove Ridge Inset Outset HTML <article class= "grid-box" > <div class= "solid" > Solid </div> <div class= "dotted" > Dotted </div> <div class= "dashed" > Dashed </div> <div class= "double" > Double </div> <div class= "groove" > Groove </div> <div class= "ridge" > Ridge </div> <div class= "inset" > Inset </div> <div class= "outset" > Outset </div> </article> CSS .grid-box { display : grid; grid - template - columns : auto auto ; grid - gap : 0.5em ; } .grid-box div { border-width : 6px ; padding : 0.5em ; border-color : hotpink ; } .gri...

The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. Marquee speed can be changed using the "scrollmount" attribute. For example, if you are using scrollmount = "1" then it sets the marque to scroll very slowly, and as you increase the "scrollmount," the scrolling speed will also increase. DEMO Scroll Up Scroll Right HTML <marquee direction= "up" scrollamount= "2" > Scroll Up </marquee> <marquee direction= "right" > Scroll Right </marquee>

Use currentColor to apply the same color that already defined in the element. DEMO Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Nemo enim ipsam quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. CSS strong { color: red; border: 1 px solid currentColor; }

Create cool and powerful image masking via CSS. On background URL property, please make sure silhouette image in jpg for the mask as located in second URL in the property. DEMO CSS section { width: 300 px; height: 300 px; background: url( "https://picsum.photos/id/10/1080/1080.jpg" ), url( "https://i.pinimg.com/originals/21/96/44/219644d4cb995ddd20f9b5516960e50b.jpg" ); background - blend - mode: screen; background - size: contain; background - position: center; background - repeat: no - repeat; }

Use the <kbd> tag for keyboard inputs. DEMO Press CMD + B to bookmark this page! HTML < blockquote > Press < kbd > CMD </ kbd > + < kbd > B </ kbd > to bookmark this page ! </ blockquote >

Use element  <mark>  to highlight the text.  DEMO Darkness imprisoning me , all that I see absolute horror. One by Metallica HTML Darkness < mark > imprisoning me </ mark > , all that I see absolute horror . < br >< em > One by Metallica </ em >

Groups to options in native HTML for drop-down list. Really useful to differentiate between object groups in option tag. DEMO Greatest Metal Songs One Master of Puppets Fade to Black Peace Sells Symphony of Destruction Wake Up Dead Angel Of Death Raining Blood War Ensemble HTML < p > Greatest Metal Songs </ p > < select > < optgroup label = "Metallica" > < option > One </ option > < option > Master of Puppets </ option > < option > Fade to Black </ option > </ optgroup > < optgroup label = "Megadeth" > < option > Peace Sells </ option > < option > Symphony of Destruction </ option > < option > Wake Up Dead </ option > </ optgroup > < optgroup label = "Slayer" > < option > Angel Of Death </ option > ...

Define style to any elements which has a class that starts with "boxset", for an example, classes such as name "boxset-one", "boxset-two", "boxset-blah-blah" etc. DEMO Class .boxset Class .boxset-one Class .boxset-two HTML < h2 class = "boxset" > Class . boxset </ h2 > < h2 class = "boxset-one" > Class . boxset - one </ h2 > < h2 class = "boxset-two" > Class . boxset - two </ h2 > CSS [class ^= "boxset" ] { color: magenta; }

Autocomplete input only in HTML. Try the demo below, click on it or simply type anything. DEMO HTML < input list = "sampleInput" placeholder = "Select Metal Band" /> < datalist id = "sampleInput" > < option value = "Metallica" > < option value = "Slayer" > < option value = "Megadeth" > < option value = "Iron Maiden" > < option value = "Anthrax" > < option value = "Slipknot" > < option value = "Pantera" > < option value = "Rammstein" > < option value = "System of a Down" > </ datalist >

Smooth animation card effect using box shadow with only CSS animations and a pseudo element. Hover over the box below to see the action. DEMO HTML < div class = "box-shadow" ></ div > CSS . box - shadow { position: relative; display: inline - block; width: 100 px; height: 100 px; border - radius: 5 px; background - color: #fff; box - shadow: 0 1 px 2 px rgba( 0 , 0 , 0 , 0.15 ); transition: all 0.3 s ease - in - out; margin: 1 em; background - color: BlanchedAlmond; } . box - shadow::after { content: '' ; position: absolute; z - index: - 1 ; width: 100 % ; height: 100 % ; opacity: 0 ; border - radius: 5 px; box - shadow: 0 5 px 15 px rgba( 0 , 0 , 0 , 0.3 ); transition: opacity 0.3 s ease - in - out; } . box - shadow:hover { transform: scale( 1.2 , 1.2 ); } . box - shadow:hover::after { opacity: 1 ; }

More options to border-style than solid or dotted. Check out the demo below. DEMO none hidden dotted dashed solid double groove ridge inset outset HTML < div class = "wrapper-border" > < div class = "tile border-none" > none </ div > < div class = "tile border-hidden" > hidden </ div > < div class = "tile border-dotted" > dotted </ div > < div class = "tile border-dashed" > dashed </ div > < div class = "tile border-solid" > solid </ div > < div class = "tile border-double" > double </ div > < div class = "tile border-groove" > groove </ div > < div class = "tile border-ridge" > ridge </ div > < div class = "tile border-inset" > inset </ div > < div class = "tile border-outset" > outset </ d...

  Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }

A modal is a dialog box or popup window that is displayed on top of the current page, this modal only used HTML & CSS only without JavaScript. DEMO Pop Me! Modal Title × Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. HTML < div id = "wrapper" > < p >< a class = "button" href = "#popup" > Pop Me ! </ a ></ p > </ div > < div id = "popup" class = "overlayModal" > < a class = "cancel" href = "#" ></ a > < div class = "popup" > < h2 > Modal Title </ h2 > < a class = "close" href = "#" >& times; </ a > < div class = "content" > ...

  Flip card via HTML and CSS only. Short and simple, click on the the card below the see the animation. DEMO Front Back HTML < label > < input type = "checkbox" /> < div class = "card" > < article class = "front" > Front </ article > < article class = "back" > Back </ article > </ div > </ label > CSS label { - webkit - perspective: 1000 px; perspective: 1000 px; - webkit - transform - style: preserve - 3 d; transform - style: preserve - 3 d; display: block; width: 250 px; height: 200 px; cursor: pointer; } . card { position: relative; height: 100 % ; width: 100 % ; - webkit - transform - style: preserve - 3 d; transform - style: preserve - 3 d; - webkit - transition: all 600 ms; transition: all 600 ms; z - index: 20 ; border - radius: 10 px; } . card article { positi...

Text editors make it easy to code without formatting issues corrupting it. For people new to programming learn the hard way that their first choice for coding causes problems with the code itself, such as not properly displaying formatting. Text editors shouldn't just be simple but also functional and good to work with. A text editor should be easy to use and do the job the way it was intended to be done. Below are the best top 5 text editors that should enough to make the job done. 1. Visual Studio Code Free. Built on open source. Runs everywhere.  Official Website 2. Brackets A modern, open source text editor that understands web design. Official Website 3. Sublime Text A sophisticated text editor for code, markup and prose. Official Website 4. Atom A hackable text editor for the 21st Century Official Website 5. Espresso For people who make delightful, innovative and fast websites, helps you write, code, design, build and publish with flair and efficiency.  Official Website ...

Word break with <wbr> (break the word) or &shy (word include with dash after the word break). Resize the browser to see the demo. DEMO superextralongword superextra long word superextra­long­word HTML < h1 > superextralongword </ h1 > < h1 > superextra < wbr > long < wbr > word </ h1 > < h1 > superextra & shy; long & shy;word </ h1 >

Hover cursor an image element it will zoom in and while hover it the cursor will change to different icon. DEMO CSS img { transition: 1 s; cursor: url( "https://img.icons8.com/FFFFFF/search" ), auto; } img:hover { transform: scale( 1.1 ); }

  Use the -webkit-line-clamp property to truncate the text to a specific number of lines. DEMO This text is trimmed to 3 lines You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped. This text is trimmed to 4 lines You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. HTML < h3 > This text is trimmed to 3 lines </ h3 > < div class = "tile-clamp" > < p class = "line-clamp" > You can use < code >- webkit - line - clamp </ code > property to truncate the text to...

  Framing text without borders can be done in purely css using only with text-decoration. Not supported on Safari. DEMO Underline Overline CSS h2 { text - decoration: underline overline red; }

Utilise :focus-within to have more visual emphasis on the part of an element that has a focused element. DEMO Step 1 Answer 1: Answer 2: Step 2 Answer 3: Answer 4: HTML < fieldset > < legend > Step 1 </ legend > < div > < label for = "q_1" > Answer 1 : </ label > < input id = "q_1" /> </ div > < div > < label for = "q_2" > Answer 2 : </ label > < input id = "q_2" /> </ div > </ fieldset > < fieldset > < legend > Step 2 </ legend > < div > < label for = "q_3" > Answer 3 : </ label > < input id = "q_3" /> </ div > < div > < label for = "q_4" > An...

Get the current position of the mouse using 'MouseEvent' clientX and clientY properties. Move the mouse on any position to see the values in demo below. DEMO JS document . addEventListener( 'mousemove' , (e) => { console . log( `Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}` ); });

Native <input type="date" /> in HTML, there's several other options for specifying a date/time, handy examples below on how to use them. Note - Safari not supported. DEMO - Date HTML < input type = "date" > DEMO - Month HTML < input type = "month" > DEMO - Week HTML < input type = "week" > DEMO - Date and Time HTML < input type = "datetime-local" >