10 CSS code snippets that work well and are worth collecting

Contents

1 10 css snippets

10 css snippets

The following 10 commonly used CSS code snippets are worth collecting and can be used in daily business code.

1. Click and click loading effect

This is a bit-by-bit loading effect with good compatibility, great user experience, and the implementation idea is as follows:

Use custom label element dot.

Set the dot element as an inline element (display:inline-block), set the overflow hidden (overflow:hidden), and set the height to 1em.
Use the :before pseudo element combined with \AUnicode characters to insert content, and use white-space:pre-wrap to retain the line break effect, and use css animation.
Use transform and translate to animate…

The html code is as follows:

< div  class = " loading " > Loading < dot > ... </ dot > </ div >

The css code is as follows:

.loading {
   /**Write your own custom style here*/
}
.loading > dot {
   height : 1em ;
   overflow : hidden;
   display : inline-block;
   text-align : left;
   vertical-align : - 0.25em ;
   line-height : 1 ;
}
/* Core code*/ 
.loading > dot :before {
   display : block;
   /* This line of code is the most important*/ 
  content : '...\A..\A.' ;
   /* The same effect will occur if the value is Pre */ 
  white-space : pre-wrap;
   animation : dot 3s infinite step-start both;
}
@keyframes dot {
   33% {
     transform : translateY (- 2em );
  }
  66% {
     transform : translateY (- 1em );
  }
}

The effect is as follows:

2. Dialog box

Create a content container dialog box with a triangle on the top. The implementation idea is as follows:

Create two triangles using the :before and :after pseudo-elements.

The colors of both triangles should be the same as the container’s border color and the container’s background color respectively.
The border width of one triangle (:before) should be 1px wider than the other triangle (:after) in order to act as a border.
The smaller triangle (:after) should be positioned 1px to the right of the larger triangle (:before) to allow its left border to show.

The html code is as follows:

< div  class = "container" > Border with top triangle </ div >

The css code is as follows:

.container {
   --borderColor-- : #ddd ;
   --bgColor-- : #fff ;
   position : relative;
   background-color : var (--bgColor--);
   padding : 15px ;
   margin-top : 20px ;
   border : 1px solid var (--borderColor--);
}
.container :before ,
 .container :after {
   content : '' ;
   position : absolute;
   bottom : 100% ;
   left : 19px ;
   border : 11px solid transparent;
   border-bottom-color : var (--borderColor--);
}
.container :after {
   left : 20px ;
   border : 10px solid transparent;
   border-bottom-color : var (--bgColor--);
}

The effect is as follows:

3. Bounce loading effect

Create a bounce loader animation. The implementation idea is as follows:

Use @keyframes to define bounce animations, using the opacity and transform properties. Use single-axis translation on transform: translate3d() for better animation performance.

Create a parent container for the bouncing circle, .bouncing-loader. Use display: flex and justify-content: center to position them in the center.
Give the three bouncing circle <div>elements the same width and height and border-radius: 50% to make them circular.
Apply the bouncing-loader animation to each of the three bouncing circles.

Use different animation delays for each circle and animation direction: alternate to create the appropriate effect.

The html code is as follows:

< div  class = "bouncing-loader" > 
  < div  class = "bouncing-loader-item" > </ div > 
  < div  class = "bouncing-loader-item" > </ div > 
  < div  class = "bouncing-loader" -item" > </ div > 
</ div >

The css code is as follows:

* {
   margin : 0 ;
   padding : 0 ;
   box-sizing : border-box;
}
body ,
 html {
   display : flex;
   height : 100% ;
   align-items : center;
   justify-content : center;
}
.bouncing-loader {
   display : flex;
   justify-content : center;
   width : 150px ;
}
.bouncing-loader-item {
   width : 16px ;
   height : 16px ;
   margin : 3rem  0.2rem ;
   background-color : #0b16f1 ;
   border-radius : 50% ;
   animation : bouncingLoader 0.6s infinite alternate;
}
.bouncing-loader-item :nth-child ( 2 ) {
   animation-delay : 0.2s ;
}
.bouncing-loader-item :nth-child ( 3 ) {
   animation-delay : 0.4s ;
}
@keyframes bouncingLoader {
   to {
     opacity : 0.1 ;
     transform : translate3d ( 0 , - 16px , 0 );
  }
}

The effect is as follows:

4. Animated border button

Create a border animation when hovering. The implementation idea is as follows:

Use the :before and :after pseudo-elements to create two 24px wide boxes, facing each other above and below the box.
Use the :hover pseudo-class to expand the width of these elements to 100% on hover and animate the change using a transition.

The html code is as follows:

< button  class = "animated-border-button" > Submit </ button >

