CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
保存アイコン＝フロッピーディスクの時代は終わった…？ | Goodpatch Blog
まずはアイコン素材配布サイトから。 今は無料で使えるアイコン素材配布サイトが多いので、ここからダウンロードしてデザインする時に使う人も多いのではないでしょうか。まずはそのアイコン素材配布サイトで”save”と検索した結果を見てきます。 iconmonstr http://iconmonstr.com/ 以前にもMEMOPATCHで紹介した事のあるサイトです。ここはフロッピーディスクもありますがクラウドっぽいアイコンや下向き矢印のアイコンもありますね。 softicons http://www.softicons.com/ こちらはほとんどフロッピーディスクのアイコンです。しかも立体的なアイコンが多いです。 iconfinder http://www.iconfinder.com/ こちらもフロッピーディスクのアイコンが多いですが、下矢印やチェックマークもあります。 次に有名なサービスやアプ
クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学
前回との比較 前回の調査から2年半が経過している訳ですが、今回調べた中でリンクのデフォルト色を使っているサイトはありませんでした。リンクの色はデフォルト色より、やや弱い青色にするというのが浸透してきたように感じます。 NAVERとlivedoorのリンク色が同じになっていたのは経営統合の影響でしょうか。 また、「はてブ」や「にこにこ動画」のように青系でない色を使っているサイトもありました。はてブはリニューアルによって大きく変わったのですが、リンクの色を黒色ベースにしていたんですね。調べるまで気づきませんでした。 最適なリンクの色は？ 「リンクは青色」という認識は多くのユーザーに浸透しているので、一般的には青色をベースにするのが無難と言えます。具体的にはデフォルト色だと少し青が強すぎるので、やや”青”を弱くした色がいいでしょう。 但し、サイトのジャンルによっては青色を避けるというのも一つの選
ウェブサイトに円記号を書くときは、どうかこれでお願いします
わかってる人にはもう「何を今さら」という話かもしれませんけど、悲しい思いをすることが多いのでここであらためてお願いします。 ウェブサイトに金額を書くとき、円記号 (¥) を使う際には HTML に ¥ ではなくて ¥ と書いていただきたいのですお願いします。 日本語環境の Windows 端末から入力した円記号は、日本語環境の Windows で見ると円記号になってますけど、その他の多くの環境であれはバックスラッシュになります。 日本語版の Windows でこう表示されていても その他の環境ではこうなります。 HTML 内に \ ではなく ¥ と書けば基本的にはどの環境でも ¥ が表示されるはずなので、円で金額を書く時にはぜひ ¥ にしていただきたいのですお願いします。 こいうことが起きている事情はこのあたりで。 日本語用文字コードにおける円記号 – Wikipe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本のWEBデザイン糞すぎワロタｗｗｗｗなんで2003年ぽいんだよwww：キニ速
