CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

この記事の内容は、チャットバブル効果を賢く実現するCSS3の方法を紹介するもので、困っている方は参考にしていただければ幸いです。

先ほど思い切ってプレイしたモバイルページの改訂が完了しました。以前のページスタイルはよりフラットになり、暗い背景から明るい背景に変更され、より多くの影が削除され、ユーザーにシンプルなデザインが提供されました。経験スタイル、笑、私はデザイナーではありませんが、あまりにもコメントします。興味のある友人は、idarex モバイルホームページに直接アクセスしてください。

このリビジョンのすべてのスタイルは orange によって書かれています。私はそれらを分割して共有します。

さて、チャットバブルはどこにあるのか。私たちは同意しましたか？

従来のチャットバブル

画像のすぐ上にある従来のチャットバブルとは何ですか

CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)

##コードは次のとおりです

<p></p>

<style>
  .comment {
    width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: &#39;&#39;;
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

ログイン後にコピー

角丸四角形や三角形などの実装方法は誰もが聞いたことがあるでしょう。三角形の原理は、上の例のコードをコピーして、#border-color# を変更することができます。 ## 属性を備えた三角形の実装を調べます。

注: IE8 の以前のバージョンでは、透明な境界線があまり適切にサポートされていませんでした。ほとんどのブラウザは正常に表示されるため、下位バージョンの欠陥は無視してかまいません。互換性が必要な場合は、透明属性をバブルの背景色ではなくメインの背景色に設定してください (背景が単色の場合)。

誰もが知っていると思うので、ここでは他の実装方法については詳しく説明しません。

ここでの三角形の部分を正方形に置き換えても、同じ効果を得ることができます。その方法は、小さな正方形の一部が露出するようにすることです。コードは次のとおりです。

.comment {
  position: relative;
  width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

ログイン後にコピー

欠点は、小さな三角形が直角三角形しかないことです。もちろん、変形が多い場合は、それをひし形に変形してから結合することもできます。最初の方法ほど直接的ではないように感じます。ブラウザは、transform(2D) と互換性があります。属性は次のとおりです。

# 全体的には非常に優れています。いくつかの方法には信頼性があり、大きな互換性の問題はありません。 CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)

現実的なケース

ここのデザインドラフトには余分な枠線があります。デザインドラフトを直接アップロードできますか。

これに対処する方法を考えてみましょう。上記の CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)

最初のメソッド自体は

border

を透明に設定する方法が問題ですが、やめておきます。とりあえず検討してみてください。

2 番目の方法で小さな正方形の回転を使用する場合、デザインドラフトのバブルの背景が rgba(247, 188, 10, 0.03) であるため、レイヤーのオーバーレイが問題になります。最初に実装コードを見てください。

.comment {
  width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

ログイン後にコピー

効果は次のとおりです

##上のアイデアには問題があります。小さな正方形がパーツと重なるためです。半透明の背景部分には常に問題が発生します。いつでも怠惰に透明な背景色を吸収して、それをオーバーレイすることができると誰かが言いました (なぜなら、デザインドラフトの全体的な背景は、誰もが気づいているからです)。単色)

このアイデアに従う場合、ここで問題が再び発生します。具体的な質問は以下の2つです。

CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例) 1. 小さな正方形を上に重ねると、小さな正方形の左半分の境界線が表示されます。前の図と比較すると、次のようになります。 , 角丸長方形の右側は確かに覆われていますが、小さな正方形の左側の境界線は

と表示されています。

.comment {
  width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

ログイン後にコピー

問題が解決されたことがわかりました。結果は次のとおりです。

CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)

デザインドラフトには

padding

が含まれています。この場合、個人的なテストでは実行可能ですが、真剣さの原則に沿っています。

padding-right

小さすぎるとどのような問題が発生しますか?

CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例) pにテキストを追加します。

.comment:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

ログイン後にコピー

結果は次のとおりです

文字「o」の右下隅が小さな正方形の左側で覆われていることがわかりました。もちろん、

z-index

属性ハックを渡すこともできます。

2. 小さな正方形が角丸長方形の下にある場合、角丸長方形の右側の境界線が完全に表示されます。この解決策は自分で決めることができますが、私はそうではありません。説明しすぎると。

CSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例) 上記の方法の欠点も明らかです。では、需要の変化に応じて筋肉や骨を傷つけずに、より厳密に行うにはどうすればよいでしょうか。

トライアングルプランも利用しております！三角解法は実現不可能ということではないでしょうか？ 1つの三角形は無理です。2つについては、

after

の兄弟である

before

に登場してもらいました。プロジェクトの実際のコードは次のとおりです

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid rgba(#fcb908, 0.35);
  border-radius: 0.2rem;
  background-color: rgba(#f7bc0a, 0.03);

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

ログイン後にコピー