[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる
暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認まず完成形を見てみ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
NHK 2009都議選 開票速報ページがHTML的にも見た目的にもかなりキレイな件 | aquapple
NHK 2009都議選のサイトが見た目が美しく、操作性も良いのに、Flashを一切使わずJavaScriptで制御されていることがTwitterで話題になっていました。 速報時は自動更新で獲得議席数がリアルタイムに反映されていましたが、現在は速報も終わり開票結果になっています。 動作確認も主要なモダンブラウザ[1]で動作確認が行われています。 ソースは8つのJavaScriptとdivタグに直接スタイルシートが書き込まれているだけで非常にシンプル。75行のHTMLソースの中にFlash要素はゼロとなっています。 各ブロックをクリックすると、フローティングウィンドウが出てきます。これはドラッグしたり、サイト下部に固定表示しておくことが可能となっているほか、ウィンドウの並び替えもタイトルバーをドラッグするだけで行えます。 このページの公開は15日の午後6時までとなっています。無駄に凝っているだ
10 Useful CSS/JS-Coding Solutions For Web-Developers — Smashing Magazine
Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from t
クリエイティブなフォームをCSSで実現する為のTips「20+ Resources and Tutorials for Creative Forms using CSS」
クリエイティブなフォームをCSSで実現する為のTips「20+ Resources and Tutorials for Creative Forms using CSS」 お問い合わせやアンケートなどユーザーとの窓口に様々なWEBサイト、WEBサービスで利用されているフォーム。今日紹介する「20+ Resources and Tutorials for Creative Forms using CSS」はクリエイティブなフォームをCSSで実現する為のTipsをまとめたエントリーです。 20+ Resources and Tutorials for Creative Forms using CSS 今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Adding Style with CSS シンプルながら、チョットした所を気にしたフォームデザイン
ソースが公開されているcss小技11エントリーまとめ
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
jQueryの可能性を知りたいなら・・・『jQuerySTYLE』 | 100SHIKI
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
CSSで実現する様々テクニック集「35+ very Useful And Powerful CSS techniques」
WEBをデザインしていく上で欠かせないCSS。厄介な部分もありますが、アイデアとテクニックしだいで様々な表現を可能にしてくれます。今日紹介するのはそんなCSSのテクニックをあつめた「35+ very Useful And Powerful CSS techniques」です。 10. CSS Curves 様々なTipsが公開されていますが、今日はその中からいくつか気になったテクニックをピックアップして紹介したいと思います。 詳しくは以下 ■6. Magazine StyleDROP CAPS テキストベースで雑誌のように頭文字だけ大きく表示するテクニック ■8. Link List Block Hover リンクを領域でHober指定するテクニック ■23 . CSS3 Multi-Column Module 2段組みを可能にしてくれるCSSモジュール 上記の他にも様々なCSSのテクニッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout
IDEA * IDEA
IDEA * IDEA
jQueryでリアルタイムにCSSを書き換えるサンプル:phpspot開発日誌
[CSS]CSS 3の属性と値が一覧できるクィックリファレンス
CSSのLineHeightをマスターできるスライド:phpspot開発日誌
IDEA * IDEA
クオリティーの高いフリーのXHTML/CSSテンプレート50 – creamu
IDEA * IDEA
[JS]超軽量で、シンプルなツールチップを実装するスクリプト -vTip
[CSS]実用的なレイアウトが揃っているフリーのテンプレート集 -Best Free Templates