もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
ProCSSor - Advanced CSS Prettifier
First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all
【CSS】この影はCSSの影でいいんじゃないか？ at softelメモ
問題 こんなデザインが来ちゃったんだけど、この影、やっぱり背景画像で対応する？ 回答例 この際CSSの影で対応してもいいかもしれない。 無駄なDIVはあまり好きではないけど、ちょっと無駄にDIVを入れさせてもらって、 <body> <div id="xxx"> この中がコンテンツ </div> </body> body {background:url(一番後ろに入る背景画像);} #xxx { width:800px; margin:0 auto; box-shadow: 0px 0px 5px #888888; -moz-box-shadow: 0px 0px 5px #888888; -webkit-box-shadow: 0px 0px 5px #888888; -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#88
Wordpressの記事に自動でPDFのアイコンを表示させる | Webコンサルティング
WordPressは、管理画面からpdfをアップロードすると記事内にテキストリンクが現れ、ダウンロードできるようになりますが、テキストリンクだけなので下記のようにとてもさびしい感じになります。 Webコンサルティングの手引き 今回はテキストだけでなく左側にPDFのアイコンを入れたいというクライアントのご要望がありました。昔はプラグインで実現できましたが今はWordpressのバージョンアップで使えなくなりましたので、CSSにて実現をしてみました。 下記のような感じになります Webコンサルティングの手引き 導入手順 ①CSSに以下のソースコードを追加します。 a[href $='.pdf'] { font-size: 14px; background:url(images/pdf.png) no-repeat; margin-top: 30px; padding-left: 60p
Bootstrapライクに使えるWebデザインテンプレート·Zurb Foundation MOONGIFT
Zurb FoundationはWebデザインテンプレートです。記法に則ってデザインすることで様々なデバイスに対応したWebサイトが作成できます。 一定の記法に則って書くだけで様々なデバイスに対応したWebデザインを行ってくれるのがZurb Foundationです。Zurb Foundationを使って格好いいWebサイトを量産しましょう！ ボタンです。ただ普通に書くだけでこんなデザインに。 フォームです。エラー時も含めて格好いいです。 ブロックです。細かく制御できます。 メッセージ系もちゃんとカバーされています。 タブ表示も可能です。 上にラインを引いたNice Tabも。 もちろんページネーションもあります。 スライドで画像を差し替えるコンポーネントも用意されています。 上からスライドで下りてくるダイアログ。ログインやメッセージに使えます。 Rails3.1向けにRubygemsも用
これはすごい！CSS FrameworkのRMSforms | Web活メモ帳
画像は公式サイトデモより 最近はフォームを作成する場合、テーブルを使用しないCSSオンリーで作成する事の方が多いのですが、 入力項目によっては横に２つ並べたりする場合（郵便番号、姓名など）テーブルの方が便利な場合があります。 しかしCakePHPなどを使用していると、どうしてもViewファイルがhtmlとphpコードが入り混じり 可視性が低くなってしまいます。 そこで、全部cssで制御できればViewファイルの整理がかなりできるのではないのでしょうか。 それを解決してくれるのがRMSformsです。 こんなCSSを待っていました。 詳しくは以下 バージョンが0.5で動作確認しました。 デモページを見るとHTML側はシンプルな記述で動作しています。 以下のブラウザで動作するようですので、開発者の方はぜひ観てみてください。 IE6 – 7, Firefox 3 & Google Chrome.
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hatena ID
CSSプロパティで良く使う透明、角丸、影 - よつば手帖
Components · Twitter Bootstrap
HugeDomains.com
IEにも対応！10分でできるWebフォント実装法 (1/3)