CSSでいろんなカタチを表現してみる
CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。 DEMO 正方形 -Square- 長方形 -Rectangle- 円形 -circle- 楕円形 -oval- 三角形（上） -Triangle Up- 三角形（下） -Triangle Down- 三角形（右） -Triangle Right- 三角形（左） -Triangle Left- 三角形（左上） -Triangle TopLeft- 三角形（右上） -Triangle Topright- 三角形（左下） -Triangle BottomLeft- 三角形（右下） -Triangle Bottomright- 湾曲した矢印 -Curved Tail
意外とカンタン！CSS3で作る、スマホとかレスポンシブWebサイト用メニューアイコンのエフェクト｜ツーブロッカ
【追記あり】 ※iOSで動かなかったので少し調べたらtransformにベンダープレフィクス付けて動作しました。すみませんでした。 というわけでCSSのソース若干変わっています。。。 スマートフォンでWebサイトを見ていると、画面左（もしくは右）にこんなアイコンが表示されることがあると思います。 いわば「メニューアイコン」なのですが、これが画像やアイコンフォントを使わなくてもHTMLとCSSだけで出来てしまうのです。 今日はその作り方と、さらに「閉じる」ボタンに変化するアニメーションも作ってみます。 もう一度言います。HTMLとCSSだけで作ります！ シンプル。 まぁコレでなくてもいいんですけどね。 僕はこういうリンクをしない場合にa要素を使うのは好きではないのですが、例として、体（てい）としてa要素にしてやります。 本当は別の要素をcursor:pointerでなんとかするのが適切かと思
中国电线电缆网(xianlan315)- 中国权威电线电缆行业网站 - 沙龙娱乐网_沙龙娱乐网老虎机_沙龙娱乐网站
很抱歉，您查找的页面不存在，可能已被删除或转移！ 您可以： 1.请检查您输入的网址是否正确。 2.如果您不能确认您输入的网址，请浏览沙龙娱乐网沙龙娱乐网，来查看您所要访问的网址。 网络实名：沙龙娱乐网 中国线缆交易网 电线电缆行业网 电线电缆门户网 找电缆、电缆设备、电缆原料就上电线电缆网 客服电话:0311-68002582 传真：0311-68002582 E-mail:xianlan315@163.com 客服QQ：148061725 QQ：836560166 地址：河北省石家庄光华路9号 | 邮编：050000 Copyright©2006-2013 www.xianlan315.com All Rights Reserved. 沙龙娱乐网 版权所有 冀ICP备07022597号 本网站只提供交易平台，对具体交易过程不参与也不承担任何责任。望供求双方谨
HTML5リファレンス（旧仕様）
<p> …… ひとつの段落（パラグラフ）であることを表す <hr> …… テーマや話題の区切りを表す <pre> …… 半角スペースや改行をそのまま表示する <blockquote> …… 引用・転載セクションであることを表す <ol> …… 順序のあるリストを表示する <ul> …… 順序のないリストを表示する <li> …… リストの項目を記述する <dl> …… 定義・説明リストを表す <dt> …… 定義・説明される言葉を表す <dd> …… 定義用語や言葉の説明をする <figure> …… 図表であることを示す <figcaption> …… 図表のキャプションを示す <div> ……ひとかたまりの範囲として定義する <main> …… メインコンテンツであることを示す <a> …… ハイパーリンクを指定する <em> …… 強勢する（アクセントを付ける）箇所を表す <stro
» HTML5 + CSS3 でコーディングするための準備 « fog-town web
現在 “HTML5 + CSS3 でのコーディング” をお勉強中。 最近やっと XHTML + CSS2 を覚えつつあるような気もするが、この業界はかなりの急流らしい……。 今回はコード記述云々ではなく、下ごしらえ的な備忘録。 【 HTML5 】 1. IE 対策 IE8 以前のバージョンは HTML5 をサポートしていない（IE9 はサポーしている）ので、全ての人が IE を使わないようにするのが最善の方法だ……が、無理だから、こちらの HTML5 有効化スクリプト をダウンロードして ＜head＞ に設置する。 <!--[if lte IE 8]> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5.js"></script> <![endif]--> ※ My WP 用。 次
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
