吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com
いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のところ、どちらもベンダープレフィクスが必要 頻繁に使われるのは前者でしょうか。 transitionでさくっとアニメーション リンクにカーソルを載せると文字色が変わる、という例。 transitionプロパティで設定します。 値は「変化させたいプロパティの名前」と「変化にかける時間」です。 時間の単位はsで、secondsつまり秒です。 （ちなみにCSSは0.1を.1と記述する事が出来ます。） 複数
CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3でライトボックスする際に使えるライブラリ10選 | Web活メモ帳
http://www.is-real.net/experiments/css3/wonder-webkit/