HTML CSS composes, and pseudo-element :after, :active:after, and transition

m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

disqus.js with id="disqus-js" is loaded.

kakao.js with id="kakao-jssdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=512;
m.wait=1024;
wait 851ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

Log in

▲

Go: Fuzzy search

out focus

[--The following is copied!--]

Dark Bright

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.18
Canonical URI: https://kipid.tistory.com/entry/HTML-CSS-composes-and-pseudo-element-after-active-after-and-transition
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/337
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

HTML CSS composes, and pseudo-element :after, :active:after, and transition

Buttons

Images

T1.Style

▼ Show/Hide

<style>
.button0 {
  appearance: none;
  background: none;
  font-size: 32px;
  padding-left: 12px;
  padding-right: 12px;
  outline: none;
  border: 2px solid transparent;
  color: rgb(112, 76, 182);
  padding-bottom: 4px;
  cursor: pointer;
  background-color: rgba(112, 76, 182, 0.2);
  border-radius: 2px;
  transition: all 0.15s;
}

.button0:hover,
.button0:focus {
  border: 2px solid rgba(112, 76, 182, 0.9);
}

.button0:active {
  background-color: rgba(112, 76, 182, 0.9);
}

.asyncButton {
  composes: button0;
  position: relative;
}

.asyncButton:after {
  content: "";
  background-color: rgba(112, 76, 182, 0.5);
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition:
    width 2s linear,
    opacity 10s ease;
}

.asyncButton:active:after {
  width: 0%;
  opacity: 1;
  transition: 0s;
}

.docuK .img-transition {
  width: 50%;
  transition: 2s ease;
}

.docuK .img-transition:hover {
  width: 100%;
}
</style>

composes 는 module 단에서만 동작하는듯.

▲ Hide

T2.HTML

▼ Show/Hide

Buttons

<button class="button0">Add Amount</button>
<button class="button0 asyncButton">Add Async</button>
<button class="button0">Add If Odd</button>

Images

<img class="img-transition" src="https://i.imgur.com/r3RMdYs.gif" />

▲ Hide

TRefs.References and Related Articles

▼ Show/Hide

1. Ref. [01] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
2. Ref. [02] https://poiemaweb.com/css3-transition

▲ Hide