[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション | コリス

2014/02/26 64 users コリス Twitter 蝶番 ホバーエフェクト CSS

Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 実際の動作は、下記デモページでお楽しみください。 Chrome, SafariのWebkit系がよいです。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awe... 続きを読む

[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス

2013/10/15 276 users コリス htm CSS 見出し Safari

スタイルシートで文字を装飾すると、かっこいいのは英語が多いですが、今回紹介するのは日本語にもなかなかマッチするスタイルを紹介します。 実際のデモでは英語にスタイルが適用されていますが、オンラインで日本語に変更も可能です。 This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTM... 続きを読む

ブラウザ上で3Dモデルを設計、CSSで書き出せる『Tridiv』 | IDEA*IDEA

2013/08/22 126 users IDEA エデ CSS X-Wing プレビュー

これはアツいすね。3Dモデルをブラウザ上で設計、CSSで書き出せてしまいます。エディターよくできとる。 ↑ 対応ブラウザはWebkit系のみかな。 ↑ エディター画面。基本図形を組み合わせて作っていきます。 ↑ サンプルのX-Wing。がんばればこのぐらいいけるそうです。 ↑ 完成版のプレビュー。HTMLとCSSで書き出せます。 3Dプリンターもぐっと身近になってきましたからね・・・。こうしたエデ... 続きを読む

webkit系ブラウザ（Chrome/Safari）で両端揃えはできないの？jQueryで検証 | 株式会社LIG

2013/07/23 81 users jQuery justify 両端 Safari Chrome

p { width: 455px; text-align: justify; } Σ(ﾟдﾟlll)ガーン。 ガッタガタです。 同じChromeでも文字種によって揃い方が違う webkit系でも、text-align: justify;は効いているのです。下をご覧ください。 というわけで問題点は、 全角・半角が混じった際、webkit系のChromeやSafariはの両端揃えをしてくれない！ とい... 続きを読む

効果音が今にも聞こえてきそうな軽快で気持ちいいアニメーションのデモ | コリス

2013/06/06 20 users バウンド アニメーション コリス ボール テキスト

テキストの上をボールがはずんで、次々にカラーを変えたり、一つずつ表示するアニメーションのデモを紹介します。 デモページは、こちら。 Webkit系のブラウザでご覧ください。 Ball bouncing On Text デモは2種類用意されており、一つ目は背景グレーで、バウンドでカラーが変わるデモ。 デモのアニメーション：グレー版 二つ目は背景ブラックで、バウンドすると次々にテキストが表示されていき... 続きを読む

スマフォやタブレットなどのタッチデバイスでちょっと面白いサムネイルプレビューを与える -Kort | コリス

2012/10/29 25 users iPhone コリス ポパー Safari Chrome

デスクトップのホバーだけでなく、タッチデバイスのタッチとスワイプでもかっこいいアニメーションを伴ったサムネイル画像のプレビューコンセプトを紹介します。 Kort デモはiPhone, iPadなどのタッチデバイス、デスクトップだったらWebkit系のChrome, Safariでご覧ください。 オススメはタッチデバイスです。 各デモは、サムネイル画像をタッチすると複数の画像がアニメーションで広がる... 続きを読む

CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.js - かちびと.net

2012/09/05 20 users net jQuery チルト 画像 エフェクト

Webkit系で使えるFilter Effectsを 利用して、画像にチルトシフトっぽい エフェクトを与えられる、という jQueryのプラグインです。非常に 限られたシーンでしか利用できませ んがこういう加工がPs不要で出来る のは素敵ですね。 CSS3+jQueryで実装するチルトシフトエフェクトです。利用シーンは限られものの、ちょっと面白いです。 tiltShift.js こんな感じのチルト... 続きを読む

CSS3のanimationを使ったWebKit系対応の画像スライドの作り方｜Webpark

2012/09/03 25 users Webpark Animation Safari スライド

CSS3で追加されたanimationを使って何かしてみたかったので、画像を次々入れ替わって表示されるスライドを作ってみました。 まだまだ実用的ではないので、今回ChromeやSafariのWebKit系のみになりますのでご了承ください。 こういうのを何と呼べばいいのかよく分からなかったので、皆さんがイメージしているものと違ったらごめんなさい。 今回は別サーバーにサンプルを用意しました。 HTML... 続きを読む

[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン | コリス

2012/08/24 32 users コリス rAdio checked Name CSS

見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="na... 続きを読む

標準ブラウザ/OperaMobile/Firefox/Chromeの起動速度やページ表示性能を徹底比較 | あんどろいどスマート

2012/02/12 16 users レンダリングエンジン Firefox Chrome チップス

標準ブラウザ/OperaMobile/Firefox/Chromeの起動速度やページ表示性能を徹底比較2012年02月12日23時01分 スマホをさらにスマートに！キーワード：アプリ, チップス, 特集 　 Tweet Android用のブラウザの多くは、OSに内蔵されたWebKit系のレンダリングエンジンを利用してWebページを表示している。Android版Google Chromeも同じWeb... 続きを読む

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 : Web Design KOJIKA17

2011/06/04 1224 users クロスブラウザ Twitter Opera コーディング 解釈

Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことです... 続きを読む

[CSS]グラデーションのアニメーションが美しいフォームを実装するスタイルシート | コリス

2011/04/03 60 users コリス DOWNLOAD CSS グラデーション Safari

CSS3のグラデーションとアニメーションを使用しているため、対応ブラウザはWebkit系（Chrome, Safari）、Firefox4となります。テキストフィールドにフォーカスすると、グラデーションはアニメーションで美しく変化します。HTMLHTMLは、下記のようになっています。 スタイルシートやスクリプトはサイトの「Download」からダウンロードできるので、そちらでご確認ください。 続きを読む

[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集 | コリス

2010/10/25 492 users コリス Gloss font-face Font CSS

対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-... 続きを読む

[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法 | コリス

2010/04/26 354 users コリス jQuery JavaScr Opera CSS

対応ブラウザはFirefoxのMozilla系、Safari, ChromeのWebkit系、Operaの最新バージョンでサポートしています。 IEはIE9を含み、現在のところ非対応とのことです。 JavaScriptで実装 IEを含むすべてのブラウザに対応させたい場合は、これらの方法がおススメです。 jQueryでブラウザの幅を判別して、適したスタイルシートにします。 デモページ：JavaScr... 続きを読む