[B! css] teruringoのブックマーク

グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える

JavaScriptでよく見かける、ホバー状態のアイテム以外にエフェクトをかける、みたいなのをCSSで実装するという内容です。目新しい手法では無いです。サンプルはtext-shadowを使います。 Sample 親要素に:hoverを使って、全体にエフェクトをかけ、子要素の:hoverで元の表示に戻るようにするとホバーしてるアイテム以外にエフェクトがかかったように見えます。 .menu ul li a {/*メニューの基本スタイル*/ color: black; float: left; text-decoration: none; padding: 10px ; letter-spacing: 1px; } .menu:hover li a {/*親要素にホバーで子要素全体にエフェクト*/ text-shadow: 0px 0px 10px #555; color: #ddd;

teruringo 2012/07/12

やってみたい。

リンク

もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法

最近話題になっていたこちらのサイトがとても便利です。 Fontello – http://fontello.com/ 使いたいフォントを選択します。ここでは、「Entypo」フォントから5つ選択します。選択が終わったら、上部のタブから「Edit codes」をクリックします。アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。英語で頭文字を取るとか、abc～とかにするとかですかね。文字列の指定が終わったら、フォントファイルのダウンロードを行います。サイト右上にある「Download webfont(n)」をクリックしましょう。「fontello-xxxxxxxx.zip」がダウンロードされます。解凍して中身を見てみましょう。 fontello －cssフォルダ－icons.css －icons-codes.css －icons-ie7.css －

teruringo 2012/07/11

リンク

HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life

みなさんは、HTMLやCSSのコーディングには何を使っていますか？デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。コードを修正→ファイルの保存→ブラウザで更新→確認この手順を繰り返すのですが、これがなかなか面倒です。できれば、コードを修正したタイミングですぐに確認できるとベストですよね。そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。「Liveweave」は、ブラウザ上で動作するHTMLエディタです。コーディングエリアとレン

teruringo 2012/07/10

ちとめも

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

teruringo 2012/07/10

リンク

CSSの勉強中に困ったら

CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。仕様を確認するとりあえずW3Cを見に行った方が早い。そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3