Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
これは便利！コピペで使える実用的な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
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
CSS（CSS3）のみでタブUI（ボタンアクティブ付き）を実装する方法。（Ver.2）｜BLACKFLAG
今年始めに紹介した、CSSのみでタブUIを作成する方法「CSS（CSS3）のみでタブUIを作ってみる。（Ver.1）」。 こちらの Ver.1 でも基本的なタブの動き（表示／非表示の切り替え）は実装できていましたが、タブボタンに対して、現在開いているアクティブ状態のボタンの見分けを付けることが実装できていなかったので、その部分を改善した、CSS（CSS3）のみでのタブUI実装方法 Ver.2 のご紹介。 まずは前回同様に動作サンプルから。 ※動作推奨環境はWebkitブラウザのSafariやChromeですが、CSS3アニメーション部分を除いた、タブの基本動作はFirefox等でもご確認いただけます。 CSS3 TAB【SAMPLE 01】 ≫アンカーリンクによって、うまく動作が見れない場合はこちらから（別ウィンドウで開きます） ３つのタブボタンをクリックすることで、その下にそれぞれのコン
[CSS]CSS3のプロパティを使用した次世代のタブナビゲーション
対応ブラウザも増えたCSS3のプロパティを使用して実装するタブナビゲーションのチュートリアルをMarcofolio.netから紹介します。 Sweet tabbed navigation using CSS3 demo 使用しているCSS3のプロパティは下記のとおりです。 rgba opacity text-shadow pseudo selectors rounded corners gradients box-shadow 画像やスクリプトを使用して同等のものを実装することは可能ですが、軽量でシンプルなコードで実装でき、変更も簡単にできるのが大きなポイントになります。 タブはリスト要素で、HTMLは下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul> <li><a href="#" ti
15 Amazing Examples Of CSS3 Form
15 Amazing Examples Of CSS3 Form by Vikas on April 19th, 2011 No Comments » Share Web Forms are very useful for collecting information from user. It should be creative, designer , purposeful and precise. HTML 5 and CSS 3 gives new collection of tag which revised online experience and functionality. It is easy to add web forms to your website using CSS 3 because CSS 3 getting a million of att
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ:phpspot開発日誌
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ。 当サイトでは色々とCSS3ボタンのエントリを紹介してきていますが、ここら辺でちょっとまとめてみました。 画像つくるのはめんどうだしCSS3でやっちゃおうという場合に参考にしてみて下さい。 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル iPhone風のボタン実装 ステップで学べるCSS3ボタンのデザインチュートリアル CSS3ボタンのデザインチュートリアル 綺麗にデザインされたCSS3ボタンのまとめ カラフルで美しいCSS3ボタン これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 デザインは微妙かもしれませんが、カーソルを合わせると背景が動くあたりテクニックとして覚えておくとよさそう CSS3だけで実現するクリックすると色の変わるボタン実装 クリックで色が変わります。
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
On/Off Flipswitch HTML5/CSS3 Generator - Proto.io
新着記事
http://www.designwalker.com/2010/05/css3.html