タグ

関連タグで絞り込む (6)

タグの絞り込みを解除

グラデーションに関するharu135のブックマーク (7)

  • radial-gradient()－CSS3リファレンス

    グラデーションの中心位置 at に続けて left, center, rightや、top, center, bottom などの位置を表すキーワード、または、0%, 50%, 100% などの%値でグラデーションラインの中心位置を指定。初期値は center 形状 circle（円）、ellipse（楕円）のいずれか。初期値は ellipse サイズ グラデーションのサイズを以下のキーワードで指定。初期値は farthest-corner closest-side …… ボックスの最も近い辺がグラデーションの終了位置となる farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終

  • [Photoshop] 乗算、スクリーンなどでつくる簡単・便利なグラデーション

    描画モードの乗算・スクリーンなどは、グラデーションを作るときに役立ちます。1つずつ色指定をしてグラデーションを作るのは手間ですので、描画モードや不透明度を指定し、色を変えると自動的にグラデーションも変わるような作成方法をまとめてみました。 グラデーションを設定するには、レイヤースタイルの小窓を開き、「グラデーションオーバーレイ」を選択します。 グラデーションは初期値の「白→黒」のままにします。 【明度】高→低 「乗算」を使います。始まりの部分（白色）が選択色になり、下にいくにつれ黒が足されていきます。 【彩度】低→高 「スクリーン」を使います。終わりの部分（黒色）が選択色になり、白から選択色へグラデーションがかかります。 私は白→薄い色のグラデーションに良く使います。 【明度＆彩度】高→低 「ソフトライト」を使います。中間部分が選択色になり、始まりの部分（白色）は明度＆彩度が高く、終わりの

    [Photoshop] 乗算、スクリーンなどでつくる簡単・便利なグラデーション

  • [CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

    こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;

    [CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。

  • 背景として使用されるCSSグラデーションはどの範囲に描画されるか

    背景として使われるCSSグラデーションが描画される範囲はどのように決定されるのか、仕様を読みながら考えてみたいと思います。 参考にしたのは2012年4月17日版の「CSS Image Values and Replaced Content Module Level 3」です。非公式の日本語訳もあります。 この記事に書いている範囲は自分で訳したので、上記の翻訳とは用語の表記などが異なっています。ご了承ください。 （調べ終わり頃に日本語訳があるのに気づいたので……） なお、ここ以降で単に「グラデーション」と書いている場合は「CSSグラデーション」のことを指します。 グラデーションが描画される範囲についてまずはグラデーションが描画される範囲はどのように決定されるのかを調べてみます。 仕様を見ると次のように書かれています。 グラデーションはグラデーションボックス（gradient box）と呼ばれ

    背景として使用されるCSSグラデーションはどの範囲に描画されるか

  • Photoshopでグラデーションの汚い縞模様をなくして綺麗にする超簡単な方法

    下の画像は、左：適用前のグラデーション（ディザ有り）、右：適用後のグラデーションです。 適用前にはグラデーションにバンディングの縞模様があり汚いですが、適用後のものは縞模様がなくなり綺麗なグラデーションとなっています。 Photoshop Tip: Spatter [ad#ad-2] 上記で紹介されているのは非常に簡単な方法で、Photoshopのはねフィルターを使用します。 メニューバーの[フィルター]-[ブラシストローク]-[はね]を選択します。

  • サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

    京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

    サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

  • CSS Gradient Background Maker

    Use this demo to create CSS background-image gradients. The CSS markup works in browsers (including Internet Explorer 10, Chrome, Firefox, Opera, Safari) that support CSS3 gradients in unprefixed form or with any of the following prefixes: ms, moz, o, webkit.

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.