文字にグラデーションをかける方法 | Designmemo（デザインメモ）-初心者向けWebデザインTips-
CSS3の機能である「linear-gradient」などのグラデーションプロパティを使って背景にグラデーションを敷くことはできますが、テキストにもグラデーションをかけることができます。これなら画像を用意しなくても簡単にグラデーションがかかった文字を作成することができ、ちょっとしたアクセントにもなります。 グラデーションの作成 文字にグラデーションをかけるためのCSSを準備します。ソースは以下のような感じになります。 .text-grad { background: linear-gradient(110deg, #ffd800, #ff0000 45%, #ffd800); -webkit-background-clip: text; -webkit-text-fill-color: rgba(255,255,255,0.0); color: #ff0000; } /*IEで未対応の場合
「Google Fonts」にfont-displayを適用する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【2019/7/22 追記】 Google Fontsから公式にfont-display適用方法が提供されました！ クエリパラメータ display によって、font-displayの適用が可能になりました！ 合わせて、Google Fontsから提供されるlinkタグに、デフォルトでfont-display: swap;が設定されるようになっています。 詳細については、こちらのGitHub Issueをご参照ください。 こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、「Google Fontsへのリクエストは、Google Fontsから提供されるlinkタグをそのまま使用するのがベスト」とまとめました。実際、ブラウザに応じて最適なフォント形式が自動的に取得され、場合によってはunicode-range属性も併用されるのでメリットは大きいです。 ただし、一点だけ、デ
2019年、UIとUXデザインのトレンドを解説！デザインのテクニックやツール、ブラウザ、フォントも進化している
デザイン業界の現在の流れを把握し、それらがどこに向かって進んでいるのか、何ができるようになるのか、チェックしておきたいUIとUXデザインのトレンドを紹介します。 昨年まではスマホ中心のトレンドが多かったですが、今年のキーワードは「コンテキスト」です。より良い方法でデザインするために、インターフェイスのトレンドを確認しておきましょう。 2019 UI and UX Design Trends by Moses Kim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ブラウザの進化 02. 目的があるアニメーション 03. インターフェースの3Dとディープフラット 04. 超現実的なデザイン 05. グラデーション 2.0 -燃えるようなカラーと暗闇 06. 可変フォント 07. Figma 08. 音声UI 09. UXに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scssの配列ループ＋変数でカテゴリ色分けなどを簡単にするよ！ - Qiita
