subeniyaのブックマーク - はてなブックマーク

【CSS】box-shadowで影をつける方法とサンプル集
今回はCSSのbox-shadowを使って影（ドロップシャドウ）をつける方法と、コピペで使えるおしゃれな影のサンプルを10個紹介します。ぜひ参考にしてみてください。 CSSのbox-shadowの使い方それでは、まずbox-shadowプロパティの使い方を紹介します。何かの要素に影をつけたいときには、例えば以下のように書きます。 ◯◯ { box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色内側指定; } 例 .box {box-shadow: 2px 2px 4px -2px gray inset}
subeniya 2020/03/18
css

*web制作

box

サンプル

デザイン

box-shadow

webデザイン

ドロップシャドウ

#Web制作

***Web制作
リンク
配色パターン見本40選：ベストな色の組み合わせ確認ツール
配色の使用例を確認しよう気になる配色があれば、見本をクリック/タップしてみましょう。その配色の使用イメージを確認することができます。気に入った色の組み合わせはコピペして使って頂いて構いません。万人受けする配色まずはシーン問わず使いやすい色の組み合わせを紹介します。青や橙色などは老若男女問わず受け入れやすい色ですね。
subeniya 2019/06/26
配色

色

ツール

パターン

デザイン

color

あとで読む

design

web

webサービス
リンク
便利なWordPressの条件分岐16パターン：カスタマイズで活躍するものを厳選！
subeniya 2018/12/13
webdesign

あとで読む

wordpress

パターン

便利

使ってみる

カスタマイズ

まとめ

php

永久保存
リンク
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transf orm: translateY(4px); transf orm: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
subeniya 2017/07/04
Webデザイン

transform

border

デザイン

Active

CSS3

CSS

UI

ボタン

あとで読む
リンク
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
subeniya 2017/05/16
CSS

コピペ

design

CSS3

tips

tools

Webデザイン

見出し

デザイン

まとめ
リンク
1