CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
[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
Gorgeous Implementations of CSS3 in Web Design | Top Design Magazine - Web Design and Digital Content
Writen by Bogdan+ / Comments Off on Gorgeous Implementations of CSS3 in Web Design Thanks to the designer’s need to always create more sophisticated and gorgeous designs, their tools had to evolve with them, and between these tools, CSS3 is one of the most important. Using CSS3, the web designer is able to create virtually anything from responsive websites and all the way to websites that looks li
[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
CSS3のみで作られたパターンギャラリー「CSS3 Patterns Gallery」｜BLACKFLAG
今までは画像でしか表現できなかったWebサイト上の装飾が CSS3で追加されたプロパティを使うことによって CSSのみで様々な形状の模様を表現できるようになってきています。 そんなCSS3を駆使しての様々なパターンを紹介している 「CSS3 Patterns Gallery」がこの先もいろいろな可能性を秘めているように感じたので紹介してみます。 CSS3 Patterns Gallery 画面上を見て分かる通り、 ジグザグしたラインや矢印を含めた形状から チェック柄や格子柄から円を使った模様や ハート、レンガ模様などなど いろいろなパターンが紹介されており これら全ては画像を一切使わずにCSS3のみで作られています。 （2012年9月5日の時点で36種類） 紹介されているパターンのサムネイルをクリックすると 形成されているCSSプロパティが表示され、 コピペして使うことができるようになって
[CSS]非常に少ないコードで実装されたCSS3のアコーディオン型スライダー
JavaScript無しで、HTMLとCSSを使って非常にシンプルな実装をしたアコーディオン型スライダーを紹介します。 Make an Accordian Style Slider in CSS3 アコーディオンはCSS3アニメーションで滑らかに開閉し、スライドの数を減らしても増やしても動作します。 見た目だけではなく、非常に機能的なつくりです。 HTML HTMLはリスト要素を使い、非常にシンプルです。 <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">キャプション</a> </div> <a href="#"><img src="image.jpg"/></a> </li> <li> <div class="image_title"> <a href="#">キャプション</a> </div>
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル:phpspot開発日誌
16 Best CSS3 Transitions And Animations Tutorials WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル。 CSS3が登場したことによって、こんなことできるの？という驚きを最近よく感じていますが、そういうデモのチュートリアル集です。 16個ありますので、すべて見るだけでも見ておくべきだと思いましたのでシェア。 紙を折りたたむ風UIは スクロールで驚きのアニメーション 紙の折畳みや折り曲げエフェクト iPadの輝きをインタラクティブに変更 ビットマップグラフィクでマリオ。画像もキャンバスも利用していない、ピュアなCSS 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3でクールな角丸テーブルを作る例 CSS3で出来たクールなLightBox実装チュー
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第5回 CSS3のアニメーション効果CSS3のtransitionプロパティを使ってみよう。 「HTML5」という単語は、みなさんよく耳にすると思います。 しかし、HTMLと同時進行で策定さている「CSS3」に関しては、あまりなじみが無い方もいるのではないでしょうか？ そこで、今回から、CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装について解説していきたいと思います。 まずは、簡単なプルダウンから作ってみよう。 サンプルを見る サンプルは、簡単なプルダウンを作成しました。 このサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 さて、今までの感
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground
Site Under Maintenance
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
CSS3の制作をぐっと楽にする厳選20のオンラインツール
chrome-life.com
medleyweb.com