CSS3 を使用して本のページ (本のコーナー) のカール効果を実現する方法_html/css_WEB-ITnose

ページにアナウンスやユーザープロンプトメッセージを表示したい場合があります。一般的なデザインは、ブックマークの形状を使用することです。

ブックマークにコーナーカール効果を追加して、よりリアルにすることができます。いわゆる「丸まったコーナー」は、小さな角度で傾けたシャドウ効果を使用して実際にシミュレートできます。

CSS3 擬似要素を使用すると、この効果を簡単に実現できます。

まず例を挙げます。WOW サイト ページの左側の列 (赤いボックス内) で次の効果​​が得られました。

具体的な実装を見てみましょう。

まず、テキスト情報を収容する div 要素を作成し (さらに多くの要素を含めることができます)、クラスに「犬の耳」という名前を付けます。これは、丸まった角を意味します:

<div class="dog-eared-tip">put your tips here</div>

次に、次の CSS コードを記述します:

.dog-eared-tip{    padding: 7.5px 5px 7.5px 20px;    background: #DEAA2F;    font-size: 13px;    position: absolute;    text-align: center;    width: 100%;    color: black;}.dog-eared_tip:before, .work_tip:after {    content: "\f0eb";    position: absolute;    z-index: -2;    -moz-transform: rotate(-3deg);    -webkit-transform: rotate(-3deg);    -o-transform: rotate(-3deg);    -ms-transform: rotate(-3deg);    transform: rotate(-3deg);    bottom: 15px;    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);    height: 50%;    left: 10px;    max-height: 100px;    max-width: 300px;    width: 50%;}.dog-eared_tip:after {    -moz-transform: rotate(3deg);    -webkit-transform: rotate(3deg);    -o-transform: rotate(3deg);    -ms-transform: rotate(3deg);        transform: rotate(3deg);    left: auto;    right: 10px;}

上記のコードは、まず背景色、フォント、センタリング、マージンなどの div の一般的なスタイルを設定します。

次に、div の :before および :after 疑似要素にボックスシャドウと小角度回転 (rotate メソッド) を設定します。

そして、前後の位置を div の下部に配置し、zシーケンスが負の数である場合、実際の効果は疑似要素自体が div によってブロックされることですが、その周辺のシャドウの底部を露出させるのに十分なだけです。

div にオーバーフロー非表示スタイルを設定しないように注意してください。設定しないと、影が表示されなくなります。

これで基本的には完了ですが、最後のステップがまだ残っています。両側の影の傾きが物理的に対称であるため、:after 疑似要素の傾き角度も調整する必要があります (-3° から 3 まで)。 °）。

このように: before はラベルの左下隅に対応し、:after はラベルの右下隅のカール シャドウに対応します。

この例は、IE11/Chrome/FF/Edge で動作します。

by iefreer