回り込み解除、改行禁止・・CSSメモ
段組みレイアウトでよく使用するCSS・・「clear: both;」（回り込みの解除） 以下のように空白（特殊文字）を使用しているケースをみかけます。 <div class="clear"> </div> .clear {clear: both;}...
View ArticleCSSで作るナビメニュー
企業サイトのデザインなどでよく使用する角丸ナビメニュー（背景に画像を使用）。 タブメニューなどにも使えますね。 デモ： 下地をブルーの背景。背景画像にグレイの角丸メニュー。オンマウスでブルーの角丸背景画像。 HTML <div id="sample-nav"> <ul> <li><a...
View ArticleCSSで作る画像の切り替え・・Image Switcher
JSを使用せずにCSSでオンマウス時に画像が切り替わるタイプ。 ヘッダーのトップ画像切り替えなどに使えますね。 デモ： HTML <div id="images-wrap"> <a id="img_a" class="image-link" href="#"> <span>サンプル画像A</span></a><br />...
View ArticleCSS3で角丸とテキストにドロップシャドウ
「More（続きを読む）」部分をjQueryで折りたたみできる WordPressプラグイン「More Content Folder」が小粋空間さんより公開され、さっそく導入。 ついでに「続きを読む」部分にCSS3で角丸とテキストにドロップシャドウをつけて装飾。 CSS .more, .hide { -webkit-border-radius: 5px; /* 角丸- Safari,Google...
View ArticleCSS3のtransitionを使ったナビメニュー（ボタン）
CSS3のtransition、box-shadow、text-shadow、border-radiusを使用してナビメニュー（ボタン）を作成してみました。 IE、Operaには対応していません。Firefox、Safari、Chromeでご覧ください DEMO ul#css3btn {list-style:none;} .btn a{ /* ボタンのレイアウト */ font: bold 1em...
View Article
