パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル
CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってCSS3アニメーション 「:disabled」を使ってCSS3アニメーション 「Media Queries」を使ってCSS3アニメーション 各スタイルシートについてのメモ 「:active」を使ってCSS3アニメーション 疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメ
[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3
CSSPrefixer
keep your styles clean You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you! See it in action: .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px; } Installation easy_install cssutils (or pip install cssutils if you have pip) Usage: From console cssprefixer my1.css my2.css --minify > result.css From Python import cssprefix
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報