[B! 背景] y-103のブックマーク

y-103 id:y-103

背景に関するy-103のブックマーク (4)

Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点解決方法その1: background-color 解決方法その2: viewport-fit 解決方法その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点新しく発売されるiPhone Xは、美しいディスプレ
y-103 2017/09/20
iPhone

iPhone X

背景
リンク
[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート
背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; background-image: var(--bg); } .blur-container.blur-8::after { background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.8; -webkit-filter: blur(6px); filter: blur(6px);
y-103 2017/03/07
背景

CSS

ぼかし
リンク
Redirecting
y-103 2016/08/15
背景

jquery

CSS

アニメーション
リンク
CSSグラデーションで作った背景パターンのサンプル - NxWorld
CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきて今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が増えるように思うので、利用する機会が多いと思う背景パターンをCSSのグラデーションを使っていくつか作ってみました。ここでの表示は全てイメージになるので、実際の表示は以下デモページをご覧ください。
y-103 2015/11/27
CSS

背景
リンク
1