Text Effects using CSS3
This post is explains how to create Photoshop style 3D text effects using CSS3 text-shadow and @font-face property. These properties are supported in all modern browsers like Chrome, Safari and Firefox, except Internet Explorer is dead. Try following examples and enrich your web pages, use better color combinations for pretty results .effect_1 { color: #fff; font: 80px Times New Roman, Times, seri
CSS3のTIPSなどのまとめ (2011/12/20)
CSSのプロファイラ！ → The CSS profilers are coming! (英語) (Bricss) CSS3+JSでパズルゲーム → Introduction to CSS3 Transitions (英語) (MSDN Blogs) CSS3だけで作る、マウスを乗せる方向によって異なるホバーアニメーション → Multi-direction hover (英語) (jsFiddle) JavaScriptは使わず、CSS3でコンテンツフィルターを実装する (かちびと.net) iOS5でCSS3の縦書きがサポートされましたがRubyについて注意が必要です (text.ssig33.com) CSS3で作るスピードメーター（実際にはCSS3のパフォーマンスのお話し）→ Pure CSS3 images? Hmm, maybe later (英語) (Performance
Tom Giannattasio | Designer + Founder
I lead a team working on design tools at InVision. I founded and built Macaw, which was acquired by InVision in 2015. I also worked at nclud designing products for Apple and Oracle. In 2012, I went to Twitter by way of an acquihire. I left shortly after to help MIT design and launch edX. I also speak, teach and write about design. I live with my beautiful wife and three kids outside DC. I design t
mb.CSSAnimate
Animate using CSS3 transition instead of the default jQuery.animate method. It provides a fallback to the default animate method if CSS3 is not supported by the browser. here is the call for this example: the "DIV" code: the function: var cH = $(window).height(); var cW = $(window).width(); $.fn.test = function() { var cH = $(window).height(); var cW = $(window).width(); return this.each(function(
[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
HostScore: Discover Web Hosting Services You Can Rely On
Trusted Web Host Recommendations for Every Website Real reviews, expert advice, and powerful tools to help you choose the best hosting. Hosting shouldn’t be a hassle. Let our data-driven recommendations and expert guidance help you find the best provider for your site. Review Web Hosting Services Understanding what makes a web host truly exceptional requires digging into the details. That’s where
Item Blur Effect with CSS3 and jQuery
Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects u
CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, please! This element will receive instant changes as you edit the CSS rules on the left. Enjoy! /* ------------------------------------------------------------- CSS3, Please! =================================================== Update: We recommend using Autoprefixer instead of CSS3Please. You can edit the underlined values in this css file, but don't worry about making sure the corresponding
[CSS3] Path 2.0 Flyout Menu using CSS - Pathを模したCSS3メニュー
[CSS3] Path 2.0 Flyout Menu using CSS – Pathを模したCSS3メニュー Pocket Tweet 新しいUIが素晴らしいという事で最近よく記事を目にするiPhoneアプリのPath。あれのメインメニューを模したものをCSS3で作ったというのがこれ。＋をクリックする事でメインメニューがズラっと出てきます。もっかい押せば収納。この動き自体はさほど新しいものではないんだけど実際にアプリの中で目にすると、デザイン性の高さだけでなく、手に持った時の機能性と表示エリアの節約など、なんかこうデザイナー的に色々とグっとくるわけですよ奥さん。これマネた作りのメニューって今後いくつか出てきそう。自分もマネっ子したいです！ 追記：似たような作例をもう1つ見つけたので追記。 Path 2.0 Flyout Menu using CSS Path menu in pure
cssAnimate
Problem Wanna use animations dynamically (e.g. in javascript games)? But how is it possible in a fast and clean way? There are just two possibilities: jQuery animations: Easy an short syntax, but they are too slow. Especially on mobile devices... CSS3 animations: Fast and flexible, but you have to write a lot. Solution So what could we do? Why can't we just use the great syntax of jQuery to create
プログラマにも書ける！画像を使わずCSS3でつくる今風のタブ＋ツールバー
TwitMgr (閉鎖済) のリニューアルに際して、今風のタブとツールバーを CSS3 だけで書いたので、その内容を順を追って説明してみます。 完成品 こんな感じのタブとツールバーを、CSS 3 だけで書いていきます。 マークアップ 実際の TwitMgr で使ってるものとは違いますが、説明の都合上 HTML は下記のようなマークアップで行います。まだ何も CSS を適用していない状態なので、何がなにやらという状態ですね。 <div class="tab selected">フォローしている</div> <div class="tab">フォローされている</div> <div class="toolbar"> <ul class="pager"> <li class="button enable">1</li> <li class="button enable">2</li> <li c
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queries
[Presentation] reveal.js - CSS3とJSで作られたスライドショー
[CSS3] An Ultimate CSS3 Generator List - CSS3に関するオンラインツールまとめ
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
http://www.wabbaly.com/showcase-11-examples-html-5-parallax-scroll-effect/
ピュアCSSなソーシャルサイトのログインボタン:phpspot開発日誌