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

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

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

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

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

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