タグ

ブックマーク / commte.net (3)

  • CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ

    TL;DR ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き background-clipプロパティは背景の範囲(ボックスモデル・ボーダーボックス・パディングボックス)に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent; 指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。 .foo { -webkit-ba

    CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ
  • さりげなく使える、Webデザインの参考になるサイト集

    作成:2016/04/11 更新:2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス

    さりげなく使える、Webデザインの参考になるサイト集
  • それなりに使える、Web制作者がお世話になる便利ツール

    作成:2016/01/4 更新:2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ

    それなりに使える、Web制作者がお世話になる便利ツール
  • 1