[CSS]シャドウもくるっと！ふわりと浮かせた画像をくるっと回転させるスタイルシート
HTML 画像とキャプションのテキストをfigure要素で配置し、divで内包します。 <div class="flip-3d"> <figure> <img src="yacht.jpg" alt=""> <figcaption>Yacht</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="bee.jpg" alt=""> <figcaption>Bee</figcaption> </figure> </div> シャドウ用の余分なマークアップは、必要ありません。 CSS まずはfigure要素を3Dにし、各画像をfloatで配置します。 div.flip-3d { perspective: 1200px; width: 30%; float: left; } div.flip-3d figure
CSSだけで作るドロップダウンメニュー
HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
30 Exceptional CSS Navigation Techniques
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. We’ve seen innovative ways in which de
Advanced CSS Menu Trick | 3.7 Designs
CSS really opens the doors to a lot of powerful and rich opportunities in web design. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far. We are now coming to a point where the browsers are suppo
jQuery UI Tabsを使ってタブを実装する
jQuery UI Tabsを使ってタブを実装する方法を紹介します。 本当は4月1日は毎年エイプリルフールネタをエントリーしているのですが、今年は自粛します。 １．サンプル 以下に簡単なサンプルを用意しましたのでご覧ください。 サンプル ２．jQuery UI Tabsのダウンロード jQuery UIのページの「Download」をクリック。 「Toggle All」をクリックして、すべてのチェックを外します。 「Widgets」の「Tabs」をチェック。 ページ下にある「design a custom theme」をクリック。 「Theme Roller」でテーマを選択します。「Roll Your Own」タブではすべてを自分でカスタマイズできますが、最初は「Gallery」タブから決まったデザインを選択して、jQuery UIとテーマの対応の感触をつかんだ方がいいでしょう。 ここでは
(Better) Tabs with Round Out Borders | CSS-Tricks
The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I’ve always found impossible to re
タブで写真切り替え
Looking to add a tabbed interface to your website with JavaScript? Here are some examples to get you started. Using jQuery UI: https://jqueryui.com/tabs/ Code Example: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com
Animated Content Tabs with CSS3 | Codrops
In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseud
150 Amazing Examples of CSS Animation & Effects
We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! Unlimited Downloads: 500,000+ Fonts, Stock Photos, Themes & Design Assets DOWNLOAD NOW 1. Swatch Book Tutorial with CSS3 & jQuery [Demo] 2. 3D Thumbnail Hover Effects [Demo] 3. Stunning Menu Tutorial in CSS3 [Demo] 4. Collection of
すごい！CSSだけでHTMLの検証を行う·Holmes MOONGIFT
Holmesはスタイルシートを使ってHTMLの検証を行うソフトウェアです。 HTMLの検証を行ってくれるソフトウェア、サービスは多数あります。ソースやURLを指定してエラーの行数や場所を返してくれるタイプのものです。しかしそれでは分かりづらい、そう感じていた方はHolmesを使ってみましょう。エラーをその場で赤や黄色の枠で表示してくれます。 テスト画面です。赤または黄色でエラーが表示されます。 マウスオーバーでエラーが表示されます。例えば右側にある黄色の枠はリンクに対してtitle要素がないというエラーです。 黄色は注意、赤は警告メッセージです。 Holmesはエラー部分がカラーリングで表示されるので非常に分かりやすいのが特徴です。さらにマウスオーバーすれば詳細なエラー内容も確認できます。面白いのはこの機能をCSSだけで実現していることでしょう。HolmesでよりValidなHTMLを書け
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BootstrapやHTML5 Boilerplateに影響を受けて作られた軽量でミニマルなCSSフレームワーク・Substrata
IDEA * IDEA
Ultimate CSS Gradient Generator from ColorZilla
HTMLクイックリファレンス