Tamamen CSS3 ile Üretilen Kung-fu 35 Grafik Kodlaması
Aşağıdaki grafiklere bakın, harika Photoshop doğru çalışıyor mu? Hayır, CSS3 tarafından yaratılmışlar. Evet onlar tamamen “çekilmiş” CSS3 tarafından! Yeterince CSS3 animasyonu gördüğümüzde bunların hepsinin CSS3'ün potansiyel bir Flash katili olarak yapabileceğini düşündük, ama yanılıyoruz. Geliştiriciler belki de animasyonun eğlencesini tatmin etmiyor, bu yüzden yine grafik editörünün dünyasına meydan okumak için CSS3'ün sınırlarını zorluyorlar.
Bu yazıyla birlikte CSS3 ile ilişkili olmayacağınız bir şeyi bile içeren 35 özenle hazırlanmış CSS3 grafikleri geliyor Apple iPhone, çizgi film karakteri Doraemon, ve daha çok sürpriz! Heck, hatta bazıları size nasıl elde edeceğinizi öğreten ayrıntılı bir öğretici ile birlikte gelir! Bu nedenle, CSS3 ve biraz HTML kullanarak grafik oluşturmayı öğrenme fırsatını kaçırmayın, haydi CSS3 ile yaramaz hale gelelim.!
Bu demoları Google Chrome'un Safari veya Geliştirici sürümünün en son sürümünü kullanarak izlemeniz kesinlikle önerilir. Demoların çoğu, en son Firefox ve Google Chrome sürümünü destekliyor..
RSS Yayını Simgesi
Sadece Hongkiat'tan gelen, CSS3 ile oluşturulmuş RSS Feed Icon! Bağlantı ile birlikte gerçekten öğrenebileceğiniz bir öğretici geliyor “çekmek” Tek bir görüntü kullanmadan RSS Akışı simgesi. CSS3 mucizesini kendi ellerinle yarat!
Apple iMac
Evet, gözlerim de buna inanamıyor, ama iMac “birleştirilmiş” tamamen CSS3 ile.
Apple Klavye
CSS3 ile oluşturulmuş Apple Klavye! Heck, klavye düğmelerine bile basılabilir.
Apple iPhone
Oh, bir şey daha: iPhoneCSS3.
Kiraz çiçeği
CSS3'ün gerçek sıkıntısı, bitkiler ve hayvanlar da dahil olmak üzere her şeyi inşa etmek için kullanılabiliyor olmasıdır.!
Kahve fincanı
Yorucu bir gün? Hadi en iyi Safari / Google Chrome ile servis edilen bir CSS3 kahvesini alalım.
Doraemon
Bu Doraemon, CSS3 uyumluluk testi ile ünlüdür. Internet Explorer 8'de veya altında deneyin ve iyi günler.
Meowww!
Şimdi tamamen kodla yapılmış bir kediye bakıyorsunuz! Çok yazık ki, CSS3 en azından şimdilik.
Mantar, Triforce, Poké topu, Kirby
“Bir inek olarak, bazı inek kreasyonları yaptım - Mario mantarı, Triforce, Pokéball ve Kirby. Dinozor tarayıcılarını kullananlar için, neye benzemesi gerektiğini gösteren bir ekran görüntüsü var..”
Nyan kedi
“81 DOM öğesi, 688 satır saf CSS ve ses döngüsü için bir JavaScript işlevi içerir. CSS'im CSSLint testinde başarısız oluyor ve bununla gerçekten gurur duyuyorum.”
desenler
CSS3 o kadar mükemmeldir ki, bu modeller gibi web tasarımı için temel bir varlık oluşturmak için de kullanılabilir..
Bonbon
BonBon, akılda tutulması gereken bir hedefle oluşturulmuş tatlı CSS3 düğmeleri: seksi görünümlü, mümkün olduğunca en minimalist işaretlemeye sahip, gerçekten esnek düğmeler.
iOS Simgeleri
Şaşırtıcı? Evet. Bu simgeler yuvarlatılmış köşeler, gölgeler, gradyanları, RGBA, sözde elemanları, ve dönüşümler, westciv'in aletleri ve Sınır Yarıçapı gibi bazı araçların yardımı ile.
Sosyal Medya Simgeleri
Web geliştiricisinin, CSS3 ile iPhone ve Doraemon inşa edebilmeleri için sosyal medya simgeleri oluşturmaması imkansızdır. Ve bu ikonları gerçekten iyi inşa ettiler.
Sosyal Medya Simgeleri
CSS3'ün kullanılabilir simgeler yaratma olasılıklarını gösteren başka bir sosyal medya ikonları kümesi.
tuhaf
“Tuhaf, sadece CSS ile yapılmış ücretsiz bir simge paketidir. Mümkün olduğu kadar az HTTP isteğine bağlı olan veya hiç resim kullanmaya gerek duymayan siteler ve web uygulamaları için oluşturuldu.”
GUI Simgeleri
Sadece CSS ve anlamsal HTML kullanarak 84 basit GUI simgeleri. Bu hala olarak kabul edilir “üretime hazır değil” simgeler, ama çok umut verici görünüyorlar.
Steve Jobs
Steve Jobs sadece dijital çağın simgesi değil aynı zamanda HTML5'i büyük ölçüde destekleyen liderdir..
Twitter başarısız balina
Twitter başarısız balinası, Internet Explorer 8 ya da altı haricinde sizi şaşırtmayacak.
umbrUI
Kullanıcı Arabirimi öğeleri CSS3 ile mümkün kılındı ve çok şık görünüyor!
Adobe Photoshop Logosu
Photoshop kullanmadan Photoshop'a bir hediye.
Android Logosu
Android oldukça basit şekillerden oluşuyor, ancak CSS3'ün avantajını açıklıyor: basit şeyler yapabilir ve sadece kodu kullanarak değil, Photoshop kullanarak istediğiniz şekilde değiştirebilirsiniz.
Apple Logosu
Retro Apple logosu, CSS3 kullanılarak sunuldu;.
Atari Logosu
Yıllar önce, Atari logosunun CSS3 kullanılarak yeniden yaratılacağını kim düşünebilirdi?.
BP Logosu
CSS3 ile basit bir logo kolayca yapılabilir. Burada gösterilen bazı logoların yer aldığı en iyi şey, denemeniz için sağlanan kodlardır.!
Dribbble logosu
Kullanıcı tarafından desteklenen ünlü vitrin sitesi Dribbble logosu CSS3 kullanılarak tanıtıldı.
Magento Logosu
Magento'nun logosu çizilmesi zor değil ama sonuç profesyonel görünüyor.
McDonald Logosu
CSS3'ü seviyorum!
Twitter Kuş
Mükemmel oran, yaratıcıya şapka ucu.
Windows Logosu
Windows logosu! Gerçekten harika görünüyor ve oluşturmak kolaydır!
Internet Explorer Logosu
Gerçekten harika yaratılış! Internet Explorer 8 veya altı dışındaki başlıca tarayıcılarda çalışır.
Google Chrome Logosu
Google Chrome’un yeni logosunu sevip sevmediğinizden emin değilim, ancak bu CSS3 Google Chrome logosu harika görünüyor!
Opera Logosu
Şimdi sizin için bir pratik: bu CSS3 parçası ile gerçek anlaşma arasındaki farklar nelerdir?
HTML5 Logosu
HTML5, CSS3 olmadan parlayamaz!
Volkswagen Logosu
Renk şeması dışında, bu CSS3 klonu orijinali ile aynı görünüyor.
yansıma
Logoların patlaması ve saf CSS3'ten yapılmış grafikler, CSS3 tarafından üretilen grafiklerin gerçek dünya üretim ortamındaki kullanılabilirliği hakkında büyük ölçüde tartışılan tartışmalara giriyor..
Genel olarak CSS3 grafiği iyi, ancak Özellikle tasarımı değiştirmeniz gerektiğinde veya sadece grafiği yeniden boyutlandırmanız gerektiğinde can sıkıcı olabilir, Ayrıca buradaki en büyük acı, teknolojinin henüz Internet Explorer gibi bazı tarayıcılar tarafından tam olarak desteklenmediği.
Ne düşünüyorsun? Sitenizde CSS3 ile yapılan grafiği kullanır mısınız? Mevcut dezavantajları için herhangi bir çözümünüz var mı? Düşüncelerinizi bize bildirin ve bir CSS3 grafiği hazırladıysanız bizimle paylaşın!
Daha
Gerçekten CSS3 ile bir şeyler yapmaya istekli misiniz? Doğru yere geldiniz! Aşağıda, CSS3'te ustalaşmaya giden yolda size büyük ölçüde yardımcı olmak için yazılmış rehberler ve öğreticiler bulunmaktadır..
- CSS3: Bir Ekmek Kırıntısı Gezinme Menüsü Oluştur
- CSS3: Bir RSS Beslemesi Logosu Oluşturma
- CSS3: Bir Arama Kutusu Oluştur
- CSS3: Başlangıç Kılavuzu
- CSS3 / HTML5: Web Sayfaları Oluştur
- CSS3 / HTML5: AJAX Tabanlı Bir İletişim Formu Oluşturun
