UIUX Component

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...

  List of websites for icon library, used by designers, developers, and content creators. &#128762; fontawesome &#128641; flaticon &#128368; icons8 &#128640; iconmonstr &#128664; freepik &#128668; heroicons &#128690; simpleicons &#128696; tablericons &#128718; css.gg &#128722; smashicons &#128757; thenounproject

  The empty pseudo selector to define the element is empty. DEMO Got Content! HTML <p class= "smile-content" ></p> <p class= "smile-content" > Got Content! </p> CSS .smile-content :before { content : '😄' ; margin-right : 0.3em ; } .smile-content :empty:before { content : '☹️' ; }

  Alternate for the animation-direction property in CSS to bouncing the box. DEMO CSS .bounce-box { width : 100px ; height : 100px ; background : limegreen ; position : relative ; animation : bouncing 2s infinite; animation - direction : alternate; } @keyframes bouncing { 0 % { background : limegreen ; left : 0px ; top : 0px ;} 50 % { background : orange ; left : 0 ; top : 100px ;} 100 % { background : limegreen ; left : 0px ; top : 0px ;} }

CSS variables have access to the DOM, simply create variables with local or global scope. DEMO Color via CSS Variable CSS :root { -- heading - color : limegreen ; } h2 { color : var( -- heading - color ); }

  Long text in single paragraph can be nightmare for designer, this can be resolve with column element in CSS. See the demo below in action. DEMO Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada. HTML <p> Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada. </p> CSS p { column - count : 2 ; column - gap : 40px ; column - rule ...

Text over image on hover via CSS. Hover cursor on image below to see the action. DEMO BOO! HTML  <div class= "hover-image" > <img src= "https://picsum.photos/1080/720" > <div> BOO! </div> </div> CSS .hover-image { position : relative ; width : 300px ; height : 200px ; } .hover-image img { width : 100 % ; } .hover-image div { box - sizing : border - box; width : 100 % ; padding : 1em ; position : absolute ; bottom : 0 ; color : yellow ; background-color : rgba( 0 , 0 , 0 , 0 . 5 ); visibility : none ; opacity : 0 ; transition : opacity 0.3s ; } .hover-image :hover div { visibility : visible ; opacity : 1 ; }

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