Works

css3で木目

ちょいなー

  • 7061
  • 9

CSS3だけでかっこいいスイッチ / CSS-Only Switch button

css3とhtmlだけでスイッチをつくるよー。 checkboxにチェックするとONになるよー。 アニメーションしてるよー。 2015/05/07 UPDATE _____________ IE8での動作に対応。 といってもキモは :checked 。IE8 は :checked 非対応なので、selectivizr.js を入れて対応してください( CDN→ http://cdnjs.com/libraries/selectivizr )。 で、IE8は input を display:none したら labelと連動して動いてくれないようなので、 display:none じゃなくて z-index:-1 でスイッチの背後に隠す方法にしました。 アニメーションは無くても別にいいよね…(´・ω・`) _______________________________ macのChrome / Safariで動作確認済み。 (最初公開した時、Safariの :checked と隣接セレクタのバグで動かなかったから、間接セレクタにしたよー  参考サイトさん→ http://webcre8.jp/investigate/css-selector-checked.html ) ■仕組み ざっくりいうと、 | 左(ON)| 中(labelのボタン)|右(OFF)| というかんじで3つのボックスを並べて、 checkboxと連動して 左右のwidthを40pxにしたり0pxにしたりして、 widthをCSS3のアニメーションでtransitionしてます。。 こーゆーかんじ ___________________ |左| ボタン |   右   | --------------------------------- ___________________ |   左   | ボタン |右| ---------------------------------

  • 5030
  • 5

TITLE Tool Tip

■ html5: 脚注のためのtitle属性を、ツールチップにする ・htmlの文脈を邪魔しない。 ・でもブラウザのデフォルトのツールチップとかぶるから微妙な結果に(´∀`*) html5の脚注: http://www.w3.org/TR/2009/WD-html5-20090825/text-level-semantics.html#footnotes

  • 1120
  • 0

タグ1個の板チョコ

じゅ・う・に・こ・だ・か・らー うーん…見た目が雑…

  • 1452
  • 0

よくある見出しの下線の飾りを、cssで簡単にやるよ

見出しによくある、下線が2色になっている飾りをシンプルコーディングでやってみるよー

  • 4576
  • 0

Skills

  • Wordpress
  • Photoshop
  • Fireworks
  • Illustrator
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • LESS

Hot tags

Categories

HTML / CSS / JavaScript