Home > css > iphone風の三角の戻るボタンをcssで

iphone風の三角の戻るボタンをcssで

  • 2012-01-17 (火)
  • カテゴリ：css
  • このエントリーを含むはてなブックマーク

コーディングしたのでメモ。

基本的な考え方・作り方

入れ物と、aタグが必要。
spanとa
headerとa
liとa
など。

入れ物は　position:relative;にしてaタグはabsoluteにする。
a:beforeとa:afterで部品を作り、

transform:rotate();
transform:scew();
z-index:;
で調節する。

shadowとかgradientで装飾する。

−−−

参考サイト

http://design.kayac.com/topics/2010/10/iphone-ui-only-css3.php
日本語　三角部分には　rotateを使っている。

a:beforeで4角形を作り、a:afterで三角形を作る。
三角形を４５度傾けるので端の角度が９０度になる。ので少し鋭い戻るボタン。
三角と四角の繋ぎめをborder-radiusで調節するが、上手く行かないとピロッてなる。
上記サイトのサンプルでも、なっている。

http://blog.livedoor.jp/cie/archives/52084124.html
日本語。　三角部分をscew。

aタグをborder-radiusで角丸の四角形にする。

a:afterに半分の高さの四角形を作りtopとleftにnegative-margin入れて引き上げる。
transform:scew()で傾けて、三角形の下半分を作る。

a:beforeにafterと同じく四角形を作り、scewで傾ける。
float:left;して合体させる。

繋ぎ目が綺麗。左端の角度を浅くできる。
コードが少し複雑なのでKAYACさんのと使い分けできそう。

−−−

scewとrotate同時指定できたら、上記２とおりの良いとこ取りできるのに！

チュートリアル


http://lab.jeffbatterton.com/iphone-back-button/

英語。丁寧で分かり易いチュートリアル。
四角形２個とrotateのパターン。

−−−

css3　その他tutorial
http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials

  • カテゴリ：css
  • このエントリーを含むはてなブックマーク

Comments:0

Comment Form
Remember personal info

Trackback+Pingback:0

TrackBack URL for this entry
http://reoto.com/archives/356/trackback/
Listed below are links to weblogs that reference
iphone風の三角の戻るボタンをcssで from ぼんずーず

Home > css > iphone風の三角の戻るボタンをcssで

人気エントリー
最近の記事
記事カテゴリー
記事アーカイブ
タグクラウド
911 98 Acl add on ADSL ajax android apache api apxs bake bash bind borland BSE c++ cakephp centOS centOS5 centos6 chrome chroot clamav combobox configure cpan css css3 ctp curl C言語 database db dns dojo dom dos dovecot dreamweaver ECCUBE eclipse EM Excel exec php favicon firefox firewall git html http httpd ids IE8 iptables ipマスカレード java javascript jquery json lan lightbox linux Lithium mailserver make mbr model mongoDB movabletype mozc mysql nec nic oscommerce password pbr pbs pci pcre PDF pear perl php php4.3.9 php5.2 php5.3 phpexec phpのエラーコード plugin pop3 postfix pppoe Python ruby Ruby on Rails sftp simpletest SMAP Smarty smtp snort SPAM sql sqlite ssh sugarsync svn Synergy TCP/IP toitoiseSVN tripwire ubuntu uml validation vim vimperator VMwarePlayer vnc vps web webmin web開発 windows windowsXP wine Word wordpress xampp xml zen cart zen coding 　androidアプリ えひめAI くしゃみ さくらvps ひかり ひかり接続 アキヒト アンチウィルス イカ インデックス エコ エラー オリンピック カスタマイズ カスタムフィールド カタカナ キーワードEYE シェルスクリプト シュレッダー ジーオーグループ スクリプト セキュリティ センター直前 ソルトレイク タコ ダイアルアップ ダウンタウン ツール テレビ テレホーダイ テロ デバッグ デュアルブート データサルベージ ネットショップ ネットワーク ハイライト バイク バックアップ バッファオーバーフロー バージョン切り替え バージョン管理 ファイル共有 フリーズ ブックオフ プラグイン プリンタ プログラミング プーチン マイケルジャクソン マコーレ・カルキン マルウェア メモ メール リキッドレイアウト リサイクル リビルド リポジトリ レイアウト レンタルサーバー 不満 事故 人生 仮想化 再生紙 別れ 加圧式ボールペン 参考サイト 受験 哲学 変数 夏 夏目漱石 夢十夜 家族 島谷ひとみ 怠惰 怪奇 感謝 技術メモ 文字 文字コード 料理 旅 楽天API 正月 歯痛 焼き豚 牛肉 犬 理科年表 環境問題 生きる 画像 示談金 視覚 言葉 透過 開発環境 降水量 雨 青画面 風邪 飲みすぎ ｇｏｏｇｌｅ
検索
Feeds
Ads

Return to page top