Engadget | Technology News & ReviewsPick up the 9th-gen iPad with two years of AppleCare+ for only $298
DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
-webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである - hogehoge @teramako
地獄の火の中に投げ込むものである。 いや、まあそんなネタはどうでも良くて... そのベンダー接頭辞はいつまで書くの？ | Unformed Building 書いてあることは至極真っ当なこと。もろ手をあげて賛成である。 また、 ベンダー拡張プリフィックスはそれそのものがWebを破壊することはないし、ベンダー独自のプロパティーや関数が数万追加されて使われまくったとしても本当はWebは壊れない。またその文法が変更されても修正または追加すれば対応できるし、その余裕は十分にある。つまり壊れるのはほとんど全てのケースで開発者の怠慢に過ぎないので、ちゃんと仕様と実装を理解して必要ならば寝る間を惜しんで修正作業に血眼になるべき。みたいな実践を伴わない意識を僕は持っている。 なので憂うべきこの現状は、IE6が拡散して残り続けたことと同じようにベンダー側ではなくWeb開発者側に非があると思っている。 ベンダ
美しい横メニューの作り方
<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:
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
CSS3で画像を分割スライドする超クールなパネル実装例:phpspot開発日誌
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
07design.net
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
CSS3だけで作るボタンデザインいろいろ
シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌
IBM Developer
