超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します.

LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます.

Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです.

screenshot

Read More

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

box-sizing

今回は CSS3 から box-sizing について紹介します.

width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか?

これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます.

あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

Read More

『リッチマン、プアウーマン』のデスメールカウントダウン演出をWebで再現してみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

先週『リッチマン、プアウーマン』第三話が放送されました.

このドラマに出てくる架空の会社「NEXT INNOVATION」で下記のような面白い設定がありました.

NEXT INNOVATION のプログラマは3ヶ月更新になっており, 今日が更新日. 夕方6時までに解雇メールが届けば, 否応なしに解雇になる. 解雇通知のメールはデスメールと呼ばれていた.

理由は, 使えない人間を置いておくと, 優秀な人間がそのフォローをしなくてはいけなくなるかららしい. ん~なかなか面白い.

この制度の興味深いところは…ってまぁ本題はそこじゃなくて.

ドラマの演出で社内のモニターに映しだされていた夕方6時までのデスメールカウントダウンの演出が 面白くて簡単そうだったので再現してみましたって話です.

death mail

Read More

たった3つの CSS3 プロパティで Tag Cloud をオシャレにする方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

ブログなんかでお馴染みの Tag Cloud. これを少しオシャレにする方法について紹介しようと思います.

どうオシャレになるかというと, このブログの右上にある Tag Cloud のようになります. マウスを乗っけるとホワっとなってジュワっとなってピっとなります.(「ダセェ~じゃん!」なんて意見はあなたの心のなかに留めておいて下さい)

『右上のあのぼかすやつってどうやるんですか?』なんて質問を受けることが何度かあったので, ざっくりとまとめた次第です.

Read More

jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

またまた昔書いたエントリーのサンプルを jsdo.it に移植しました.

元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています.

Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます.

jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!!

※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!!

Read More

CSS3 で 3Dっぽいボールを作ってバウンドさせてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

CSS3 で 3Dっぽいボールを作ってバウンドさせてみました.

元ネタは『CREATING AN ANIMATED 3D BOUNCING BALL WITH CSS3』です.

元ネタは英語なのと色々と説明を端折っていたので, 私なりに作っていく過程を jsdo.it を使って Step by Step 形式でまとめてみました.

正月に CSS3 で鏡餅の年賀状を作ったとき(こちら)は ちょっと苦労しましたが, 今回は見た目のわりには手間が少なかったのでぜひみなさんも作ってみてください.

すべて jsdo.it で作っているので実際に動かしたり, fork してコードをイジったりして遊んで下さい.

Read More