コピペで簡単！CSSの小技8選！現場で使えるサンプル集

selector{
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: rgba(255,255,255,0.3); /* 白半透明 */
border-radius: 2rem; /* 角丸 */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; /* 影 */
max-width:600px; /* 最大幅 */
margin:0 auto; /* 中央揃え */
}

/* ---タイピング風--- */
/*水平垂直中央寄せ*/
selector {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* テキスト */
selector p{
  display: inline-block;
  font-size:min(32px,6.4vw);
  line-height:1.4;
  width: 10ch;
  border-right: 3px solid currentColor;
  overflow: hidden;
  white-space: nowrap;
  /*アニメーション*/
  animation: typing 3s steps(10), blinkcursor .4s step-end infinite alternate;
}

@keyframes typing {
	0% {
		width: 0;
	}
}
/*点滅カーソル*/
@keyframes blinkcursor {
  50% {
    border-color: transparent
  }
}

/* ---フェードイン--- */
selector{
animation-name: fadein;
animation-duration: 1s; /* アニメーションの時間 */
animation-delay:3s;  /* 3秒後に開始 */
animation-fill-mode:backwards;/*最初のキーフレームの状態*/
}
@keyframes fadein{
    0%{
    opacity: 0;
    transform: translatey(20px);
    }
    100%{
    opacity: 1;
    transform: translatey(0);
    }
}

/* ---流れる背景1番目--- */
selector{
  font-size:min(32px,6.4vw);
  position: relative;
  display:inline-block;
  padding:0 10px;
}
/* 背景 */
selector::before {
  background-color:rgba(255,255,255,1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  z-index: -1;
 animation: bg 1s ease-out backwards;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
  50%, 100% {
    opacity: 1;
  }
}

/* ---流れる背景2番目--- */ 
selector::before {
 animation: bg 1s ease-out 0.5s backwards;
}

/* ---流れる背景3番目--- */ 
selector::before {
 animation: bg 1s ease-out 1s backwards;
}

selector .is-style-rounded img{
width: 200px;
height: 200px;
object-fit: cover;
}

/* 単独線 */
selector .has-inline-color {
    text-decoration: underline solid;
    text-underline-offset: 5px;
}

/* 二十線 */
selector .has-inline-color {
    text-decoration: underline double;
    text-underline-offset: 5px;
}

/* 点線 */
selector .has-inline-color {
    text-decoration: underline dotted;
    text-underline-offset: 5px;
}

/* 破線 */
selector .has-inline-color {
    text-decoration: underline dashed;
    text-underline-offset: 5px;
}

/* 波線 */
selector .has-inline-color {
    text-decoration: underline wavy;
    text-underline-offset: 5px;
}

selector .wp-block-column {
    position: relative;
    overflow: hidden;
}

selector .vkp_tips {
    position: absolute;
    top: -6px;
    left: -28px;
    width: 83px;
    height: 40px;
    padding: 24px 0 0 0;
    color: #FFF;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    background: #227739;
    text-align: center;
    transform: rotate(-45deg);
}

selector .vkp_tips.blue {
    background: #2207E3;
}

selector .vkp_tips.yellow {
    background: #FF9C00;
}

/*画像右上分類名を左上三角*/
selector .vk_post_imgOuter_singleTermLabel{
  position: absolute;
  top: -6px;
  left: -28px;
  width: 83px;
  height: 42px;
  padding: 24px 0 0 0;
  font-size: 11px;
  text-align: center;
  transform: rotate(-45deg);
}

selector table{
  border-collapse: separate;
  border-spacing: 0 10px;
  border:none;
}

/* tdの共通背景色 */
:root {
  --td-bg-color:rgba(0,0,0,0.05);
}

selector :is(td,th) {
  border: none;
  padding: 1rem;
  background:#fff;
}

/* 最初のtd */
selector tr td:nth-of-type(1)  {
  position:relative;
  background: var(--td-bg-color);
  vertical-align: middle;
  text-align: left;
  overflow: visible;
}
/* 最初のtdに吹き出しのしっぽ */
selector tr td:nth-of-type(1):after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-left-color: var(--td-bg-color);
  border-width: 10px;
  margin-top: -10px;
}

/*テキストのみ*/
selector a {
  position: relative;
  display: inline-block;
  padding-right: 40px;
  text-decoration: none;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}
/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
 right:0;
 transition: all .2s linear;
}

/*背景あり*/
selector a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color:#eee;
  padding:10px 60px 10px 30px;
  max-width:240px;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}

/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
 right:10px;
}

/*テキストのみ：Hover時に矢印が動く*/
selector a {
  position: relative;
  display: inline-block;
  padding-right: 40px;
  text-decoration: none;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}
/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
  right:0;
  transition: all .2s linear;
}
/*hover時*/
selector a:hover::before,
selector a:hover::after{
  right:-5px;
}

/*背景あり：Hover時に矢印が動く*/
selector a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color:#eee;
  padding:10px 60px 10px 30px;
  max-width:240px;
  color:currentColor;
}

selector a::before {
  width: 38px;
  bottom: 50%;
  border-bottom: solid 1px currentColor;
}

selector a::after {
  width: 10px;
  background: currentColor;
  bottom: calc(50% + 2px);
  transform: rotate(30deg);
}

/*共通*/
selector a::before,
selector a::after{
  content: '';
  position: absolute;
  display: block;
  height: 1px;
  right:10px;
  transition: all .2s linear;
}

/*hover時*/
selector a:hover::before,
selector a:hover::after{
  right:5px;
}