タグ

ブックマーク / qiita.com/degudegu2510 (2)

  • 【CSS】borderを使って、三角形作るのはやめませんか? - Qiita

    はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか? borderを使って作っていませんか? この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、来のプロパティとは違う使い方でうつくしくないですよね! この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

    【CSS】borderを使って、三角形作るのはやめませんか? - Qiita
    north_korea
    north_korea 2023/06/18
    これより前の時代は小さい四角形を45度回転させて下半分を隠すみたいな事もしていた…
  • 【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

    概要 みなさんは、このドロップシャドウを見てどう思いますか? ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね? この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう! ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは2次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

    【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
    north_korea
    north_korea 2022/07/15
    綺麗なドロップシャドウを見つけたらCSSを見るようにしているが、複数のシャドウを重ねて作られていることが多い印象
  • 1