CSS3で完全に構築されたKung-fu 35グラフィックのコーディング

下のグラフィックを見てください、素晴らしいPhotoshopは正しく働きますか？いや、彼らはCSS3によって作成されています。はい、彼らは 完全に “描かれた” CSS3による! 十分なCSS3アニメーションを見たとき、それらはすべてCSS3がFlashキラーの可能性としてできることだと思いましたが、私たちは間違っています。開発者はおそらくアニメーションの楽しさに満足していないかもしれません。そのため、CSS3の限界を超えてグラフィックエディタの分野に挑戦するのです。.

この記事では、慎重に作成された35のCSS3グラフィックに、CSS3と関連のないものも含まれています。 アップルのiPhone, 漫画のキャラクター ドラえもん, そしてもっと驚き！一体、それらのうちの何人かはそれを達成する方法をあなたに教える詳細なチュートリアルが付属しています！ CSS3と少しのHTMLを使ってグラフィックを作成することを学ぶ絶好の機会をお見逃しなく。!

最新版のSafariまたはDeveloper版のGoogle Chromeを使用してこれらのデモを表示することを強くお勧めします。ほとんどのデモはFirefoxとGoogle Chromeの最新版をサポートしています.

RSSフィードアイコン

RSSフィードアイコンは、Hongkiat社のCSS3で構築されています。リンクと一緒にあなたが実際に学ぶことができるチュートリアルが付属しています “ドロー” 単一の画像も使用せずにRSSフィードアイコンを表示します。自分の手でCSS3の奇跡を作り出す!

アップルのiMac

うん私の目もそれを信じることはできませんが、それはiMacです “組み立てた” 純粋にCSS3を使って.

アップルキーボード

Apple KeyboardはCSS 3で構築されています。一体、キーボードのボタンも押すことができます.

アップルのiPhone

ああ、もう一つ：iPhoneCSS3.

桜の花

CSS3の本当の素晴らしさは、それが植物や動物を含むものを作るために使われることができるということです。!

コーヒーカップ

厄介な日？ Safari / Google Chromeで最高のCSS3コーヒーを飲みましょう.

ドラえもん

このドラえもんはCSS3の互換性テストで有名です。 Internet Explorer 8以下で試して、良い一日を過ごしてください.

Meowww!

今、あなたは完全にコードで作られた猫を見ています！残念ながらCSS3は効果音を出すことができない、少なくとも今のところ.

キノコ、トライフォース、ポケボール、Kirby

“オタクになって、私はいくつかのオタクの創造物を作りました - マリオキノコ、トライフォース、ポケボール、そしてカービー。恐竜ブラウザを使用している人のために、それがどのように見えるべきかのスクリーンショットがあります.”

ニャンキャット

“81個のDOM要素、688行のピュアCSS、そして1つのオーディオをループするためのJavaScript関数が含まれています。私のCSSはCSSLintテストに失敗し、私はこれを本当に誇りに思っています.”

パターン

CSS3は非常に優れているため、これらのパターンなど、Webデザインの基本的な資産を構築するためにも使用できます。.

ボンボン

BonBonは、目標を念頭に置いて作成された甘いCSS 3ボタンです。.

iOSのアイコン

すごい？はい。これらのアイコンはによって構築されています 丸い角, 影, グラデーション, RGBA, 疑似要素, そして 変換する, westcivのツールやBorder Radiusなどの特定のツールの助けを借りて.

ソーシャルメディアのアイコン

Web開発者がCSS3を使ってiPhoneやDoraemonを作成できるのであれば、ソーシャルメディアのアイコンを作成しないのは不可能です。そして、彼らは本当にうまくこれらのアイコンを作りました.

ソーシャルメディアのアイコン

使用可能なアイコンを作成する際のCSS3の可能性を示すソーシャルメディアアイコンのもう1つのセット.

独特の

