タグ

cssに関するsima-boxのブックマーク (314)

  • 画像が消えたり、繰り返さなかったり系が解決しそうなこと

    たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。 取りあえず↓こんな状態よくあるかと。 上記で指定してるスタイルは下記。 #main .entryBody #sample070219_01 { width:200px; margin-bottom:1em; padding:5px; background:#FFF; border:1px solid #999; } #main .entryBody #sample070219_01 img { margin-right:10px; float:left; } コレはIEだとちゃんと表示されますが、floatの解釈が正しいブラウザでは意図した状態とは違うはずです。(理解している

    画像が消えたり、繰り返さなかったり系が解決しそうなこと
    sima-box
    sima-box 2010/08/21
  • IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌

    CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな

    sima-box
    sima-box 2010/07/15
    IE6-8でもCSS3が使えるようになるらしい
  • JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ:phpspot開発日誌

    Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が3Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルUI実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルUI実装用jQueryプラグイン「Agile Carousel」

    sima-box
    sima-box 2010/04/22
    3Dカルーセルっていうらしい? iTune見たいな感じ? スライドショー
  • インラインでその場でLightboxできる「jQuery.popeye」:phpspot開発日誌

    jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」

    sima-box
    sima-box 2010/04/19
    Lightbox そのレイアウトした場所その場所でライトボックスな表現、拡大できたり写真を送れたり◎
  • カーソルを合わせると画像がキャプション付でアニメーション表示されるギャラリースクリプト:phpspot開発日誌

    Zoom-Info ? How To Create An Informative Image Gallery With jQuery & CSS | AddyOsmani.com | Where Web Businesses Grow カーソルを合わせると画像がキャプション付でアニメーション表示されるギャラリースクリプト。 ギャラリーの殆どはクリックすると拡大するものですが、カーソルを合わせると、キャプションとともに画像が縮小されるギャラリーの登場。 触ってみるとなかなかクールで、何かに使えそうだなと思いました。 デモページはこちら アニメーション効果がなかなかイカしてます。 jQueryとCSSベースで構築されているみたいです。 関連エントリ 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」 3Dでクールに回転するFlashを使った画像ギャラリ

    sima-box
    sima-box 2010/04/12
    見せ方が独特で面白い スライドショー? ツールチップ とかそんな感じ?
  • 水平型リストで画像を並べた時の隙間を消す4つの方法|web bibo

    - CSS(スタイルシート)に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ: HOME » リスト・メニュー » 水平型リストで画像を並べた時の隙間を消す4つの方法 画像をリストタグで水平に並べた場合、画像と画像の間に隙間が生じます。この隙間を消す方法を紹介します。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="images/tips/h_list_space_03.png" alt="JavaScript" />

    sima-box
    sima-box 2010/04/09
    リスト メニュー 横並びのスペース回避方法 対策
  • タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル:phpspot開発日誌

    Slot Machine Tabs | CSS-Tricks タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル。 普通はタブをクリックするとパッと画面が切り替わりますが、このサンプルは面白くて内容がアニメーションしながらスロットマシン風にカッコよく切り替わります。 スタイリッシュ度を上げたい方は覚えておくとよいかも。 タブだけじゃなくて、画面切り替えの際にこういうアニメーションしたらそれはそれでカッコ良さそうですね。 関連エントリ わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 タブ、ツールチップなどクールなUIコンポーネント実装jQueryプラグイン「jQuery TOOLS」

    sima-box
    sima-box 2010/04/08
    タブを切り替えるとスライドしながら切り替わる アニメーションがいい感じ
  • 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」:phpspot開発日誌

    Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると1からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

    sima-box
    sima-box 2010/04/08
    スライドショー タイル状に切り替わっていい感じ
  • グリッドアコーディオンで新しい情報表示の仕方:phpspot開発日誌

    Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから1列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

    sima-box
    sima-box 2010/03/26
    アコーディオンメニューがアニメーション 動きがある
  • PHPで作るメッセージが流れるTwitterウィジェット:phpspot開発日誌

    Build a PHP Twitter Widget | Brenelz Web Design Solutions PHPで次のようなメッセージが流れるTwitterウィジェットを作るチュートリアルとサンプルプログラムのダウンロードが出来るエントリが公開されてます。 文字が以下のようなUI内を次々と流れます。 左、右ボタンでメッセージを送る機能なんかも地味についてます。 CSS変更でレイアウトの変更も可能のようです。 また、キャッシュ機能も効いているみたいです。 関連エントリ PHPからTwitterに投稿するサンプルコード&サンプルアプリ PHPCSSを活用して綺麗にTwitterメッセージを埋め込むサンプル シンプルなTwitter検索を行うためのPHPスクリプト

    sima-box
    sima-box 2010/03/26
    ツイッター Twitter お知らせ機能みたいの
  • jQueryでテキストリンクのマウスオーバー時に動きをつける

    2014年8月20日 jQuery どのサイトにも必ずあるテキストリンク。それをもう少しおしゃれに表示できないかな?ということでjQueryでアニメーションをつける方法を紹介します。下のアンダーラインからペロッとでてくるので、うるさすぎず、アクセントになると思います! ↑私が10年以上利用している会計ソフト! IE6+, Firefox 3+, Safari4で動作確認済です。 サンプル See the Pen Text link – animation hover effect by Mana (@manabox) on CodePen. 必要ファイルをダウンロードする 必要なJavaScriptファイルを下記よりダウンロードします。 jquery.js jquery.color.js jquery.backgroundPosition.js 背景画像を作る マウスオーバー時に表示したい

    jQueryでテキストリンクのマウスオーバー時に動きをつける
    sima-box
    sima-box 2010/03/24
    テキストリンクに動きをつける アニメーション link
  • 秀逸なテーブルデザインのパターン集:phpspot開発日誌

    Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル

    sima-box
    sima-box 2010/03/03
    テーブル色々 サンプル パターン 参考に
  • CSSで3D空間を表現するテクニック:phpspot開発日誌

    CSSで3D空間を表現するテクニックが紹介されています。 絵画の上にマウスカーソルをあわせて移動すると驚きの効果が得られます。 微妙に変わってます。具体的には実物を見たほうがわかりやすいですね。 以下のエントリを参照してください。 Romn Corts CSS 3D Meninas

    sima-box
    sima-box 2009/12/18
    多重スクロール? 奥行きのある表現?
  • JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌

    JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか?と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

    sima-box
    sima-box 2009/12/09
    プルダウンメニュー ドロップダウンメニュー
  • ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル&サンプル:phpspot開発日誌

    ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル&サンプル 2009年12月08日- ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル&サンプルが公開されていてソースコードのダウンロードも可能です。 次のようなUIがサイドバーに現れてカーソルを合わせるとニュイっとアニメーションで現れます。ナビゲーションの表示を最小限に抑えたい場合などに使えそうですね。 デザインはCSSで行われているため、もっと自分のサイトにあった形にカスタマイズすることも出来そうです。 以下のエントリを参照してください。 Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集

    sima-box
    sima-box 2009/12/09
    横に引っ込むタブ メニュー ナビゲーション
  • スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例:phpspot開発日誌

    スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例が公開されており、チュートリアルと共にダウンロード可能になっています。 サンプルを見ると、殆どの面倒なことがjQuery側にてやってくれるため、非常に簡単なプログラムになっています。 付いてくるのがリアルタイムにしすぎるとガクガクして酔いますが、ちょっとした遅延があったあと、アニメーションして付いてくるので、動きとしてもよいですね。 jQueryの学習用に、また実際にサイトにサクッと組み込んでみる際にもよさそうですね。 以下のエントリを参照してください。 Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

    sima-box
    sima-box 2009/12/04
    スクロールするサイドバー
  • スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」|skuare.net

    twitter facebook hatena google pocket 背景画像をスライドショー風に見せるとサイトが印象的に見えます。 jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。 これを利用して背景画像をスライドショーにします。 sponsors 使用方法 jQuery maxImage plugin: Demoからjquery.maximage.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.maximage.js"></script> <script type="text/j

    sima-box
    sima-box 2009/10/29
    背景 フルスクリーン 画像 伸縮
  • http://informationmechanics.blog35.fc2.com/blog-entry-20.html

    sima-box
    sima-box 2009/10/29
    背景 画像 フルスクリーン 伸縮 maximage設置方法
  • IE 6で泣かないための、9つのCSSハック(2/3)- @IT

    「min-height」をIE 6で実装する場合も「インポータントハック」を使用します。 まず、先にモダンブラウザへの記述を書き、その下に「min-height」と同じ値を「height」に記述します。IE 6はボックスが中身に応じて拡張するため、100px以下のときは100px。それ以上のときは、その中身のサイズになります。よって、「min-height」と同じ挙動になるということです。 ■ 構文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conte

    sima-box
    sima-box 2009/10/26
    css リストの下にスペースができる
  • HTML5ホームページテンプレート無料配布 [Cool Web Window]

    404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

    sima-box
    sima-box 2009/10/26
    cssリストメニュー リストの下にスペース 空白ができたときの対処法