引用をモダンにするCSSの記述法

引用をモダンにするCSSの記述法サンプル ちょっと気になったので取り上げます。
Modern Block Quote Styles | Codropsで紹介されている引用のユニークで現代的なCSS記述法です。

全部で6パターン紹介されていますが、どれも個性的すぎるところがあるので、一番利用できそうなものを取り上げます。
その他も参考にして、自分なりの引用を作ってみてはいかがでしょうか。
記述方法 まず、HTMLのマークアップです。
<div class="mb-wrap mb-style">
<blockquote cite="引用元URL">
<p>引用文</p>
</blockquote>
<div class="mb-attribution">
<p class="mb-author">引用元筆者</p>
<cite><a href="引用元URL">引用元サイト名</a></cite>
<div class="mb-thumb"></div>
</div>
</div>

次にCSSを記述していきます。
/* 引用要素の幅 */
.mb-style {
width: 500px;
}

/* 影をつける */
.mb-style blockquote{
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow:
inset 0 2px 0 rgba(188, 147, 200, 0.7),
-5px -4px 25px rgba(0, 0, 0, 0.3);
}

/* 矢印をつける */
.mb-style blockquote:after,
.mb-style blockquote:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.mb-style blockquote:after {
border-top-color: #ffffff;
border-width: 10px;
left: 65%;
margin-left: -10px;
}

.mb-style blockquote:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}

/* 引用文の指定 */
.mb-style blockquote p {
font-family: 'Alegreya', serif;
font-size: 24px;
color: #b4b4b4;
font-weight: 400;
line-height: 40px;
font-style: italic;
text-indent: 100px;
position: relative;
}

/* クォーテーションマーク */
.mb-style blockquote p:before{
content: '\201C';
font-family: serif;
font-style: normal;
font-weight: 700;
position: absolute;
font-size: 175px;
top: 0px;
left: -105px;
color: rgba(188, 147, 200, 1);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}

/* 引用元をサムネイル付きで表示 */
.mb-style .mb-attribution {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
}

/* サムネイルは円で囲ってみます */
.mb-style .mb-thumb {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url(画像) no-repeat center center;
position: absolute;
right: 10px;
bottom: 5px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}

.mb-style .mb-author{
font-family: 'Alegreya SC', serif;
font-weight: 700;
font-size: 18px;
color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

.mb-style cite a{
font-family: 'Alegreya', serif;
font-weight: 700;
font-style: italic;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.mb-style cite a:hover{
color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
上記を適用すると下記のような状態になります。
サンプル

専門知識がなくてもJavaScriptなどのリッチコンテンツを簡単に導入できるよう、手順を詳細に書き綴っています。

skuare

skuare.net
その他は下記をご参照ください。
Modern Block Quote Styles | Codrops

sponsors

「引用をモダンにするCSSの記述法」をシェアする

記事作成:
記事URL:

TOP > > > 引用をモダンにするCSSの記述法