[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
電子書籍で複雑なレイアウトを実現する「CSS Regions Module」仕様のドラフトが公開
電子書籍やWebページで、もっと複雑なページレイアウトを実現しようという新たな仕様「CSS Regions Module」の最初のドラフトがW3Cで公開されました。 IDPF（International Digital Publishing Forum）が策定中の電子書籍フォーマットの標準仕様であるEPUB3が牽引役となり、HTML5やCSS3などのWeb標準が電子書籍を作成するための重要な仕様になろうとしています。 しかしスタイルを設定するCSSでは、縦書きや二段組のような比較的シンプルなレイアウトがようやく実現しようという段階で、雑誌のレイアウトで多用されるような複雑なレイアウトの実現にはまだまだ機能が不足しています。 今回ドラフトが公開された「CSS Regins Module」は、そうした複雑なレイアウトの実現に向けた動きの1つです。アドビシステムズが中心となって提案しているようで
基礎となりつつあるCSS3と、CSSの現在、これから | Web標準Blog | ミツエーリンクス
3月はブラウザのリリースが続いた一ヶ月でした。Internet Explorer 9, Firefox 4, Chrome 10が正式版となり、またOpera 11.10, Chrome 11がそれぞれベータ版として公開されました。 それぞれのCSSサポート状況を見ながら、CSS3の現在とこれからについて考えてみました。 スナップショットがベースラインに IE9でがセレクタとColor, 名前空間、メディアクエリーを実装したので、デスクトップブラウザにおいてCSSスナップショットが満たされたことになります。IE9がWindows Phone 7に提供されると、スマートフォンにおいてもそれが完了します。CSS3は一部ではありますが、CSSの基礎となったのです。現在のPCサイトでは主にCSS 2.1段階のCSSが開発の基礎技術として認識されていたように思いますが、今後はスナップショットに移行し
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
CSSアニメーションを実行するトリガーのまとめ５＋１個
先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti
CSSのみでスライドして画像を切り替えるギャラリーを作る
ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a
text-shadowで作る「見出し」デザインのアイデア (1/4)
text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。 text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。 今回のお手本
[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
CSS3で縦書きスタイルを、電子出版の未来のために。日本発で提案中
日本語には縦書き表記が存在しますが、HTMLやCSSなどのWeb標準には縦書きのためののプロパティや機能はまだ十分ではありません。これまではHTMLやCSSの用途が、Webブラウザで参照するWebサイトを記述する用途にほぼ絞られていたため、このことはほとんど問題になりませんでした。 しかし今後HTMLとCSSは、電子書籍のフォーマットとしても使われることになりそうです。オープンな電子書籍ファイルフォーマット規格として普及が始まっている「EPUB」は、HTMLとCSS（それに画像ファイルなど関連ファイル）で記述されます。これにより当然ながら、EPUBによる電子書籍で日本語の縦書きのニーズが高まることが考えられるため、CSSなどによる充実した縦書きのサポートは欠かせないものとなります。 EPUBでの充実した縦書きレイアウトを実現すべく、かつてW3CでXML1.0の仕様策定に関わったマークアップ
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
CSS3で実現するMac OS Leopard風のStack実装例:phpspot開発日誌
CSS3 Stacks Experiment CSS3で実現するMac OS Leopard風のStack実装例が公開されています。 クリックすると、アニメーションしながら出てくるStackがカッコいいです。 半透明、ボーダー付き角丸となかなかのテクニックを駆使しているみたいですね。 サイトに書かれている使われているプロパティとしては、次のようなものが使用されてるそうです。 ・擬似 :target クラス ・transform ・transition ・border-radius ・border-image ・CSSグラデーション ・rgba colors ・text-overflow: ellipsis; 関連エントリ ピュアCSS3で3Dアニメーション jQueryとCSS3で作るカラフルなスライダーウィジェット 近未来に頻繁に使われるであろうCSS3サンプル１０ ピュアCSS3を使っ
css3のボタンを作成出来るCSS3 Button Makerが貴方の手元に・実装ファイルが無料で配布されています - かちびと.net
CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ PHPSPOTさんの記事やはてブに上がっていたので存在は知っていましたが、無料で配布されてるとは思いませんでした。DLすればブラウザだけでCSS3のボタンを作成出来ますよ。 JavaScriptとHTMLだけで作ってたんですね・・・まるっと配布されていますのでいつでも誰でも使用できますね。 ↑ これが使えるようになる。HTMLファイルを変更すれば日本語にもなりますよ。 テキストだけ変えてみた。cssも修正しないと見にくいですけどこれは結構助かりますね。 コードみてこういったジェネレーターの作成法を学ぶのもいいかも。なんとも太っ腹なCSS-TRICKSの記事は以下。無料でDL出来ます。 CSS3 Butto
キャプションがクロスしながら切り替わるcss3+jQueryのスライドギャラリーのサンプル
cssやプログラミングtransition slide css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 という訳でサンプルです。 css3 transition slider Chromeで見ると凄くスムーズにクロススライドしてました。css3、いろいろと使いたいんですけどやはりIEが対応しないとですね・・ライブラリでドロップシャドウや角丸は対応できますけど。。 画像の切り替わり時に-moz-transi
jQueryとCSS3を使ったカラフルなレーティングシステムのサンプル:phpspot開発日誌
jQuery quickie: Colourful rating system with CSS3 jQueryとCSS3を使ったカラフルなレーティングシステムのサンプルが公開されています。 点数によって色を変え、アニメーション表示するもので、視覚的にわかりやすい投票のUIが作れますね。 動きをみたい方は以下のムービーでも見ることができます。 こうした投票のUIとしては★が一般的ですが、こういうUIも慣れるとなかなか使いやすそうですね。 関連エントリ jQueryのAjax機能を使った投票システムのサンプルプログラム reddit風のGoodかBadの投票機能実装サンプル Ajax+PHP+MySQLな投票ウィジェット jQueryとPHPでダイナミックな投票スクリプトを作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のミサワがCSS3の勉強に最適と話題に
IDEA * IDEA
[CSS]スクリプト無しで、画像に鏡面効果を与えるスタイルシート
HTML5とCSS3を使用した、ハイクオリティな無料のテンプレート集