Classification Effect Source

Link to article: Classification Effect Source.

Module Styles

• @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
  @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
  #page-title, h1 {
      text-align: center;
  }
  
  h1 {
      color: rgb(var(--swatch-primary));
  }

• .declass-component-block {
      position: relative;
  }
  
  .declass-component-block a:first-of-type,
  .declass-component-block a:first-of-type:visited,
  .declass-component-block a:first-of-type:hover,
  .declass-component-block a:first-of-type:active {
      position: absolute;
      inset: 0 0 0 0;
      width: 100%;
      height: 100%;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      cursor: default;
      pointer-events: all;
      text-decoration: none;
      color: transparent;	
  }
  .declass-component-inline a,
  .declass-component-inline a:visited,
  .declass-component-inline a:hover,
  .declass-component-inline a:active {
      cursor: default;
  }
  
  .declass-component-block p {
      display: inline;
  }
  
  .declass-component-block p,
  .declass-component-inline a {
      --class-component-color: rgb(var(--swatch-text-general, var(--basalt-main-text-color)));
      color: var(--class-component-color, currentcolor);
      text-decoration: none;
      pointer-events: all;
      background: -webkit-gradient(linear, left top, left bottom, from(var(--class-component-color, currentcolor)), to(var(--class-color, currentcolor))) no-repeat 0% 50%;
      background: linear-gradient(var(--class-component-color, currentcolor), var(--class-color, currentcolor)) no-repeat 0% 50%;
      background-size: 100% 100%;
      -webkit-animation: class-component-transition var(--class-component-duration, 500ms)cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
              animation: class-component-transition var(--class-component-duration, 500ms)cubic-bezier(0.4, 0.0, 0.2, 1) forwards;	
  }
  
  .declass-component-block:focus-within p,
  .declass-component-inline:focus-within a {
    -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  @media (pointer: coarse) {
    .declass-component-block:hover p,
    .declass-component-inline:hover a {
      -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
              animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    }
  }
  
  /* Safari Styles since Safari has to be a uniquely stupid bitch about :focus-within */
  @supports (-webkit-hyphens:none) { 
    .declass-component-block:hover p,
    .declass-component-inline:hover a {
      -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
              animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    }
  }
  
  @-webkit-keyframes class-component-transition {
      from {
      		background-size: 0% 100%;
      }
      to {
      		background-size: 100% 100%;
      }
  }
  
  @keyframes class-component-transition {
      from {
      		background-size: 0% 100%;
      }
      to {
      		background-size: 100% 100%;
      }
  }
  
  @-webkit-keyframes declass-component-transition {
      from {
      		background-size: 100% 100%;
      }
      to {
      		background-size: 0% 100%;
      }
  }
  
  @keyframes declass-component-transition {
      from {
      		background-size: 100% 100%;
      }
      to {
      		background-size: 0% 100%;
      }
  }

Inline Styles

• --class-component-duration:{$classification-speed}ms; --declass-component-duration:{$declassification-speed}ms;

• --class-component-duration:{$classification-speed}ms; --declass-component-duration:{$declassification-speed}ms;

Includes

• (none)

CSS Classes

• declass-component-block

• declass-component-inline

Page Source

[[iftags +component-backend]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
#page-title, h1 {
    text-align: center;
}

h1 {
    color: rgb(var(--swatch-primary));
}
[[/module]]
[[=]]
+ Check Page Source for Code

++ [[[component:classification-effect|⟫Main Component Link Here⟪]]]
[[/=]]
[[/iftags]] 

[[iftags -component-backend]]
[!-- {$styles}
[[module css]]
.declass-component-block {
    position: relative;
}

.declass-component-block a:first-of-type,
.declass-component-block a:first-of-type:visited,
.declass-component-block a:first-of-type:hover,
.declass-component-block a:first-of-type:active {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;
    pointer-events: all;
    text-decoration: none;
    color: transparent;	
}
.declass-component-inline a,
.declass-component-inline a:visited,
.declass-component-inline a:hover,
.declass-component-inline a:active {
    cursor: default;
}

.declass-component-block p {
    display: inline;
}

.declass-component-block p,
.declass-component-inline a {
    --class-component-color: rgb(var(--swatch-text-general, var(--basalt-main-text-color)));
    color: var(--class-component-color, currentcolor);
    text-decoration: none;
    pointer-events: all;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--class-component-color, currentcolor)), to(var(--class-color, currentcolor))) no-repeat 0% 50%;
    background: linear-gradient(var(--class-component-color, currentcolor), var(--class-color, currentcolor)) no-repeat 0% 50%;
    background-size: 100% 100%;
    -webkit-animation: class-component-transition var(--class-component-duration, 500ms)cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation: class-component-transition var(--class-component-duration, 500ms)cubic-bezier(0.4, 0.0, 0.2, 1) forwards;	
}

.declass-component-block:focus-within p,
.declass-component-inline:focus-within a {
  -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
          animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@media (pointer: coarse) {
  .declass-component-block:hover p,
  .declass-component-inline:hover a {
    -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
}

/* Safari Styles since Safari has to be a uniquely stupid bitch about :focus-within */
@supports (-webkit-hyphens:none) { 
  .declass-component-block:hover p,
  .declass-component-inline:hover a {
    -webkit-animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation: declass-component-transition var(--declass-component-duration, 500ms) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
}

@-webkit-keyframes class-component-transition {
    from {
    		background-size: 0% 100%;
    }
    to {
    		background-size: 100% 100%;
    }
}

@keyframes class-component-transition {
    from {
    		background-size: 0% 100%;
    }
    to {
    		background-size: 100% 100%;
    }
}

@-webkit-keyframes declass-component-transition {
    from {
    		background-size: 100% 100%;
    }
    to {
    		background-size: 0% 100%;
    }
}

@keyframes declass-component-transition {
    from {
    		background-size: 100% 100%;
    }
    to {
    		background-size: 0% 100%;
    }
}
[[/module]]
[!----]

[!-- {$block}
[[div class="declass-component-block" style="--class-component-duration:{$classification-speed}ms; --declass-component-duration:{$declassification-speed}ms;"]]
[# declass-text]{$content}
[[/div]]
[!----]

[!-- {$inline}
[[span_ class="declass-component-inline" style="--class-component-duration:{$classification-speed}ms; --declass-component-duration:{$declassification-speed}ms;"]][# {$content}][[/span]]
[!----]

[[/iftags]]