Archive for the ‘CSS/XHTML’ Category

CSS3 でボタンを作る為のテクニック、サンプル集

CSS Lectureさんの記事紹介です。   CSS3 の基礎をいくつかに渡り紹介していたのですが、その後手付かず…今回はパーツの一部ですが、ボタンのサンプルを作ったので作り方を紹介をしたいと思います。 サンプルは今後自分もコピペでも作れるようシンプルなものにしたので、使えそうと思った際はお好きに使って下さい。   ネタ元:CSS3 でボタンを作る為のテクニック、サンプル集 (CSS Lecture)

Tags:

スタイルシートのすご技、ページをめくるリアルなアニメーション

コリスさんの記事紹介です。   FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。   ネタ元:スタイルシートのすご技、ページをめくるリアルなアニメーション (コリス)

Tags:

画像に美しい角丸とボックスシャドウを適用する方法

コリスさんの記事紹介です。   img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。これを解消するCSSのTrickを紹介します。   ネタ元:画像に美しい角丸とボックスシャドウを適用する方法 (コリス)

Tags:

HTMLをWPテーマ化する時の手順リスト

かちびと.netさんの記事紹介です。   一般的なHTMLファイルをWordPressのテーマにする時の手順と、使用するタグをリスト化、というか自分用チートシート。いつも子ページが時間掛かるので、単純な構成のHTMLなら、テーマ化くらいはサクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。   ネタ元:HTMLをWPテーマ化する時の手順リスト (かちびと.net)

Tags:

[CSS]スタイルシートをほんの少し軽量化する10のTips

コリスさんの記事紹介です。   簡単に実践できるものから、ちょっと手間がかかるものまでスタイルシートをほんの少し軽量化する10+1のTipsを紹介します。   ネタ元:[CSS]スタイルシートをほんの少し軽量化する10のTips (コリス)

Tags: ,

CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集

かちびと.netさんの記事紹介です。   cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。   ネタ元:CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集(かちびと.net)

Tags:

Googleが出してきたFont APIのすごさを体感したいなら…『Font Previewer』

IDEA*IDEAさんの記事紹介です。   GoogleからいろいろなAPIが出てきましたね…。位置情報やStorageもすごいですが、Font APIなるものが特に話題のようですね。 このAPI、Google経由でいろいろなフォントが使えちゃう、という優れものです。まだフォントの数は少ないですが、近い将来日本語のフォントも出てくるのではないでしょうかね…。 で、このAPIで何ができるのか体感したいならFont Previewerがおすすめです。さまざまな設定を変えればリアルタイムでどのようにテキストが見えるか教えてくれます。   ネタ元:Googleが出してきたFont APIのすごさを体感したいなら…『Font Previewer』(IDEA*IDEA)

Tags: ,

HTML5 / CSS3のソースがダウンロードできるサンプル

CREAMUさんの記事紹介です。   HTML5 / CSSでできることをざっくり掴みたい。そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。   ネタ元:HTML5 / CSS3のソースがダウンロードできるサンプル (CREAMU)

Tags:

[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

コリスさんの記事紹介です。   ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。   ネタ元:[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法 (コリス)

Tags:

HTMLを読みやすく美しくする8つの方法

AUTHORITY SITEさんの記事紹介です。   これのHTMLとCSSの分離は必要不可欠です。HTMLでインラインCSSを使っている人がまだ多くいます。デザインする上で不利なことはないですが、ウェブサイトを修正しなければいけなくなったときが大変です。CSS,JavaScript は外部ファイルにして、HTMLから参照するのが一番良いです。   ネタ元:HTMLを読みやすく美しくする8つの方法 (AUTHORITY SITE)

Tags: