[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はの両端揃えをしてくれない！ とい... 続きを読む

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... 続きを読む