CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。 How to create a Sticky Hero section by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに チュートリアルの動画 実装方法 はじめに わたし達は先日、スティッキーヒーローのコンポーネントを公開しました。このデモは、スクロールするとコンテンツを表示するスティッキーセクションです。 上記は、固定された画像をズームさせたデモで、オーバーレイにすることも簡単で
![[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/39ce5a1514a3f90573d20acd23e68d827b403b5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019051902-01.png)
Photoshopいらず! CSS3だけで写真にフィルター加工をかけちゃうチュートリアル
写真の明るさを変えたり、ぼかしをかけたり、色相を変えたり。 こうしたことはPhotoshopなどのソフトを使うことがほとんどではないかと思いますが、ある程度のことが実はCSS3だけでも実現できたりします。 今回はそのチュートリアルをまとめてみました。 [関連] 「Googleカスタム検索」のデザインをCSSレベルで変更するテクニック [関連] 「CSS3デザインプロフェッショナルガイド」はデザイナー必携本だ [関連] CSS3で作られたレイヤースタイル風CSS3ジェネレーター [関連] CSS3に対応していないブラウザで閲覧したら? をかんたんに確認できる「deCSS3」 基本となるのはfilterプロパティです。記述としては以下が基本形になります。 filter: filter(value); -webkit-filter: filter(value); -moz-filter: fil
CSSGram - スタイルシートを使ったInstagram風フィルタ
Instagramは相変わらず高い人気で、10代を中心に多くのユーザが日々写真をアップロードしています。そんなInstagramの売りと言えば、写真に対する格好良いフィルタではないでしょうか。 CSSGramはそんなInstagram風のフィルタをWeb上で再現してくれるライブラリになります。CSSレベルとあって、自由に変更も可能なのでWeb上で写真を効果的に見せるのに使えそうです。 CSSGramの使い方 CSSGramで使えるフィルタです。 青系、赤系なども格好良いです。 1977も良いですね。 CSSGramを使えば同じ写真であっても全く違う印象を与えるのではないでしょうか。また、Instagram風のWebサイトを作った際にもその写真の加工法として指定できると効果的ですね。 CSSGramはCSS3製のオープンソース・ソフトウェア（MIT License）です。 CSSGram u
[CSS]これはスゴイぞ！写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram
写真をかわいくするのに、特別なソフトウェアは必要なくなるかもしれません。 普通の写真にスタイルシートを一行追加するだけで、インスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート「CSSgram」を紹介します。
![[CSS]これはスゴイぞ！写真の仕上がりをインスタグラム風にかっこよく、かわいくするスタイルシート -CSSgram](https://cdn-ak-scissors.b.st-hatena.com/image/square/53e9b7f9b04923251034683e5692a663fa070279/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102701.png)
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
CSS Filter Effects | BestAgencies
-webkit-filter: blur({{filterBlurAll.qty}}px) brightness({{filterBrightnessAll.qty}}) contrast({{filterContrastAll.qty}}) grayscale({{filterGrayscaleAll.qty}}) hue-rotate({{filterHuerotateAll.qty}}deg) invert({{filterInvertAll.qty}}) opacity({{filterOpacityAll.qty}}%) saturate({{filterSaturateAll.qty}}) sepia({{filterSepiaAll.qty}}) drop-shadow({{filterDropshadowAll.qty}}px {{filterDropshadowAll.q
CSS Shapes で使うレスポンシブなマスクをMacのプレビューアプリで作成する | Adobe Blog
この記事は、Web Platformチームブログに 2014/11/10 に投稿された記事 「Make responsive masks for CSS Shapes using Mac Preview App」 を翻訳したものです。 Chrome, Opera, そして Safari には既に CSS Shapes が搭載されており、まだこの機能を持たないブラウザでは CSS Shapes polyfill が利用できます。Brackets や Chrome の web inspector では、基本的な形状や多角形のサポートがあります。 既にサポート環境があるのですから、画像を使って CSS Shapes をつくってみませんか？ Rebecca Hauck が Photoshop で画像から形状をつくる方法に ついての記事を書きました。今日は、Mac のプレビューアプリを使ってマスクを
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
una.im | Introducing CSSgram: A CSS Library for Instagram Filters
工夫のあるUIがいい！CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy