HTML5とCSS3のオンラインサンプルが良い感じ | Web活メモ帳
Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。 HTML5 & CSS3 Tools and Tutorials パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。 以下に使っている様子を載せてみます。 ↑設定した項目を選択します。 まずはBox Propertiesを試してみます。 ↑設定可能な項目が表示されます。 パラメータをグリグリいじれちゃいます。 ↑設定した内容はリアルタイムにプレビュー表示されました。 使用するコードと対応するブラウザも教えてくれます。 違うものも試してみましょう。 ↑Videoを設定している所です。 動画ファイルはURLを直接入力して設定します。 ↑プレビューです。 細かいブラウザのバージョンも教えてくれました。 他にも設定可能な項目はたくさんありました。 興味のある方は
ColorZillaが作成したPhotoshopのようなCSSグラデーションジェネレーター | Web活メモ帳
最近のブラウザは続々とCSS3に対応してきています。それに伴って多彩なジェネレータも続々登場してますね。 今回は、簡単にグラデーションが作れるCSS3のジェネレータ「Ultimate CSS Gradient Generator」を紹介します。 スライダを使用して色をカスタマイズ まさにPhotoshopのようなUIですが、ダブルクリックで色指定とドラッグで範囲選択が可能です。 （透明度がないだけですね。） 指定した内容がすぐにプレビューで確認できるのも嬉しいですね。 最後に”IE”に対応するかどうかのチェックをつけて完了です。 FIrefoxのプラグインColorZillaにも追加 開発元はFIrefoxのプラグインを開発しているColorZillaの方々なのですが、 プラグインのツールメニューにもリンクが追加されていますね。 CSS3に対応するのに、覚えておいて損はなさそうです。
html5とcss3の美しいデモ | Web活メモ帳
美しいグラフが表示されるのですが、マウススクロールすると全体が動くようになります。 デモ ホイールを取得する部分は以下のようなコードになっています。 jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) { var newval, num = $('div.css-chart p').css('padding-left'); delta = delta || e.detail || e.wheelDelta; if (delta> 0 || e.which == 38) { newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1); } else if (delta <0 || e.which == 40) { newval = parseFloat(nu
CSS3で3Dなリボン表示を実現する方法 | Web活メモ帳
I Have Used Only CSS, friends! For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic. It doesn't work with IE! Go to the tutorial! .menu { position: relative; top:3px; left: 50px; z-index: 80; /* the stack order: displayed under bubble (90) */ } .menu ul li { -webkit-transform: rotate(-45deg); /* rotate the list item *
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オーバーレイで浮き上がってくる超クールなナビゲーション | Web活メモ帳
CSSのみで作れるアイコン配布サイト「One Div」 | Web活メモ帳
CSS3で超クールなボタンを35個作れるCSSフレームワーク | Web活メモ帳
Windows7のスタートメニューをCSS3だけで作る方法 | Web活メモ帳