タグ

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

タグの絞り込みを解除

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

  • 人もデザインも第一印象が大事！想像力を湧き立てるオーバーレイ手法を上手に活用したホームページ18選

    如何なるホームページにとっても"配色"は、決して見過ごすことのできない重要な要素です。 どんな色をしていて、どんな見た目をしているのか、でそのホームページの第一印象は大きく異なってきます。 そこで2016年に注目を集めたのが『オーバーレイ』です。 オーバーレイは色のついた半透明のボックスの中に画像や映像を表示させる手法で、上手に活用すると自然と画像や映像に視線が集まり、想像力を湧き立てます。 今年、デザインにグラデーションや単色のオーバーレイを上手取り入れたホームページが数多く登場しました。 そこで今回は、国内外問わず、ヒーロー画像が印象的な『オーバーレイ』を上手に活用したホームページをまとめてご紹介します。 ヒーロー画像が印象的なオーバーレイを上手に活用したホームページ 18選 1. Deep Mind https://deepmind.com/ こちらは、世界的にも有名な人工知能(AI

    人もデザインも第一印象が大事！想像力を湧き立てるオーバーレイ手法を上手に活用したホームページ18選

  • 超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ | CodeCampus

    超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ更新日: 2018年10月11日公開日: 2015年1月6日 ホームページデザインに彩りを添えてくれるグラデーションは、たくさんのホームページで使われていますよね。しかし、いざコードを書くとなると長くて面倒なのがこのCSSグラデーション。何種類もグラデーション用のコードを書かないといけない謎な仕様だったり、長いコードの意味がよくわからなかったり…。 そこで今回はこのグラデーション技術の基礎をご紹介していきます。簡単にグラデーション用のコードが作れるジェネレーターもご紹介するのでお見逃しなく！ グラデーションコードの基礎 色の移り変わりがとても綺麗なグラデーションですが、CSSでグラデーションを表現するには、linear-gradient()関数を使います。linear-gradient()関数は線型のグラデーションを表現して

    超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ | CodeCampus

  • [CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト

    シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <div class="tiles"> <a href="#" class="tile"><img src="image.jpg"/><div class="details"><span class="title">見出し</span><span class="info">テキスト</span></div></a> <a href="#" class="tile"><img src="image.j

    [CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト

  • 超簡単！Photoshopで写真を今どきのデュオトーンに加工する方法（無料グラデーション収録）

    ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。 デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。 今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。 詳細は以下から。 Photoshopで写真を今どきのデュオトーンに加工する方法 ステップ1: 加工する写真を開こう。 まずはデュオトーン・エフェクトを加えたい写真を P

    超簡単！Photoshopで写真を今どきのデュオトーンに加工する方法（無料グラデーション収録）
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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