マウスオーバー時にアニメーションするボタン Part2　作った

CSS

CSSだけで頑張るシリーズ、アニメーションボタン編 Part2http://www.oregongridiron.com/ ←このサイトのボタンがかっこよかったのでどうやってるか調べて自分なりに実装しなおしてみた。かっこいいエフェクトができるけど、html側で必要なタグが多い。。。

2013-10-27

Sass(Compass)でRetina用backgroundを同時に書き出すmixinを作った

Sass/Compass CSS

Retina(に限らず高解像度)用の画像を背景画像として書き出すとき、今までは全部手作業でやってたんだけども、高解像度向けの@mediaのベストプラクティスが日々変化(進化)するので、毎回grepして修正するのが面倒。 @mediaの記述位置はCSSの末尾にまとめて…

2013-10-24

Input type="radio"をCSSだけで装飾する

CSS

CSSだけで頑張るシリーズ、今回はradioボタンに挑戦。FirefoxでもIE10でも非対応なので、完全にスマホ用です。といってもプロダクションで使うのはまだ気が引けますね。これをベースにfallbackをきちんと作れば、何とかいけるかもってレベル。。。iOS6, An…

2013-08-29

CSSのappearanceがFirefoxで効かない場合の解決策

CSS

# 2014.8.25 重要な追記このハックは、今年4月あたり(FirefoxNightly 31?)から効かなくなってます。。元記事 https://gist.github.com/joaocunha/6273016 でも、どうするよ的な議論＆試行錯誤が交わされていますが、:-moz-any(hoge):before プロパティを使…

2012-08-15

CSS3の-ms-linear-gradientが、いつの間にかいらない子になってた

CSS

最近はCSS3のlinear-gradientをよく使うようになってきたこともあり、今linear-gradientはどう書くのが適切なのかを調べてみました。今までは、毎回コツコツ書いてられないので、ColorZillaのCSS Gradient Generatorを使ってたのですが、いかんせん長い！ …

2011-11-11

text-overflowはFirefox7から使える／複数行の時はJavaScriptで対応

CSS jQuery

まんまです。使えるようになってるのを最近知りました。text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。それ…

2011-10-04

php+mySQL+jQueryで、コメントフォームのajax化を試す

CSS jQuery MySQL PHP

jQueryの簡易ajax通信関数、POST()を使った処理を色々試してみたくて最近やったことを放出します。php+mySQL+jQueryで、コメント投稿をajaxで表示するのを作ってみた。ネタ元はNETTUTS。ってか、ほぼそのまんまやっただけｗ Learn how to AJAXify Comment F…