CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。
[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
5分でわかるCSSグラフィック
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
css3のボタンを作成出来るCSS3 Button Makerが貴方の手元に・実装ファイルが無料で配布されています
CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ PHPSPOTさんの記事やはてブに上がっていたので存在は知っていましたが、無料で配布されてるとは思いませんでした。DLすればブラウザだけでCSS3のボタンを作成出来ますよ。 JavaScriptとHTMLだけで作ってたんですね・・・まるっと配布されていますのでいつでも誰でも使用できますね。
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
2012年2月第4週号 1位は、Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライド、気になるネタは、世界初のコネクタをどちら向きでも挿せるUSB Hub | gihyo.jp
週刊Webテク通信 2012年2月第4週号1位は、Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライド、気になるネタは、世界初のコネクタをどちら向きでも挿せるUSB Hub ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2012年2月20日～2012年2月26日の間に見つけた記事のベスト5です。 1. Twitter bootstrap入門 #twtr_hackhttp://www.slideshare.net/makingx/twitter-bootstrap Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライドです。 bootstrapはグリッド、ボタン、タブ、ナビゲーションバーなどがあらかじめデザインされたフレームワークで、
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
他アイテムをボカして強調表示するCSS3＆jQueryサンプル:phpspot開発日誌
Item Blur Effect with CSS3 and jQuery 他アイテムをボカして強調表示するCSS3＆jQueryサンプル 次のようにアイテムを浮き上がらせることでアイテムを強調させる例です。アイテムが多いと分かりづらい場合がありますが、強調表示してあげることで分かりやすくできます。 色々な場面で活用することができそうですね どんどん表現力が上がっていくのはいいことですね。 関連エントリ カッコよくデザインされたピュアCSS3なアコーディオン実装デモ リボンが可愛いCSS3によるドロップダウンメニュー実装チュート フルスクリーン背景がスライドショーになるCSS3サンプル CSS3のブラウザ別対応がアイコンで超分かりやすいサイト
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。 CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。 ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。 以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。 Sample ※responsivepxで簡単に確認出来ます。 jsfiddle iPhoneのキャプチャ ナビゲーションのサイズはモバイルの際は大きくしないとですね。 まず、スライドの作成
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
http://blog.e-riverstyle.com/2009/06/javascriptcsslightbox-css.html
