/suto3/UserCSS:引用 - Scrapbox Reader

generated at 11/17/2024, 2:08:59 PM
UserCSS:引用
引用（quote）
UserCSS:quote

引用を斜体にしない
foldrr - /foldrr/settings
> そうなんです。もともと漢字の書体に、斜体という概念はないのです。

stylexx.css.line .quote {
  font-style: normal;
  padding: .1rem 1em;
}

UserCSS:レインボー記法
stylexx.css.line .quote {
  font-style: normal;
  padding: .1rem 1em;
  background: linear-gradient( to right,
                              red,
                              orange,
                              yellow,
                              green,
                              aqua,
                              blue,
                              purple,
                              red                                      
                              ) 0% center / 200% auto ; /* グラデーション */
   padding: 0.1em 0.2em 0.1em 0.2em;
   animation: rainbow 4s linear infinite;
}

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

グラデーションテキスト版
style.css.line .quote {
  font-style: normal;
  padding: .1rem 1em;
  background: linear-gradient( to right,
                              red,
                              orange,
                              yellow,
                              green,
                              aqua,
                              blue,
                              purple,
                              red                                      
                              ) 0% center / 200% auto ; /* グラデーション */
   padding: 0.1em 0.2em 0.1em 0.2em;
   animation: rainbow 10s linear infinite;
   animation-direction: reverse;
   -webkit-background-clip: text; /* */
   -webkit-text-fill-color: transparent; /* */
   background-clip: text;
   color: transparent;
}
@keyframes rainbow {
  to { background-position-x: 200%; }
} 

stylexx.css.line .quote {
  background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  } 
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

stylexx.css.line .quote {
  background: linear-gradient(to right, #a6d900 0%, #ff4454 100%);
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  } 
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

引用符の追加
style.css.line .quote::before {
  color: #a0a0a0;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size:85%;
  content: '\f10d';
  vertical-align: super
}

HTML5:引用

#UserCSS-term