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

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

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

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

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

従来のチャット バブル

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

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

<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) と互換性があります。属性は次のとおりです。

# 全体的には非常に優れています。いくつかの方法には信頼性があり、大きな互換性の問題はありません。

現実的なケース

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

これに対処する方法を考えてみましょう。上記の

最初のメソッド自体は

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つです。

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;
}

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

デザイン ドラフトには

padding

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

padding-right

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

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

上記の方法の欠点も明らかです。では、需要の変化に応じて筋肉や骨を傷つけずに、より厳密に行うにはどうすればよいでしょうか。

トライアングルプランも利用しております！三角解法は実現不可能ということではないでしょうか？ 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;
  }
}

注：这段代码用的是 SASS 进行预编译，如果从头仔细看到这里的话不难理解，两个三角形叠加，大三角形颜色是边框的颜色，小三角形是内部背景色，小三角形绝对定位时向下移 3px 把圆角矩形的一部分上边框遮挡，这样小三角下部也有溢出，具体在两像素之内，实际上不存在遮挡文本问题。

总结

实际问题解决的方法很多，就看大家怎么去思考，这个方案也不是最满意的方案，因为多了一个伪元素，主要还是设计思想的多样性，总之 css 很灵活。

有人不禁会问，这里设计稿给的是向上的箭头，为什么例子里却都是向右的，这里向右的都是我写的 demo ，理解原理的话，改变个位置方向都是大同小异。

以上がCSS3でチャットバブル効果を実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。