The css code is as follows:

.animated-border-button {
   outline : none;
   background-color : #2396ef ;
   padding : 12px  40px  10px ;
   border : none;
   position : relative;
   color : #fff ;
   border-radius : 4px ;
   cursor : pointer;
}
.animated-border-button ::before ,
 .animated-border-button ::after {
   content : '' ;
   position : absolute;
   border : 0 solid transparent;
   height : 0 ;
   width : 24px ;
   transition : all 0.3s  cubic- bezier ( 0.075 , 0.82 , 0.165 , 1 );
}
.animated-border-button ::before {
   border-top : 2px solid #2396ef ;
   top : - 4px ;
   right : 0 ;
}
.animated-border-button ::after {
   border-bottom : 2px solid #2396ef ;
   bottom : - 4px ;
   left : 0 ;
}
.animated-border-button :hover ::before ,
 .animated-border-button :hover ::after {
   width : 100% ;
}

The effect is as follows:

5. border equal height layout

Use border to implement equal height layout. The implementation idea is as follows:

Set a left border for the box element. The border width is determined by the width of the child element, here it is 150px.
Set clear float for the pseudo-class of the box element. You cannot use overflow:hidden to clear it here.

Set left floating for the left navigation element of the box element, and set the width and left negative spacing. The spacing value is equal to the width value.
Set overflow:hidden to the right content element of the box element.
The navigation child element sets the row height and the right child element sets the row height.

The html code is as follows:

< section  class = "box" > 
  < nav  class = "box-nav" > 
    < div  class = "box-nav-item" > Navigation 1 </ div > 
  </ nav > 
  < section  class = "box-content" > 
    < div  class = "box-content-module" > Module 1 </ div > 
  </ section > 
</ section >

The css code is as follows:

.box {
   border-left : 150px solid #232425 ;
   background-color : #eeeded ;
}

.box ::after {
   content : '' ;
   clear : both;
   display : block;
}

.box-nav {
   width : 150px ;
   margin-left : - 150px ;
   float : left;
}

.box-nav-item {
   line-height : 40px ;
   color : #fff ;
   text-align : center;
}

.box-content-module {
   line-height : 40px ;
   text-align : center;
   color : #c40dd4 ;
}

.box-content {
   overflow : hidden;
}

The javascript code looks like this:

const navMore = document . getElementById ( 'addNav' ),
  moduleMore = document . getElementById ( 'addContent' );

if (navMore && moduleMore) {
   const nav = document . querySelector ( '.box-nav' ),
    section = document . querySelector ( '.box-content' );
   let navIndex = nav. children . length ,
    sectionIndex = 1 ;
   let  rand = () => 'f' + ( Math . random () + '' ). slice (- 1 );
  navMore. onclick = function () {
    navIndex++;
    nav. insertAdjacentHTML (
       'beforeEnd' ,
       '<div class="box-nav-item">Navigation' + navIndex + '</div>'
    );
  };
  moduleMore. onclick = function () {
    sectionIndex++;
    section. insertAdjacentHTML (
       'beforeEnd' ,
       '<div class="box-content-module" style="background:#' +
        [ rand (), rand (), rand ()]. join ( '' ) +
         '">module' +
        sectionIndex +
        '</div>'
    );
  };
}

The effect is as follows:

6. Custom checkbox

Create a style check box with status change animation. The implementation idea is as follows:

Use <svg>the element creation check <symbol>and <use>insert it via the element to create reusable SVG icons.
Create a .ew-checkbox-group and use flex box to create appropriate layout for the checkboxes.
Hide <input>the element and use its associated label to display the checkbox and provided text.

Use stroke-dashoffset to animate check symbols on state changes.
Use transform: scale(0.9) to create a scaling animation effect through CSS animation.

The html code is as follows:

< div  class = "ew-checkbox-group" > 
  < label  class = "ew-checkbox" > 
    < svg  class = "ew-checkbox-symbol" > 
      < symbol  id = "ew-check"  viewbox = "0 0 12 10 " > 
        < polyline 
          points = "1.5 6 4.5 9 10.5 1" 
          stroke-linecap = "round" 
          stroke-linejoin = "round" 
          stroke-width = "2" 
        > </ polyline > 
      </ symbol > 
    </ svg > 
    < input  type = "checkbox"  class = "ew-checkbox-input" /> 
    < span  class = "ew-checkbox-item" > 
      < svg  class = "ew-checkbox-icon"  width = "12px"  height = "10px" > 
        < use  xlink:href = "#ew-check" > </ use > 
      </ svg > 
    </ span > 
    < span  class = "ew-checkbox-item" > Apples </ span > 
  </ label > 
  < label  class = "ew-checkbox" > 
    < input  type = "checkbox"  class = "ew-checkbox-input" /> 
    < span  class = "ew-checkbox-item" > 
      < svg  class = "ew-checkbox-icon"  width = " 12px"  height = "10px" > 
        < use  xlink:href = "#ew-check" > </ use > 
      </ svg > 
    </ span > 
    < span  class = "ew-checkbox-item" > Oranges </ span > 
  </ label > 
