.modern-gradient { background-image: linear-gradient( to right in oklab, oklch(70% 0.5 340) 0%, oklch(90% 0.5 200) 100% ) ; } Copy
.modern-gradient { background-image: linear-gradient( to right in oklab, oklch(70% 0.5 340) 0%, oklch(90% 0.5 200) 100% ) ; } Copy
点線の作り方 線の幅が「3px」、間隔が「5px」の点線を作ると想定してご説明します。 まずはHTMLを記述します。 <div class="example"></div> 次に、CSSで点線を作っていきます。 以下3つのプロパティを使います。 点線の1セットをつくる 「1セット」とは、赤枠で示した部分のことです。 この1セットを作って、あとは「background-repeat」で繰り返し表示するイメージです。 「background-size」で大きさを設定 background-size: 8px 1px; まずは1セットの枠の大きさを設定します。 線の幅が「3px」で間隔が「5px」⇒「8px」と指定。線の高さが「1px」⇒「1px」と指定。 「background-image」+「linear-gradient」で点線を描く グラデーション(linear-gradient)を使っ
It’s not modern if it doesn’t move. Of course, this also applies to your website’s background. Bubbly Backgrounds are at your service. JavaScript for Bubbles Bubbly Backgrounds is a very small JavaScript written by a Norwegian developer called David who goes by the name of Tipsy on Github. With its compressed 696 bytes, the short script won’t overload any website, but will cause just the right amo
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
2016年のあいだに公開されたテクスチャ280枚以上をセットに、無料ダウンロードできる素材集 Textured Background Bundle を今回はご紹介します。 デザインの背景を作成することを想定しており、プリント印刷にも対応した高画質の素材なので、アイデアに困ったときに活用してみてはいかがでしょう。 詳細は以下から。 収録数280+枚!商用利用できる高品質な無料テクスチャ素材セット Textured Background Bundle では、4256×2832pxの高画質なテクスチャ素材のみを収録しており、質感の高いウッドや黄金ラメなど合計280枚以上を収録したお得な素材集です。幅広いデザイン制作に利用できるアイテムのひとつと言えるでしょう。 収録されているファイルは、2.5GBを超えた太っ腹な素材となっているので、ダウンロードには多少時間がかかるかもしれません。より豊富なバラ
【CSS3】背景画像を無限スクロールさせる[Infinite Scrolling Background]がカッコいいですよ。 背景画像を縦方向に無限スクロールさせる[Infinite Scrolling Background]を紹介します。 まずは実際に動いているサンプルをご覧ください。 Infinite Scrolling Background : https://on-ze.com/demo/css3-infinite-scrolling-background/ 一見すると jQuery を使っているようですが、実はシンプルな CSS のみで実装しています。 具体的には CSS3 の『translate3d』を利用することになりますね。 HTML の記述 以下、背景部分のHTMLの書き方です。 <body> ... <div id="window"></div> </body> ウィン
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します! ↑私が10年以上利用している会計ソフト! CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く