純粋な CSS を使用して「ツールチップテール」効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

純粋な CSS を使用して「ツールチップテール」効果を作成するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-08 20:33:02

オリジナル

705 人が閲覧しました

How Can I Create a

純粋な CSS を使用した「ツールチップテール」の作成

CSS のみを使用して「ツールチップテール」を作成するというコンセプトは魅力的です。この効果を実現する方法は次のとおりです:

ボーダートリックを使用した基本的な「ツールチップの尾」

最初の例では、賢い境界線操作を使用して「ツールチップの尾」効果を作成します:

HTML:

<div>Cool Trick:
    <div class="tooltiptail"></div>
</div>
<br>

<div>How do I get this effect with only CSS?
    <div class="anothertail"></div>
</div>

ログイン後にコピー

CSS:

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}

.anothertail {
    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
    display: block;
    height: 29px;
    width: 30px;

}

ログイン後にコピー

ボックスシャドウで「ツールチップテール」を強化

「ツールチップテール」の先端に立体感と影を追加するには、ボックスシャドウを利用できます:

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    box-shadow: 0 0 10px 1px #555;
}

ログイン後にコピー

シャドウを使用したクロスブラウザー互換の「ツールチップテール」

次のスニペットは、ボックスシャドウ効果のクロスブラウザー互換性を保証します:

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    -moz-box-shadow: 0 0 10px 1px #555;
    -webkit-box-shadow: 0 0 10px 1px #555;
    box-shadow: 0 0 10px 1px #555;
}

ログイン後にコピー

これらのテクニックを使用すると、Web 要素の視覚的な魅力と機能性を強化するカスタムの「ツールヒントの尾」を CSS で作成できます。

以上が純粋な CSS を使用して「ツールチップテール」効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。