15 Harika HTML5 ve CSS3 Jeneratörler
HTML5 ve CSS3, öğrenmeye başlamak için harika dillerdir ve öğrenmeye başlamak için en iyi yollardan birinin, yalnızca derine dalmak ve kodu işlemek olduğunu düşünmüştüm. Muhtemelen söyleyebildiğiniz gibi, burası jeneratörlerin devreye girdiği yerdir. Bazı kodlar oluşturmak, onunla oynamak ve öğrenmek için harika bir yoldur.
Sadece bu değil, inanılmaz derecede faydalıdırlar çünkü çoğu zaman bir şeyleri tekrar tekrar yaptığımızı düşündüğümüz bir geliştirici veya tasarımcı olarak görürüz. Jeneratörler bu kenarı çıkarabilir ve her seferinde sizin için küçük şeyler yapabilirler.
Örnek olarak, hakkında yazdığım bir HTML5 şablonu oluşturan bir metin genişletici snippet'im var. İşte . Şimdi, metin genişletici harika ama her ihtiyacı çözmüyor ve bu durumda jeneratörler için büyük bir ihtiyaç var, bu yüzden en sevdiğim 20'yi bulmak için zamanımı aldım ve neden onları beğendiğimi açıkladım.
Bu listenin çoğunun CSS3 jeneratörler üzerinde odaklanacağını söyleyeceğim, çünkü bunlar sadece HTML5 jeneratörlerinden daha fazla talep görüyor ve nedenini öğreneceğiz. Not: web sitelerini açmak için resimlere tıklayın.
CSS3 Jeneratörler
Bu jeneratörler söz konusu olduğunda biraz olumsuz bir çağrışım var ve bunu bir tasarımcı ve geliştirici olarak kullanmanın olumsuz bir şey olmadığını söylemeliyim. Bu büyük bir zaman tasarrufu ve her dürüstlükte, kendi jeneratörlerini, sadece topluma yardım etmek istedikleri için yazan üç geliştiriciyi tanıyorum. Bu yüzden akılda tutmayın AOL tarafından yapılan bir tabuyu kullandığınız gibi değil; Bunlar, ihtiyaç duyduğumuz gibi gelen çok doğal ve organik jeneratörler. Öyleyse neden bazı servetleri paylaşmıyorsunuz? En sevdiğim birkaçını ve neden onlardan hoşlanabileceğinizi görelim.
Genel Jeneratörler
Bu bölüm, geniş spektrum ihtiyaçlarına ve kullanımlarına dikkat eden jeneratörler üzerinde odaklanacaktır. Bunlar ihtiyaç duyabileceğiniz hemen hemen her şeyi kapsayacaktır ya da bir jeneratörde isteyecektir, fakat tabiatları gereği daha detaylı olabilirler. Bu nedenle, bu makalede daha sonra belirli türler için çok fazla seçenek sunacağım.
CSS3.me
Bu benim bahsettiğim kesin jeneratörlerden biri. Bu, en sevdiğim tasarımcılardan biri tarafından oluşturuldu, Eric Hoffman ve inanılmaz. Çok basit, minimal ve şık, ama aynı zamanda çok fonksiyonel. Kenarlık yarıçapını, gölge düşürmeyi, degradeyi ve opaklığı değiştirme ve ayarlama olanağı verir - oldukça işlevseldir.
Not: Eric'in sitesine bir göz atın; Mobil ilk tasarımın harika bir örneğidir. Aynı zamanda tasarımcı Zendesk Bu yüzden o ürünü beğenirseniz ona biraz sevgi gönderin.
CSS3 Maker
Çoğu zaman insanlar sevdikleri jeneratörler bulacak ve onlarla yapışacaktır. Ve bu, daha önce bu jeneratörle ilgili olarak çalışmış olduğum bir müşteri ile olan şeydi. Kesinlikle ona aşıktı ve nedenini görebiliyorum - kesinlikle işlevsel. Şimdiye kadar yapılmış en güzel şey olmayabilir, ama tüm çanlar ve ıslıklara sahip gibi görünüyor.
Yazı tipi-yüz çalışması, animasyon çalışması, kutu gölgeleri, metin gölgeleri, metin döndürme, geçişler, degradeler, kenarlık yarıçapı ve çok daha fazlasını yapabilirsiniz. Genelde işaretlenmiş bir yerdeyim, ancak küçük jeneratörler kendi kategorilerinde ne kadar iyi olduklarından dolayı nadiren kullanıyorlar. Ama eğer ihtiyacınız varsa ve bir grup farklı şeye atlamaktan hoşlanmıyorsanız denemek için iyi bir jeneratör.
CSS3 Jeneratör
Bu, bir çok işlevsellik sağlayan iyi bir geneldir. Bunu seviyorum çünkü hoş ve kolay düşüşler ve kullanımı kolay işlevsellik. Tasarım da oldukça güzel. Ayrıca güzel bir kutu boyutu işlevselliği sunar. Bu, aşağıdakileri yapmak için büyük bir yetenek sunar: kenarlık yarıçapı, kutu gölgesi, metin gölgesi, RGBA, çoklu sütunlar, kutu boyutlandırma, anahat, geçişler, dönüşümler, seçiciler degradeler. Bence bu benim favorilerimden biri, çünkü tasarım ve kullanıcı arayüzü çok temiz. Bunu genellikle cssmaker'ı unuttuğumda kullanırım.
Düğme Jeneratörler
CSS3-Tricks Button Maker
Gün içinde gördüğüm ilk düğme üreticilerinden biri beni gerçekten rahatsız etti. Çok lineerdi, UI'ye sahip değildi (ironically) ve genel olarak korkunç tasarımlı bir ürün. Bir yan not olarak, daha sonra benzer bir şey hakkında konuşacağım, ama şimdilik bulduğum birini göstereceğim. css3tricks ve gerçekten hoş bir şey.
Burada atıfta bulunulan önemli noktalardan biri, neredeyse tamamen sürükle-bırak sürgüsü ile neredeyse tamamen kontrol edilebilir olması gerçeğidir. Sadece klavyeyi kullanarak el ile her şeyi girmek zorunda kalana kadar bekleyin ve hoş bir sürükleyici sürgü olmanı istersiniz. Son bir yan not olarak, CSS3 Tricks, bir sürü iyi organize edilmiş ve düşünceli içeriğe sahip harika bir sitedir.
CSS3 Button.net
Ve şimdi sadece atıfta bulunduğum jeneratere geliyoruz. Tasarım eksik olabilir, ama bir öncekinden çok daha fazla seçenek sunuyor; Bazen kullanım kolaylığı ister ve bazen jeneratörler söz konusu olduğunda ciddi bir tercihe ihtiyaç duyarsınız ve bu son ikisi de bu iki noktayı vurmuştur.
Sonuncusu gerçekten çok fazla ayrıntıya girmediyse de bu, birden fazla metin gölgesi, iç gölgeler, kenarlık ve yazı tipi renkleri ekleme olanağı sunuyor. İlk başta anlamaya çalışmak zor olabilir, ancak sadece birkaç dakika boyunca oynarsanız onu alacaksınız. Bunu, Windows kullanıcı arayüzüne alışkın olursanız en kullanışlı olanı buluyorum ve sonuç olarak, müşterilerim bana bu onların en sevdikleriydi, çünkü yıllar boyunca XP'de takılıp daha iyi bilmedikleri için. Ve şimdi eminim ki, bazılarınız merak ediyor, ama dürüstçe nasıl gidiyor? Bazı müşteriler, kendilerini etkiledikten sonra kendilerini öğrenmek için jeneratörler ile bağlantı kurmak istiyor. Genelde onları Lynda , TeamTreehouse ve iyi bir ölçü için bu jeneratörlerden birkaçı.
CSS3 Düğme Üreticisi
Bu gerçekten eğlenceli bir tanesi. Bu, işlemek için büyük bir düğme verir, bu da bir rad retro renkte. Daha sonra gölgeyi, kenarlığı, rengi manipüle edebilir ve bunun üzerine üzerinde gezinme düzenini düzenleme olanağına sahip olursunuz. Bunu seviyorum çünkü CSS'ye ilk girdiğimde bir süre sonra bulduğum ve gerçekten ne yapabileceğine dair bir fikir verdi. Sürükle ve bırak kaydırıcıları, dilleri yeni olan insanlar için harikadır, çünkü hemen ne yapabileceğinizi görebilirsiniz. Şimdi şunu söyleyeyim, özellikle de artık bunu kullanmıyorum - diğerlerinin ışığında, ama harika bir anı.
Sınır Görüntü ve Yarıçaplı Jeneratörler
Sınır-Görüntü
Belli bir görüntüyü alıp doğru kenarlık stilini bulmak için çoğaltıldığında border-image.com'u hiçbir şey atlatmaz. Yine de telif haklarını ihlal etmediğinizden ve bir başkasının resmini atıfta bulunmadan kullandığınızdan emin olun.
Ancak diyelim ki bir ok veya üçgen çizdiniz ve sitenizin sınırında veya bir öğenin sınırında bunu tekrarlamak için bir jeneratör bulmak istersiniz. Bu ihtiyaç söz konusu olduğunda, hiçbir şey bu siteden daha iyi değildir. Görüntünün sahip olduğu ofseti, boyutu ve tekrarlamayı değiştirebilirsiniz.
Siteye ulaşır ulaşmaz, yükledikleri örnek bir resim görürsünüz, ancak bu resmin gösterdiğinden çok daha faydalıdır. Arka plandaki tasarımları tekrar tekrar kullanmak istiyorum ve / veya Photoshop'un arka planının tamamını çoğaltmadan önce gerçek hızlı görünmesini istiyorum. Gerçekten, tekrarlanan görüntülerle ilgili herhangi bir şey için kullanabilirsiniz.
Sınır-Radius
Bu çok ve çok küçük bir araç, sıklıkla bulduğum çok pratik. Bununla birlikte, tek yapmanız gereken her köşede ne kadar yuvarlak kenar istediğinizi ayarlamaktır. Çok pratik, çok basit. Ve sonra ne tür bir tarayıcı önekinin dahil edilip edilmediğini kontrol et ve boom bitti. Tüm dürüstlükte güzel bir UI. Bilgisayar bilimi derslerinde, yaptığınız her şeyin basit ve işlevsel bir şey bulmaya çalıştığı testler olmalı.
CSS3 Gradyan Jeneratörleri
Renk Zilla Gradyan Editör
Bu nihai CSS3 Gradyan Editör olarak ve iyi haklar için faturalandırılır. Aslında, burada yer alacağım tek gradyan editörü olması harika. Bir ton özelliği vardır ve başlaması çok kolay ve kolaydır. Siyah ve mavi kalemleri biraz sürükleyin ve ne yaptığını hızlı bir şekilde göreceksiniz. Ayrıca bir tarayıcı düzenleyicisi de yaparlar Krom veya Firefox Bu, web üzerinde çalışan tasarımcılar için gerçekten yararlıdır. Ayrıca, ön ayarlarla bu oyunda oynamanızdan emin olun çünkü çoğu zaman bu olanlar yeterince iyidir - her kim onları seçerse harika bir iş çıkardı.
Tipografik Jeneratörler / Editörler
@fontface Jeneratör
Bu gerçekten ilginç bir üründür. Ne yapar, web'den seçtiğiniz ya da bilgisayarda sahip olabileceğiniz yazı tiplerini yüklemenizi ve daha sonra web üzerinde çalışmaya hazır bir çıktı dosyası vermenizi sağlar. Yine de birden fazla şey alırsınız, birkaç şey alırsınız. Seçtiğiniz yazı tipi verilen @ font-face özellikleri için CSS ve yazı tipini ve birçok kullanım biçimini görüntüleyen bir HTML dosyası alırsınız. Bu konuda tam olarak emin değilseniz bir yazı tipi tam potansiyelini kontrol etmek için gerçekten harika bir araçtır ve özellikle karar vermeden önce bu yazı tipiyle bir web sitesi oluşturmak için zamanınız yoksa.
Ters CSS3 Jeneratör
CSS3 Lütfen
Bu gerçekten büyüleyici bir üründür. Temel olarak, yapabilmeniz için size bir kutu seti ve bunun için tüm CSS'yi vermesi ve daha sonra bölümleri açma ve kapatma işlemlerini, ne yaptığını görmek için vermenizdir. Böylece, ne yaptığını öğrenmek için CSS3'ü tersine çevirebilir ve sonra ne yaptığınızı görebilirsiniz. Bu, ilgileniyorsanız CSS3'ü öğrenmenin harika bir yoludur, ancak jeneratörlerin biraz fazla karmaşık olduğunu düşünün.
CSS3 Bırak Gölge Jeneratörü
Webestools Shadow Generator
Bu jeneratörü çok seviyorum, çünkü diğer jeneratörler için değil, gölgelerin gölgeleriyle ilgili detay ve derinliklere giriyor. Şimdiye kadar tasarlanmış en iyi ürün gibi görünmeyebilir, ama kesinlikle harika. Gölgeler, gölgeler, gölgeleri ve ofsetleri manipüle etme, renkleri ayarlama ve kodla yapabileceğiniz hemen hemen her şeyi yapabilme özelliğine sahiptir - bunun yerine güzel bir sürükleme çubuğuyla. Ah, sürükleme çubuğunu nasıl seviyorum. Genel olarak gölge fikrinizin, kod yazmadan önce nasıl görünebileceğini görmeniz gerekiyorsa bunu kontrol edin.
HTML5 Jeneratörler
HTML5 Jeneratörleri gelmek zor bir şeydir ve bunun sebebi muhtemelen büyüktür. HTML5 Boilerplate olduğunu. Bundan bahsetmeyeceğiz, çünkü bu özellikle bir jeneratör değil, bu yüzden onu burada özetleyeceğim: Temelde halihazırda doldurulmuş ve çalışmaya hazır bir HTML5 şablonu. görmedin. Aslında oldukça harika. Bir çok insan, siteleri için başlangıç şablonu ve iyi bir sebep olarak kullanıyor. Şimdi jeneratörler için. Bir kaliteyi bulmak aslında oldukça zordur, fakat burada göstereceğim birkaçını bulmayı başardım - ve daha sonra bu makaledeki tüm konulara değinen daha genelleştirilmiş birkaç tane daha var.
Shikiryu HTML5 Üreticisi
Shikiryu's HTML5 Generator çok daha karmaşık. Blueprint (mixins, vb.) Ve süslü tipte bir şeyler yapmanıza izin veren özellikler ekleyebilirsiniz. Bu nedenle, aslında oldukça faydalıdır. Bunu seviyorum çünkü diğer seçeneklerden biraz daha semantik ve aynı zamanda insanların kullanmayı sevdiği gerçekten popüler üçüncü taraf uygulamalarını eklemenize izin veriyor.
HTML5 Generator'a geç
Bu ilginç bir jeneratör. Yaptıkları şey, site oluşturmak için hızlı ve kolay bir çerçeve oluşturmanızı sağlar, ancak HTML5 Boilerplate'in aksine, bizim çerçevemizde görmek istediklerimizi tam olarak seçmemizi sağlar. Aslında, daha fazla seçici veya teklif ettiğinden daha fazla ürüne ihtiyaç duyduğumda HTML5 Boilerplate yerine kod üretmek için bunu kullanmaya eğilimliydim. Şimdi, HTML5 Boilerplate'in yaptığı gibi, semantik işaretlemenin tüm güzel tasarlanmış ilkelerini tam olarak takip etmiyor, ancak yeterince iyi bir iş yapıyor ve gerçekten kullanmanız gerekiyorsa geri kalanını da yapabilirsiniz.
Quackit HTML5 Üreticisi
Bu bir adım geri adım atıyor ve size oldukça genel ve basit bir kod grubu vermek yerine, tüm bilgilerinizi girmenize izin veriyor. Bu gerçekten yararlı ve web sitelerine daha yeni olanları gerçekten çok sevdim. Özellikle sevdiler, keşfettim, o zaman sizin için CSS ile dilediğiniz gibi görünmesini sağlamak için standart temel HTML oluşturur. Öyleyse CSS öğreniyorsanız ve hala HTML'de biraz pusluysanız (bunun neden böyle olabileceğinden emin olmasa da), bunu bu şekilde yapabilirsiniz.
Ve bu onu tamamlayacak. Bu jeneratörler, hızlı ve çevik bir şekilde çalışmak için sadece şaşırtıcı, ancak girişimciler için onlar tasarımcılar için onlar. Ve bu benim görüşüme göre gerçekten harika. Sınır yarıçapı için hızlı bir fikriniz olsun (belki de tablandı mı?), Ya da bir gölge ya da renk gradyanı ya da blueprint içeren bir html5 şablonu - bunlar sizin için yapıldı. Dikkat et ki bu ayrıntılı bir liste değildi, ama favorilerimden ve geçmişte meslektaşlarımın kullandıklarımdan birkaçıydı. Bunların çoğunu kullanmaktan gerçekten zevk alıyorum ve umarım bunu da yaparsınız.