“独特はCSSだけで作られた無料のアイコンパッケージです。できるだけ少ないHTTPリクエストに依存しているか、まったくイメージを使用する必要がないサイトおよびWebアプリケーション用に作成されました。.”

GUIアイコン

CSSとセマンティックHTMLだけを使った84のシンプルなGUIアイコン。これはまだと見なされます “非生産準備完了” アイコンは、しかし彼らは非常に有望に見えます.

スティーブ・ジョブズ

Steve Jobsはデジタル時代の象徴であるだけでなく、HTML5を大いに推進するリーダーでもあります.

Twitterの失敗クジラ

Twitterの失敗クジラがあなたを驚かせることに失敗することはありません、Internet Explorer 8以下を除いて.

アンブリー

ユーザーインターフェイス要素はCSS3で可能になりました、そしてそれは本当になめらかに見えます!

アドビフォトショップロゴ

Photoshopを使わずにPhotoshopへのオマージュ.

Androidのロゴ

Androidはかなり単純な形で作られていますが、CSS3の利点を説明しています。単純なものを作成し、Photoshopではなくコードだけを使用して好きなように変更できます。.

アップルロゴ

CSS3を使用して表示されたレトロなAppleロゴ、それが作成された時と同じくらい素晴らしい.

アタリのロゴ

何年も前に、AtariのロゴはCSS3を使用して再作成されると思っていたでしょう.

BPロゴ

シンプルなロゴはCSS3で簡単に作ることができます。ここで紹介されているこれらのロゴのいくつかで最も良いことはあなたが試すためにあなたに提供されるコードがあるということです!

ドリブルロゴ

有名なユーザーによるショーケースサイトDribbbleのロゴはCSS3を使用して展示されました.

マジェントロゴ

Magentoのロゴを描くのはそれほど難しくありませんが、結果はプロフェッショナルに見えます.

マクドナルドロゴ

私は大好きです 'CSS3!

Twitterの鳥

完璧なプロポーション、クリエイターへのハットチップ.

Windowsロゴ

Windowsロゴ！本当にすごく見えますし、作成も簡単です。!

Internet Explorerのロゴ

本当に素晴らしい創造物！ Internet Explorer 8以下を除く主要ブラウザで動作します.

Google Chromeロゴ

私はあなたがGoogle Chromeの新しいロゴを愛するかどうかわからないが、このCSS3 Google Chromeのロゴは素晴らしいですね!

オペラロゴ

今あなたのための練習は：このCSS3作品と本物との違いは何ですか?

HTML5ロゴ

HTML 5はCSS 3なしでは輝かない!

フォルクスワーゲンのロゴ

配色を除いて、このCSS3クローンは元のものと同一に見えます.

反射

純粋なCSS3で作られたロゴとグラフィックスのブームで、実世界のプロダクション環境におけるCSS3で作成されたグラフィックスの使いやすさについて大いに議論する議論が来ます.

一般にCSS3グラフィックは問題ありませんが、 特にデザインを変更したり、単にグラフィックのサイズを変更したりする必要がある場合は、いらいらすることがあります。, また、ここでの最大の問題は、そのテクノロジがInternet Explorerなどの特定のブラウザでまだ完全にサポートされていないことです。.

どう思いますか？あなたのサイトでCSS3で作られたグラフィックを使いますか？現在の欠点に対する解決策はありますか。あなたの考えを教えてください。あなたがCSS3グラフィックを焼いた場合は私たちと共有してください!

もっと

実際にCSS3で何かをしたいですか？あなたは正しい場所に来ました！以下は、CSS3をマスターするための道を大きく切り開くためのガイドとチュートリアルです。.

CSS3：パンくずリストナビゲーションメニューの作成
CSS3：RSSフィードのロゴを作成する
CSS3：検索ボックスを作成する
CSS3：ビギナーズガイド
CSS3 / HTML5：Webページを作成する
CSS3 / HTML5：AJAXベースの連絡フォームを作成する