CSS3で斜めに傾いたメニューを作る時のメモ | Webクリエイターのメモ帳
このサイトの右上に斜めになったメニューがありますが、これはCSS3（+背景画像）でできています。 IEの場合はスタイルシートを変更して画像で再現されるようにしています。 このメニューをCSS3で作るときに若干コツがいったので、CSS3で斜めに傾いたメニューを作る時のメモ。 HTMLコード HTMLコードはこのような最小限でシンプルなもので実装しています。 </p> <ul> <li id="demo-menu1" class="demo-menu"><a href="./">MENU1</a></li> <li id="demo-menu2" class="demo-menu"><a href="./">MENU2</a></li> <li id="demo-menu3" class="demo-menu"><a href="./">MENU3</a></li> <li id="demo
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
省スペースで印象的なプレゼンができる・Presenteer.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 省スペースで印象的なプレゼンを行える jQueryのプラグインです。ちょっと見た 事のないタイプだったのでご紹介してみ ました。用途はかなり限られそうですが、 印象的ではありますね。省スペースで ある必要は無いかもですがｗ 面白かったのでご紹介。限られたスペース内で印象的なプレゼンを可能とする、みたいな目的で作ったみたいです。（多分
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
text-emphasis (CSS3 Text decoration)；圏点のスタイル
noneとすれば圏点をなくすことができる。また、上記の表にはない任意の一文字を圏点として指定することもできる。 仕様書には、以下のことも定められている。 filledとopenのいずれも指定されない場合、filledとして扱われる。 filledもしくはopenのみ指定した場合、横書きではcircle、縦書きではsesameとして扱う。 圏点の文字サイズは，圏点を付ける対象となる要素の文字のサイズを50%とする。 圏点は縦書きモードでは要素の右側に来なければならず、文字を回転させてはならない。 フォントが圏点に使用する字体を持ってないか、字体があっても不適当な大きさを使用することが考えられる。ユーザーエージェント（ブラウザ）は圏点に適切なフォントを用いることができ[MAY]、ユーザエージェントによって合成してもよい[MAY]。 例 filledを指定 ぼくもできなかった。Linux がぼく
スマホ対応のjQueryベースのイメージスライダー – ヒビヅレ
jQuery Touch Swipe Slider イメージ 現在KARA-FULLのトップで使っているスライダーはjQueryベースで拡張性の高いSliderKitというのを使っているんですが、スマートフォン対応を考えるとちょっと使いにくさを感じたのでスワイプ（フリック）などの動作に対応したTouchSwipeというタッチデバイスをベースにイメージスライダーを作成しました。 俗にいうjQueryプラグインってやつです。 このTouchSwipeの便利なところはタップやスワイプだけでなく2本指でのスワイプにも対応しているという点です（使ってませんが）。ただあくまでこのプラグインはタッチデバイス用のプラグインなのでスライダーなどの機能は自分で作る必要があります。 という訳で作ったのがコチラ。 Demo：jQuery Touch Swipe Slider – jQuery animation
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
この発想がすごい！次世代表現のヒントがいっぱいのWebサイト
IKEA | TRY ON A NEW SOFA... / uniqlo undercover / TIERRA | 福岡市中央区平尾の美容室 ティ...他...全5件
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects
HTML5/CSS3のニュースやTIPSなどのまとめ (2012年4月6日)
Web上で「飛び出す絵本」の動きを表現したBeercamp 2012がちょっと凄かった - かちびと.net
Prefixr - autocomplete your CSS with missing CSS3 vendor prefixes + Coda plugin - A link from paddykontschak - Forrst
CSS3D Clouds
CSS3で影をつける際に役立つ、ドロップシャドウバリエーションいろいろ
Ultimate CSS Gradient Generator from ColorZilla
3streamer.net
Edit fiddle - JSFiddle - Code Playground
std.li