Animated Gradient Background Generator
.gradient-background { background: linear-gradient(300deg,deepskyblue,darkviolet,blue); background-size: 180% 180%; animation: gradient-animation 18s ease infinite; } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }copy
Generate unique SVG design assets | Haikei
Growing number of generatorsGet started with one of our flexible SVG generators that will help you create unique data-driven shapes without hassle. Choose between stacked or layered waves, steps, peaks, blobs, symbols, grids, gradients, and much more. Easy to integrate into your workflowWhether you are creating a poster or a website, integrating Haikei into your workflow is easy! Export your backg
Animated Backgrounds
Welcome to Animated Backgrounds! Are you tired of boring, static backgrounds on your website or presentation? Our animated backgrounds will bring your content to life and make it stand out from the crowd. With a wide range of styles and colors to choose from, you'll find the perfect background to match your brand and message. Add a touch of creativity and visual interest to your website or blog. W
CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】
サイトを制作する際にちょっとしたワンポイントとして、ボックスやボタンの背景にパターンを使いたい場面があるかと思います。 そんな時、わざわざフォトショやイラレで画像を作るのは結構面倒ですよね。 そこで今回はCSSをコピペするだけで使える51種類以上の背景パターンをご紹介します。 種類豊富で色々なシーンで使いどころがあるかと思いますので、気に入った背景があればぜひお気に入りに登録しておきましょう！ ギンガムチェック風CSS背景パターン See the Pen texture by Miriam (@karaWhiteDragon) on CodePen. 28種類のグラデーションストライプCSS背景パターン See the Pen Cards with simple stripe backgrounds by Ana Tudor (@thebabydino) on CodePen. ハーフトー
AI Background Remover – Remove Background From Image
Fast native apps with icons, illustrations and photos
(:｣氵 on Twitter: "むかしかみえしに教えてもらったお部屋の書き方が楽でいい 綺麗にやればもっときれいにできますほんとです https://t.co/cV2f51Gp2q"
むかしかみえしに教えてもらったお部屋の書き方が楽でいい 綺麗にやればもっときれいにできますほんとです https://t.co/cV2f51Gp2q
幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator
ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。
CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css
ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます。
この本一冊あれば他はいらない！プロ絵師による背景描画テクニックを徹底解説 -魅せる背景 上達術 決定版
当ブログでも好評だった「キャラ塗り 上達術」の第2弾が早くも登場！ 第2弾は背景描画にフォーカスされており、Clip Studio Paint Proでのテクニック・各ツールの使い方が徹底的に詳しく解説された良書を紹介します。 プロの絵師さんによる背景描画に使用したレイヤーの構成、使用ブラシ、配色のRGB値などの詳細な設定が解説されており、イラストのレベルが確実にアップします。 本書の発売日は来週の12/20、このタイミングで紹介したのには理由があります。 なんと早期購入キャンペーンがあり、事前にAmazonで書籍版を予約購入した人全員に電子版（PDF）がプレゼントされます！ 本を買う時に書籍版と電子版でどちらを買うか迷う方、両方欲しい方には、事前購入が絶対にお得です。
背景のデザインに困った時に！Webデザイン、ソーシャルメディア、イラストなどに利用できる背景素材生成ツール
Webデザイン、ソーシャルメディア、ブログをはじめ、イラストや壁紙など、さまざまなデザインに利用できる背景素材を生成するオンラインツールを紹介します。 昨日リリースされたばかりですが、すでに豊富なデザインが揃っており、今後さらに追加されていくとのことです。コンテンツが映える美しいグラデーション、パーティクルアニメーション、高品質な写真など、さまざまな背景が無料でダウンロードできます。 Cool Backgrounds ツールを作成したのはCSS Gradientの作者様で、そこからさらに発展させ、グラデーションだけでなく、パーティクルアニメーションや写真などを使用した背景画像を生成するツールを完成させました。 2018年5月現在、5種類のテーマからさまざまな背景を生成できます。 カスタマイズにも対応しており、カラーだけでなく、「More Option」をクリックするとサイズや形状なども変更
【無料&商用可】水彩画風ゴールド背景テクスチャ素材8種【大理石(マーブル)風/金色素材】
今回は水彩風のゴールド背景テクスチャ素材をご紹介します。 ゴールドかつ水彩風のエレガンスな質感をもつイメージは中々作りにくいので、テクスチャ素材があると必要になった時にかなり便利。
background-size - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
(K)背景色やグラデーションと背景画像を同時に反映させる場合（CSS覚え書き） | web(K)campus
今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou
CSS の background-size での cover、contain、auto の違い
昨今の PC、スマートフォン、タブレット等デバイスのマルチスクリーン対応 (いわゆるレスポンシブウェブデザイン) は、 CSS について色々としらないと大変です。 知っていればできる、知らないと出来ない (もしくは手間がかかる)、ということが多いです。 ここでは CSS3 における背景 (background) の設定で、特に background-size 属性について少し詳しくみていきましょう。 background-size 属性による違い CSS3 では背景 (background) の設定はいろいろな要素ができます。詳しくは W3C の background の説明ページを見ていただくことにして、 ここでは background-size について動作をみてみましょう。 尚、ここで使用する背景画像は次の画像です。端がわかるように黒い正方形を書いています。 background-s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Super designer | Create beautiful designs with a few clicks
【CSSで簡単に】固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選【コピペで簡単実装】
background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに) - Qiita
Download Triangle Logo Backgrounds for free
Download Free Vector Colorful Polygonal Background for free
テクスチャ素材に困った時に！ダウンロードしておきたい実用度満点のフリーのテクスチャ素材のまとめ
