最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック
ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニックを紹介します。 Gradient Borders in CSS ※CSS-TRICKSがリニューアルされ、グラデーションが随所に使用されていますね。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素の周りにグラデーションのボーダーが必要な場合、どうしますか？ グラデーションのボーダーを実装するCSSのAPIはありません。 線形グラデーションの背景を持つラッパー要素を作成し、少し小さい内側の要素に背景を定義してくり抜くようにボーダーを実装します。 これを実装すると、下記のようになります。
【CSS】CSSだけでグラデーションの見出しとボーダーを作る！ - bagelee（ベーグリー）
はじめに 今回はCSSシリーズの続きとして、CSSだけでグラデーションがかかった見出し（文字）とボーダーを作る方法をご紹介します。 CSS2.0まではグラデーションがかかった見出し（文字）やボーダーを作りたい場合は画像、または背景画像を用意して作成する方法が一般的だったのですが、CSS3の導入により画像を使わずに様々な形のグラデーションを作ることが可能になりました！ 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen グラデーションの見出しとボーダー by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <h2>グラデーションの<br><span class="grad
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック![[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/86d2bb41707585bf01592235c9d747aa9374b088/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018032701.jpg)