</ div >

The css code is as follows:

.ew-checkbox-group {
   background-color : #fff ;
   color : rgba ( 0 , 0 , 0 , 0.85 );
   height : 64px ;
   display : flex;
   flex-wrap : row wrap;
   justify-content : center;
   align- items : center;
}
.ew-checkbox-group  .ew-checkbox-symbol {
   width : 0 ;
   height : 0 ;
   position : absolute;
   pointer-events : none;
  user-select: none;
}
.ew-checkbox-group * {
   box-sizing : border-box;
}
.ew-checkbox-input {
   position : absolute;
   visibility : hidden;
}
.ew-checkbox {
  user-select: none;
  cursor : pointer;
   padding : 6px  8px ;
   border-radius : 6px ;
   overflow : hidden;
   transition : all 0.3s ease-in-out;
   display : flex;
}
.ew-checkbox :not ( :last-of-type ) {
   margin-right : 6px ;
}
.ew-checkbox :hover {
   background-color : rgba ( 0 , 120 , 255 , 0.06 );
}
.ew-checkbox  .ew-checkbox-item {
   vertical-align : middle;
   transform : translate3d ( 0 , 0 , 0 );
}
.ew-checkbox  .ew-checkbox-item :first -of-type {
   position : relative;
   flex : 0  0  18px ;
   width : 18px ;
   height : 18px ;
   border-radius : 4px ;
   transform : scale ( 1 );
   border : 1px solid #cdcdfd ;
   transition : all 0.4s ease;
}
.ew-checkbox  .ew-checkbox-icon {
   position : absolute;
   top : 3px ;
   left : 2px ;
  fill: none;
  stroke: #fff ;
  stroke-dasharray: 16px ;
  stroke-dashoffset: 16px ;
   transition : all 0.4s ease;
   transform : translate3d ( 0 , 0 , 0 );
}
.ew-checkbox  .ew-checkbox-item :last-of-type {
   padding-left : 8px ;
   line-height : 18px ;
}
.ew-checkbox :hover  .ew-checkbox-item :first -of-type {
   border-color : #2396ef ;
}
.ew-checkbox-input :checked + .ew-checkbox-item :first -of-type {
   animation : zoom-in-out 0.3s ease;
   background-color : # 2396ef ;
   border-color : #2396ef ;
}
.ew-checkbox-input :checked + .ew-checkbox-item  .ew-checkbox-icon {
  stroke-dashoffset: 0 ;
}
@keyframes zoom-in-out {
   50% {
     transform : scale ( 0.9 );
  }
}

The effect is as follows:

7. Custom radio button

Create a style radio button with status change animation. The implementation idea is as follows:

Create a .radio-container and use flex box to create appropriate layout for the radio buttons.
Reset <input>the style on and use it to create the radio button’s outline and background.

Use the ::before element to create the inner ring of the radio button.
Use transform: scale(1) and CSS transition to create animations when states change.

The html code is as follows:

< div  class = "radio-container" > 
  < input  type = "radio"  class = "radio-input"  id = "male"  name = "sex" /> 
  < label  for = "male"  class = "radio" > Male </ label > 
  < input  type = "radio"  class = "radio-input"  id = "female"  name = "sex" /> 
  < label  for = "female"  class = "radio" > Female </ label > 
</ div >

The css code is as follows:

.radio-container {
   box-sizing : border-box;
   background-color : #fff ;
   color : #545355 ;
   height : 64px ;
   display : flex;
   justify-content : center;
   align-items : center;
   flex-flow : row wrap;
}
.radio-container * {
   box-sizing : border-box;
}
.radio-input {
  appearance: none;
  background-color : #fff ;
   width : 16px ;
   height : 16px ;
   border : 1px solid #cccfdb ;
   margin : 0 ;
   border-radius : 50% ;
   display : grid;
   align-items : center;
   justify-content : center;
   transition : all 0.3s ease-in;
}
.radio-input ::before {
   content : '' ;
   width : 6px ;
   height : 6px ;
   border-radius : 50% ;
   transform : scale ( 0 );
   transition : 0.3s transform ease-in-out;
   box-shadow : inset 6px  6px  #fff ;
}
.radio-input :checked {
   background-color : #2396ef ;
   border-color : #2396ef ;
}
.radio-input :checked ::before {
   transform : scale ( 1 );
}
.radio {
   cursor : pointer;
   padding : 6px  8px ;
}
.radio :not ( :last-child ) {
   margin-right : 6px ;
}

