Cool Backgrounds
After laboring over your latest piece of writing, one of the hardest steps before hitting publish is finding an exciting background image to really showcase and draw attention to your post. Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as 🖥 desktop wallpapers or cropped fo
I like how percentage background-position works | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I learned something the other day when we were fleshing out the background properties in the Almanac. It’s such an intuitive thing, that I guess I just never stopped to think about it before. By default, background-position is 0 0, the top left corner. Now imagine you set it
Photoshopでシームレスなパターンテクスチャ素材を作る方法【芝生、木目、レンガなど】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの姐さんです。 今回はPhotoshopの機能を使って、シームレスパターンを作成する方法をご紹介します。 ※この記事は2022年3月に編集部が情報を更新しました 芝生 1. 正方形の新規ファイルを作る 今回は300px×300pxの正方形にしました。 2. 写真を配置する カンバスいっぱいになるように写真を配置します。 3. カンバスサイズで写真を切り抜く 全てを選択（ctrl+A）→選択範囲をカット（Ctrl+X）→編集→特殊ペースト→同じ位置にペースト（Ctrl+Shift＋V）で芝生の写真をカンバスサイズで切り抜きます。 この手順をやっておかないと次の手順の「スクロール」がうまくいかないので、必ずやっておいてください。 4. 「スクロール」フィルタで写真を移動する 次に、先ほど切り抜いたレイヤーを選択した状態で、「フィルタ」→「その他」→「スクロール」を選択しま
CoverVid
Why is it special? For starters, it makes your HTML5 video behave like a background cover image, but other plugins also do that. CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background). How do I use it? First pull the project
PatternBolt
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file. The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations. As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display. T
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
正式リリース版の Chrome 35 で background-blend-mode がデフォルト有効に
リリースサイクルが早いので、各ブラウザさんのアップデート状況を追っかけるのも大変な今日この頃ですが･･････ 今月の 20日にリリースされた Google Chrome 35 から、background-blend-mode プロパティがデフォルトで有効になったようですね。Adobe の Web Platform Team Blog で触れられています。 background-blend-mode now available on Chrome ： Web Platform Team Blog The latest release of Chrome (version 35) on desktop and mobile now comes with support for the background-blend-mode property. This new property will
背景画像をtransitionさせ続ける
JavaScriptで背景画像を動かすだけで怒られる。CSSでやればJavaScriptを無効にされても動かせるので、もっと怒られるのかもしれない。いちいちCSSアニメーションを書くのは面倒なので、transitionプロパティーを使ってインスタントに動かせるような工夫を考えた。 Demo: Animated Background ループできないtransitonプロパティーで擬似的に永続アニメーションを提供するには、transition-durationプロパティーで大きな値を指定すれば良い。またアニメーションの開始に必要になるトリガーは主に擬似クラスを利用することになるが、body要素に:hover擬似クラスを直接使うとアニメーションをうまく起こせない問題があり、:target擬似クラスではIDの指定とURLが限定される問題がある。ルートのhtml要素に:hoverを指定することで、こ
background-blend-mode プロパティで背景をブレンドしてみよう
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
20+ Web Designs with Subtle Grain Texture Backgrounds
While minimal flat style designs are the current hot trend, some designers are eliminating solid blocks of color from their designs with the use of subtle textures. The use of grainy textures really helps give a design a tactile appearance and fits perfectly with designs using an old school or retro style. This post showcases some great websites which are perfect examples of grain texture use. The
Large Background Images in Web Design: Tips and Examples
In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic CSS3/CSS2 techniques, or by using some open source third-party jQuery plugins. There are no right or wrong answers, just varying levels of support in older legacy browsers. Dig through this collection of riveting development techniques and see what you
Rainy Cafe
“A moderate level of noise enhances creativity compared to both low and high levels of noise. Moderate background noise induces distraction which encourages individuals to think at a higher, abstract level, and consequently exhibit higher creativity.” Source: Exploring the Effects of Ambient Noise on Creative Cognition
迫力満点。Webサイトの背景全部を動画に·BigVideo.js MOONGIFT
BigVideo.jsはWebサイトの背景に動画を利用し、そのまま再生できるソフトウェアです。 Webサイトの背景は単色、もしくは適度なパターン画像を使うのが一般的です。しかしそんな考えに捉われないソフトウェアがBigVideo.jsです。何と動画をバックグラウンドに指定し、そのまま再生してしまう驚きのソフトウェアです。 デモです。背景は画像ではなく動画です。バックグラウンドで再生されています。 切り替えました。すごく幻想的で格好いいです。 BigVideo.jsの力だけではないですが、前面のコンテンツは背景が透けていてマッチしています。映画のトレーラーに合わせて説明を加えても良さそうですし、ドキュメンタリー系のWebサイトで使っても良いかもしれません。動画はJavaScriptで切り替え可能ですが、最後まで行くとそこで止まるようになっています（ループ指定もできるようです）。 BigVid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vide
Easy Fullscreen HTML5 Background Video
ドレログ
Wallpaper / Projects / Ben Plum
SHARDS - A jQuery plugin
SVG Patterns Gallery
Scott Robbin
