HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
[CSS]コピペで使える見栄えの良いテーブル（表）デザイン集 | つーる亭
スポンサードリンク コピペで使える見栄えの良いテーブル（表）のCSSサンプルをご紹介します。どれもかっこいいものばかりです。 CSS3で角丸テーブルの作り方 角が丸くなっているのでやさしい感じのテーブルになっています。 CSSだけで作るtableデザインテクニック カチッとしたテーブルデザイン。会社概要を記入するときとかに使えそう CSSだけで作るtableデザインテクニックVer.02(おまけ付き) こちらもシンプルながらかっこいい。幅広く使えそうですね。 CSS3を使って美しく装飾されたテーブルの作り方 行ごとに色分けされています。 テーブルデザインのCSSサンプルを公開しているページの中から かっこいいデザインのものだけを厳選してのご紹介でした。よろしければご参考ください。 関連記事 [CSS]コピペで使える見栄えの良いテーブル（表）デザイン集 ニュースサイトなどのマガジンタイプのウ
[CSS3]画像を使わずにインナーシャドウで印象を変える方法 | 日刊ウェブログ式
.box1{ width:400px; margin:40px auto; padding:15px; border:1px solid #ccc; background-image: -ms-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* IE10 */ background-image: -moz-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* Mozilla Firefox */ background-image: -o-linear-gradient(bottom, #fff 0%, #fff 50%, #eee 100%);/* Opera */ background-image: -webkit-gradient(linear, left bott
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
