美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
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
いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史
古き良き手法から、最新の手法まで。必要なときのために引き出しにしまっておきたい、画像置換の手法まとめ。 CSSの画像置換（Image Replacement）は長い歴史の中で移り変わってきました。もし、いまでもCSSで画像置換をするのなら、現在でも使える多くの有効な手法があります。一方で近い将来、CSSの画像置換を使うとグーグルが実際にペナルティーを課すようになるかもしれない、ということは知っておくべきことでしょう。いまのところは大丈夫だとしても、あまりおすすめはできません。 とは言っても、CMSまたはプロジェクトとの関係で画像置換を使わざるを得ない場合もあります。そこで、この記事ではまだ有効な、長い歴史のあるCSSの画像置換の方法を紹介します。画像置換が完全に使えなくなる前まで、これから紹介する手法さえ知っていれば十分でしょう。 ネガティブtext-indentを使うPhark手法 Ph
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のtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーいベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s l
jQuery Background Position
A jQuery plugin that allows the position of a background image to be animated. The current version is 1.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Download now Basics Positions Options In the Wild Quick Ref You can animate the position of a background image as either 'backgroundPosition' or 'background-position', providing both the horizontal
jqueryのanimateでbackground-positionを動かそう | 日記の間 | あかつきのお宿
※この記事の内容で動かすことが赦されるのは、小学生までだよね～……じゃなくって、ここに書いてあることは、jqueryのバージョンが1.7以下の場合に有効なようです。バージョン1.8以降を使ってる人は、こっちの記事（jquery1.8にしたらanimateでbackground-positionを動かせなくなったって人は挙手をどうぞ）をよろしくよろしこ。 （11月8日追記） jqueryのおかげで様々なアニメーションを簡単に実装できるようになった。 一昔前はflashを埋め込まないと実現できなかったような動きもjqueryのおかげで、flashを知らない、phpとjavascriptくらいしか知らない僕みたいなプログラマでも実現できるようになった。 また、jqueryの普及に伴いプラグインの数も大量に増えたため、かなり複雑な動きでもほんの1、2行コードを書くだけでできるようになった。 便利な
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
![[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c06e5dc16e1d75594b70da83a3dfbacbdc01b4e/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_fireworks.png)
Using jQuery for Background Image Animations
After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm n
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration