Kazuma Labolatory's

Nothing is Impossible. ✿


81. 【CSS】『引用』のデコレーション✨✨✧⁺⸜(●˙▾˙●)⸝⁺✧

99%Invisible---『Norman Doors: Don’t Know Whether to Push or Pull? Blame Design.』 99%Invesible.com
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;

/* 引用マーク*/

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;


/*エムダッシュ(ー) ,小スペース*/
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
blockquote cite:before {
content: "\2014 \2009";

ただ、contentの「\201C」「\2014 \2009」 が何を指しているのか、理解するのに時間かかりました::(っ`ω´c)::💦 


『"』 :ダブルクォーテーションマーク(\201c)

『ー』:エムダッシュ (\2014)

『 』   : 小スペース  (\2009)








●CSS Trick---『"\201c" "\2009 \2014"』


●The Punctuation Guide---『em dash』






Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️