[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
かわいらしいツールチップ
デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い - かちびと.net
とっても可愛らしいコンタクトフォームがありま したのでメモがてらご紹介します。封筒に入 った手紙を模したフォームのデザインで、 マウスを乗せると、フォーム部分の手紙が アニメーションしながら出てきます。使いど ころは今は限られてしまいそうですが・・ 将来は普通に使えるといいですねｗ なかなか素敵なフォームデザインです。手紙にマウスを乗せるとゆっくりフォームが出てきますよ。こういう発想力がほしいですね・・ a unique contact form with css3 transitions お手紙が入った封筒です。チラッとフォームが見えてますね。 マウスを乗せると・・ ゆったりとしたアニメーションでするすると出てきます。かわええｗ こんな仕組みらしいです。アニメーションはtransitionで、ホバー時に高さを変えてるんですね。 form {background:#f7f2ec url('
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
Loading...
http://e0166nt.com/blog-entry-904.html