UIUX Component

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" >

Display each item in the object in HTML. DEMO JS const grocery_list = { "Durian" : { category: "fruit" , price: 5.99 }, "Rambutan" : { category: "fruit" , price: 2.99 }, "Vanilla" : { category: "candy" , price: 2.75 } }; const generatedHtml = Object . keys(grocery_list) . reduce((accum, currKey) => accum + ` < div class = "grocery_item" > < div class = "item" > $ {currKey} </ div > < div class = "category" > $ {grocery_list[currKey] . category} </ div > < div class = "price" > $ {grocery_list[currKey] . price} </ div > </ div > ` , '' ); document . getElementById( 'list-name' ) . innerHTML = generatedHtml;

 Create beautiful text with CSS background-clip property. Choose a background and apply into the text. DEMO Hello CSS h2 { font - size: 6 em; background - image: url(https: // picsum . photos / id / 1002 / 1080 ); background - clip: text; - webkit - background - clip: text; - webkit - text - fill - color: transparent; }