The effect is as follows:

8. Typing effect

To create a typewriter effect animation, the implementation idea is as follows:

Define two animations, the typing animated character and the blinking animated caret.
Use the ::after pseudo-element to add the caret to a container element.

Use JavaScript to set the text of the inner element and set the –characters variable containing the number of characters. This variable is used to animate text.
Use white-space: nowrap and overflow: hidden to make content invisible when necessary.

The html code is as follows:

< div  class = "typewriter-effect" > 
  < div  class = "text"  id = "typewriter-text" > </ div > 
</ div >

The css code is as follows:

.typewriter-effect {
   display : flex;
   justify-content : center;
   font-family : monospace;
   font-size : 25px ;
   color : #535455 ;
   font-weight : 500 ;
}
.text {
   max-width : 0 ;
   animation : typing 3s  steps ( var (--characters--)) infinite;
   white-space : nowrap;
   overflow : hidden;
}
.typewriter-effect ::after {
   content : ' |' ;
   animation : blink 1s infinite;
   animation-timing-function : step-end;
}
@keyframes typing {
   75% ,
   100% {
     max-width : calc ( var (--characters--) * 1ch );
  }
}
@keyframes blink {
   0% ,
   75% ,
   100% {
     opacity : 1 ;
  }
  25% {
     opacity : 0 ;
  }
}

The javascript code is as follows:

const typeWriter = document . getElementById ( 'typewriter-text' );
 const  createWriter = ( text = 'Lorem ipsum dolor sit amet.' ) => {
  typeWriter. innerHTML = text;
  typeWriter. style . setProperty ( '--characters--' , text. length );
};
createWriter ();

The effect is as follows:

9. High transition effect

When the height of the element is unknown, convert the height of the element from 0 to auto. The implementation idea is as follows:

Use transition to specify that changes to max-height should be transitioned.

Use overflow:hidden to prevent a hidden element’s content from overflowing its container.
Use max-height to specify an initial height of 0.
Use the :hover pseudo-class to change max-height to the value of the –max-height variable set by JavaScript.

Use Element.scrollHeight and CSSStyleDeclaration.setProperty() to set the value of –max-height to the current height of the element.
NOTE: Causes a reflow on every animation frame, which can cause a delay if there are a large number of elements below a highly transitioned element.

The html code is as follows:

< div  class = "trigger" >
  Hover me to see a height transition.
  < div  class = "el" > Additional content </ div > 
</ div >

The css code is as follows:

.trigger {
   cursor : pointer;
   border-bottom : 1px solid #2396ef ;
}
.el {
   transition : max-height 0.4s ;
   overflow : hidden;
   max-height : 0 ;
}
.trigger :hover > .el {
   max-height : var (--max-height--);
}

The javascript code is as follows:

const el = document . querySelector ( '.el' ),height = 
  el.scrollHeight ;
el. style . setProperty ( '--max-height--' , height + 'px' );

The effect is as follows:

10. Switch switching

Create a toggle switch widget using only CSS. The implementation idea is as follows:

Use the for attribute to associate it <label>with the checkbox element.<input>

Use <label>the ::after pseudo-element to create a circular knob for the switch.
Use the :checked pseudo-class selector to change the position of the knob, using transform: translateX(20px) and the background color of the switch.
Use position: absolute and left: -9999px to visually hide <input>the element.

The html code is as follows:

< input  type = "checkbox"  id = "toggle"  class = "offscreen checkbox" /> 
< label  for = "toggle"  class = "switch" > </ label >

The css code is as follows:

.offscreen {
   position : absolute;
   left : - 9999px ;
}
.checkbox :checked + .switch ::after {
   transform : translateX ( 20px );
}
.checkbox :checked + .switch {
   background-color : #7983ff ;
}
.switch {
   position : relative;
   display : inline-block;
   width : 40px ;
   height : 20px ;
   border-radius : 20px ;
   background-color : rgba ( 0 , 0 , 0 , 0.25 );
   transition : all 0.3s ;
   cursor : pointer;
}
.switch ::after {
   content : '' ;
   position : absolute;
   width : 18px ;
   height : 18px ;
   border-radius : 18px ;
   background-color : #fff ;
   top : 1px ;
   left : 1px ;
   transition : all 0.3s ;
}

The effect is as follows:

ps: The above code snippets are collected from various major networks and are currently summarized in my code snippet website

code snippet .

By mucktubeApril 19, 2024JavaScript