[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニックボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシャドウは、ボタンのノーマル時・ホバー時・アクティブ時のそれぞれで異なります。
![[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/86d2bb41707585bf01592235c9d747aa9374b088/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018032701.jpg)
[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート
カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシート カードにシャドウを与える ボタンにシャドウを与える デモ 繊細なシャドウを与えるスタイルシート シャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。 カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。 .shadow { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 1
![[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccac0355724bfe7dc9918bf680d2dec1a8da97b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017102401.png)
はてなブログのソーシャルボタンを変更してみた（他、おすすめ記事、サイドバースライド） - orangestarの雑記
なんか、はてなのデフォルトのソーシャルボタンのデザインが、なんか、ちょっとダサいんじゃないの…？という気がしてきて、デザインを変更してみた。 一番最初の頃は、ブックマークボタン、フェイスブックボタンなどの、ボタンの高さとかそろってたんだけれども、ツイッターがＲＴ数を表示しなくなったりしたせいで不揃いになって、なんかこう、子どもが散らかしたあとの積み木みたいになってるな～ってずっと思ってたんだ…。 月に数回更新するくらいだったら気にならなかったんだけど、ここ最近みたいに頻繁に更新するようになると、なんか田舎から都会に出てきたオタクが１か月くらいたって「あれ？オレ、もしかして今の恰好ヤバイ？」って思うような感じで、これは少し恥ずかしいのでは？みたいな感じに思ったので、ちょっとデザインを変更することにしました。あと、それに合わせて、あちこちちょっとずつ弄った。 もともとデザインのセンスがないので
iPhoneで英数字をスムーズに入力する方法
初心者向けにiPhoneのTipsを紹介する連載「iPhone Tips」。今回のテーマは「英数字を簡単に入力する方法」です。 パスワードやメールアドレスなどを入力するときに、英字と数字が混在した文字を打つ場合があります。「英字」「数字」「記号」と、毎回キーボードを切り替えるのは面倒なものです。 そこで今回は、こうした文字の入力が楽になる方法をご紹介します。文字入力の切り替えをしなくていいので、入力もスムーズになるはずです。 例えば、上の画像のように英字を入力していて、その後に数字を打ちたいとします。従来なら画面左下にある「123」のボタンをタップしてキーボードを切り替えるところですが、「123」ボタンをそのまま長押ししてみましょう。 すると、数字のキーボードに切り替わります。そのまま長押しした指を入力したい数字までスライドさせましょう！ キーボードを毎回切り替えるより、入力が楽になると思
iPhoneのホームボタンが故障したときの対処法
初心者向けにiPhoneのTipsを紹介する連載「iPhone Tips」。今回のテーマは「ホームボタン」です。 iPhoneユーザーが一番酷使する物理キーの1つが、ホームボタンです。使っていると劣化するのは仕方ないとはいえ、ホームボタンが壊れてしまうと、満足にiPhoneを使えません。故障したと思ったら、早めに修理に出しましょう。 まずは本体を再起動 ホームボタンが反応しないのは恐らくハードウェアの故障が原因だと考えられます。しかし、アプリの不具合の可能性もあるので、まずは本体を再起動してみましょう。 そして、再起動のついでに、iPhoneケースや保護フィルムがホームボタンを覆っていないか確認を。劣化した保護フィルムがホームボタンの動きを妨げていた、なんてことがあるかもしれません。 解決しない場合は修理に 再起動してもホームボタンが動かない場合は、iPhone本体が故障している可能性があ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
