ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６:phpspot開発日誌
56 Pure CSS Effects Javascript Alternatives Including Demos | Designs Mag (Designs Magazine) ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６。 全部CSSでやっちゃうのはむしろ手間になったりしそうですが、CSSでもできるという引き出しをもっておくと思いの外簡単にできることもおおそうです。 というわけで、ひと通り見ておいてもよいかと思います。 どちらがらくちんで、マークアップの論理構造的に正しいか等を合理的に考えて、選べるようにしておくとよさそうですね。 関連エントリ ピュアCSSでスライドアウトインタフェースの実現 ピュアCSSなドロップダウンメニュー実装例 ピュアCSSでonclickイベントをシュミレーションするデモ
table系にはposition:relativeが効かない | Takazudo Clipping*
こんなかんじでtable内でtdが2つあり、中にはメイン文章のpと、日付のpがあるんだけど、日付をセルの右下にposition:absoluteでつけよう。そうすればセルの内容増えてもいつも右下によってくれる。だからtdにはposition:relative指定すれば右下に寄ってくれるよね！（下は、こんな風にしたいイメージ） ･･･と思ってると失敗する。 <table> <tr> <td> <p class="whatIdid">I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I played game whole day today.I p
日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式
Photoshopのチュートリアルというと英語が多いですが、日本語の方がサクサク読める（私の場合）ので、日本語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基本的な光の作り方2 基本的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ
紙を折ったようなエフェクトを実装するチュートリアル | コリス
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」
TOP > WebDesign > CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」 WEBデザインの次世代規格として注目を集めているCSS3。徐々に技術系のWEBサイトでも取り上げられて、WEBデザイン業界内では話がでる機会も増えてきたと思いますが、今日紹介するのはCSS3を使ってボタンを作るテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」を紹介したいと思います。 Pretty CSS3 Buttons グラーデーション、オーバラップ、ドロップシャドウなどなど、いままで画像でしか表現が困難だったボタン表現が多数集められています。今日はその中からいくつか気になったテクニックを紹介したいと思います。 詳しくは以下 ■Cool O
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」:phpspot開発日誌
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla
[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
[CSS]ハック無しでIE6でmax-widthを実現するスタイルシート
CSS HackもJavaScriptもIEの条件付きコメントも無しで、IE6でmax-widthを実現するスタイルシートをCSSplayから紹介します。 'max-width' for Internet Explorer IE6 demo: center 実装のポイントとなるのは左右に配置されたdiv要素で、それぞれマイナスマージンを指定します。 コンテンツを配置するdiv要素には「overflow:hidden;」を指定します。 デモでは上記のmax-widthのコンテンツをセンターに配置したものと左右に配置したものがあります。 'max-width' centered 'max-width' left 'max-width' right
洗練されたデザインのサイトでよく使用されているテクスチャ：グレイン
最近よく見かける、ソフトなグラデーションが映えるテクスチャ：グレインを効果的に使用したサイトをabduzeedoから紹介します。
光源や１ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集
光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌
最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 14
テキストをかっこよく魅せるPhotoshopのチュートリアルの紹介です。 3D Typography Add Fantastic Color to 3D Text – Part I Add Fanta
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/css3.html
MdN Design｜総合情報サイト
新着記事
