UIUX Component

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