[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
CSS3アニメーションの基本的な実装例のまとめ
CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。 全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。 デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. 19+ Million Digital Assets, With Unlimited Downloads Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato
Mozilla の Web O'(pen) Wonder
驚きの連続 ウェブの見事なデモを探検してください! 高機能なブラウザで実現されるすばらしい発明の世界を! デモを投稿!
CSS drop-shadows without images – Nicolas Gallagher
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya
デコもじ｜ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
デコもじは2016年11月30日（水）をもちましてサービスを終了致しました。 デコもじをご利用中の会員様におかれましては、サービス終了日をもちましてフォントの配信が終了となり、有料プランをご利用の場合はサービス終了日をもちまして課金が停止されております。 ※フォント配信は終了となりますが、Webサイト上に設置した JavaScript コードは会員様ご自身で削除をお願いいたします。 これまで長らくデコもじをご愛顧いただき、誠にありがとうございました。今後もシーサー株式会社の各種サービスのご愛顧のほどよろしくお願いいたします。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Grad? Gradient!-CSS3 GradientButton Generator-
Gradation Slider Like a function of Photoshop. When you click on the vertical gradation slider, you can add a color point to it. Drag the point to right to remove the color. To select the color of the point, double-click on it. If you want to make a complicated gradient soon, click on the sample buttons. Then, default gradient points are added to the slider. You can change the color of the points
IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
12 High-Quality Free CSS Button Libraries & Frameworks – Speckyboy
bttn.css Library bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes, and colors. All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight. CSS Buttons Collection The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include
Firefox 4 がサポート予定の calc() とは
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webstuffshare.com/2012/02/creating-next-level-search-form-using-jquery-css3/
Ceaser - CSS Easing Animation Tool - Matthew Lein
Ultimate CSS Gradient Generator from ColorZilla
これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」:phpspot開発日誌
Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
Internet Explorer Pure CSS Icon - An experiment by Andreas Jacob
http://www.designwalker.com/2010/05/css3.html
