CSS – DevNotes

Hide Drop Down date with CSS

/* Gravity form (Launchpad book a tour) Hide Drop-down years keeping first 11 options */
select#input_7_9_3 *:nth-child(n+12),select#input_7_14_3 *:nth-child(n+12),select#input_7_19_3 *:nth-child(n+12) {
    display: none;
}

Typical Device Breakpoints

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Ticker menu

<div class="mhm-ticker-menu-wrapper">
<div class="mhm-ticker-menu">Our all branches are open today and online delivery is going on. Mega Home Market offering exciting offer on exciting products. 
</div>
</div>

.nav>li>a>i {
    color: #FF0000;
}

.icon-box-img svg, .icon-box-img img {
   padding-top: 0px; 
}

.mhm-ticker-menu-wrapper {
    position: fixed;
    bottom: 0;
/*     display: block; */
    width: 100%;
    text-align: right;
    left: 0;
    background: #ddd;
    color: #D10000;
    font-weight: bold;
	  padding: 5px;
}

.mhm-ticker-menu{
	  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  white-space: nowrap;
}


@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

Image shine effect of hover

.image-shine {
  background-color: #337bb2;
  background-image: url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
}

.image-shine:after {
  content: "";
  position: absolute;
    top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */
.image-shine:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.image-shine:active:after {
  opacity: 0;
}

CSS skeleton loading screen animation

<div class="video"></div>

.video:empty {
  width: 315px;
  height: 250px; 
  cursor: progress; 
  background: 
    linear-gradient(0.25turn, transparent, #fff, transparent),
    linear-gradient(#eee, #eee),
    radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
    linear-gradient(#eee, #eee);  
  background-repeat: no-repeat;
  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}

@keyframes loading {  
  to {
    background-position: 315px 0, 0 0, 0 190px, 50px 195px;
  }
}

Mailchimp form CSS

/* Mailchimp */
.mc4wp-form-fields:nth-child(2) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields > p:nth-child(3) {
    text-align: center;
}

#mc4wp-form-1 > div.mc4wp-form-fields input[type="submit"] {
    background: #F8BFC1;
    color: #000;
    border: #000;
}

.mc4wp-form-success .mc4wp-form-fields {
    display: none;
}

Table scrollbar customize

/* width */
*::-webkit-scrollbar {
  width: 10px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
*::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

Creating Playful Effects With CSS Text Shadows

&lt;!DOCTYPE html>
&lt;html lang="en">
  &lt;head>
    &lt;meta charset="UTF-8" />
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" />
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" />
    &lt;title>Document&lt;/title>
    &lt;style>
      .playful span {
        position: relative;
        color: #5362f6;
        text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
          0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
          1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
          2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
          3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
          3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
          4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
          5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
          6px 6px #e485f8;
        animation: scatter 1.75s infinite;
      }

      .playful span:nth-child(2n) {
        color: #ed625c;
        text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063,
          0.75px 0.75px #f2a063, 1px 1px #f2a063, 1.25px 1.25px #f2a063,
          1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063, 2px 2px #f2a063,
          2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
          3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063,
          3.75px 3.75px #f2a063, 4px 4px #f2a063, 4.25px 4.25px #f2a063,
          4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063, 5px 5px #f2a063,
          5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
          6px 6px #f2a063;
        animation-delay: 0.3s;
      }

      .playful span:nth-child(3n) {
        color: #ffd913;
        text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9,
          0.75px 0.75px #6ec0a9, 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9,
          1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9, 2px 2px #6ec0a9,
          2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
          3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9,
          3.75px 3.75px #6ec0a9, 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9,
          4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9, 5px 5px #6ec0a9,
          5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
          6px 6px #6ec0a9;
        animation-delay: 0.15s;
      }

      .playful span:nth-child(5n) {
        color: #555bff;
        text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
          0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
          1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
          2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
          3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
          3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
          4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
          5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
          6px 6px #e485f8;
        animation-delay: 0.4s;
      }

      .playful span:nth-child(7n),
      .playful span:nth-child(11n) {
        color: #ff9c55;
        text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555,
          0.75px 0.75px #ff5555, 1px 1px #ff5555, 1.25px 1.25px #ff5555,
          1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555, 2px 2px #ff5555,
          2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
          3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555,
          3.75px 3.75px #ff5555, 4px 4px #ff5555, 4.25px 4.25px #ff5555,
          4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555, 5px 5px #ff5555,
          5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
          6px 6px #ff5555;
        animation-delay: 0.25s;
      }

      @keyframes scatter {
        0% {
          top: 0;
        }
        50% {
          top: -10px;
        }
        100% {
          top: 0;
        }
      }
      body {
        background-color: #e4fff7;
      }

      h1 {
        font-size: 65px;
        text-transform: uppercase;
        font-family: "Archivo Black", "Archivo", sans-serif;
        font-weight: normal;
        display: block;
        width: 666px;
        max-width: 80vw;
        min-height: 90px;
        height: auto;
        text-align: center;
        margin: 10rem auto;
        margin: calc(50vh - 5rem) auto;
      }
    &lt;/style>
  &lt;/head>
  &lt;body>
    &lt;h1 class="playful" aria-label="Wash your hands">
      &lt;span aria-hidden="true">W&lt;/span>&lt;span aria-hidden="true">a&lt;/span
      >&lt;span aria-hidden="true">s&lt;/span>&lt;span aria-hidden="true">h&lt;/span
      >&lt;span aria-hidden="true"> &lt;/span>&lt;span aria-hidden="true">y&lt;/span
      >&lt;span aria-hidden="true">o&lt;/span>&lt;span aria-hidden="true">u&lt;/span
      >&lt;span aria-hidden="true">r&lt;/span>&lt;span aria-hidden="true"> &lt;/span
      >&lt;span aria-hidden="true">h&lt;/span>&lt;span aria-hidden="true">a&lt;/span
      >&lt;span aria-hidden="true">n&lt;/span>&lt;span aria-hidden="true">d&lt;/span
      >&lt;span aria-hidden="true">s&lt;/span>&lt;span aria-hidden="true">!&lt;/span>
    &lt;/h1>
  &lt;/body>
&lt;/html>

Image shine effect

.shine-me {
    width:100%; /*Make sure the animation is over the whole element*/

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:800px 800px;
    }
}

ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:800px 800px;
    }
}

CSS text shine effect

.textShineBlack {
  background: linear-gradient(to right, #373b3d 50%, #fff 70%, #f2e7e0 30%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: textShine 7s ease-in-out infinite alternate;
  padding-right: 15px;
}

@keyframes textShine {
  to {
    background-position: 200%;
  }
}