ページ

▼
ラベル CSS3 の投稿を表示しています。 すべての投稿を表示
ラベル CSS3 の投稿を表示しています。 すべての投稿を表示
2014/11/27

jquery.transform.js で CSS3 の transform をアニメーションさせる

›
要素を CSS3 の transform で移動・回転・拡大縮小などさせつつ、 アニメーションもさせたい場合に便利な jQuery プラグインを紹介します。 jquery.transform.js eenox/jQuery-3D-transform このプラグインは指定...
2013/03/30

HTML/CSS/JavaScriptを駆使した画像の重ね方

›
いわゆる、かずー氏クラスタアイコンの作り方 Way to cover an image with another image サンプルページへはこちらのリンクまたは画像をクリック！ 私 @wada811 のアイコンが、 他の人のかずー氏クラスタアイコンのように 全体サイ...
2013/03/02

[SublimeText]Emmetで高速HTML/CSSコーディング CSS編

›
CSSの展開 HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、 ショートハンド(速記)でスニペットや自動補完を助けてくれます。 それによってCSSでも爆速コーディングが実現可能です。 例えば、m と打って展開すれば margin: ...
2012/11/18

[CSS] ol 要素を使用しないカウントアップするリストを作ってみた

›
前回のリストマーカー引き続き、CSSで ol タグ相当のCSSクラスを作ってみた。 [CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた | DevAchieve また ::before 擬似要素を使っているので CSS3 扱い。 IE8ではコロン...

モダンブラウザのための最小clearfixハック

›
CSSハックの中でも最も有名で最も使われているのが clearfix だろう。 CSSハック嫌いの僕でも clearfix の有用性だけは認めざるを得ない。 それでもCSSハックは使いたくないのでできるだけ簡潔な表現にした。 ネタ元はこちら： A new micro cl...
2012/11/13

[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた

›
ul 要素などに指定できる list-style-type には種類に制限があるので 好きなリストマーカーを自由に設定できるように ::before擬似要素を使ってリストマーカー用のクラスを作ってみた。 css/list.css もちろんテキストが複数行になってもインデン...
2012/02/18

CSS3でボックスを角丸にするborder-radiusを使ってみた

›
追記(2012/06/01):border-radiusについてはベンダープレフィックス(8, 9行目の記述)は必要なくなりました。 SyntaxHighlighterで表示する程でもないコマンド系のコードを 角丸ボックスで表示しているのを見てカッコ良かったので取り入れてみまし...

CSS3の角丸を使ってキーボードのキーを表現してみた

›
追記(2012/06/01):border-radiusについてはベンダープレフィックス(9, 10行目の記述)は必要なくなりました。 ショートカットキーとかを表示させる時に画像を用意するのは面倒なのでCSS3の角丸と 昔ながらのborder-styleを使ってキーボードのキー...