[B! css][design] ducky19999のブックマーク

美しいグラデーションを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

ducky19999 2015/03/02

css
design

リンク

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、その中で重要なものだけ教えてほしかったので、自分で作っちゃえ！って思って作りました。そのときに使った便利ツールたちをまとめておいたら便利そうだったので、今回使ったもの＋αを全てまとめてみました。紹介するツールたちを駆使すれば、非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots

ducky19999 2014/09/19

css
design

リンク

http://e0166nt.com/blog-entry-862.html

ducky19999 2011/05/22

css
design

リンク

Pure CSS menus

Navigation Skip navigation. Site search Site navigation How To Create home Tutorial links CSS tutorial This uses just CSS 2 to turn nested lists into a working menu and does not use any JavaScript (except in IE 5.5-6 on windows where I use the proprietary DHTML behaviours, because its CSS handling is not good enough to work this menu without script) This works in Mozilla 1+, Netscape 7+, Opera 7+,

ducky19999 2011/01/30

リンク

glayer.js - グレーアウト表示ライブラリ

Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray＋layerで、glayer.js) Lightbox JS livedoor Reader - RSSリーダー下記のような機能を持っています。背景全体を覆うレイヤの表示/非表示が簡単に出来ます。(レイヤを透過表示することにより、グレーアウトを実現) レイヤ自体は、透過PNGを使う方法と、opacityを使う方法の二種類をglayer.cssにスタイルとして定義しています。フェードイン、フェードアウトしながらのレイヤ表示/非表示も行えます。(この場合は、opacityによるレイヤを透過表示) なお、Ver 2.0 にて、prototype.js、script.aculo.usを使用せずに、glayer.jsのみでフェードイン、フェードアウ

ducky19999 2010/09/15

リンク

スタイルシート［CSS］/テーブル - TAG index

表全体の指定 width: ***; height: ***; 表の大きさを指定する border: ***; 表の境界線を指定する border-collapse: ***; 境界線の表示方法を指定する border-spacing: ***; 境界線の間隔を指定する table-layout: ***; 表のレイアウト方法を指定する empty-cells: ***; 空セルの境界線の表示・非表示を指定する caption-side: ***; 表タイトルの位置を指定する text-align: ***; 表タイトルの位置（水平方向）を指定する visibility: collapse; 表の行または列を詰めるセルの指定 text-align: ***; vertical-align: ***; セル内の文字の位置を指定する width: ***; height: ***; セルの大