Basit Çubuk Grafikler Oluşturmak için 10 CSS Parçacığı

Web'de basit CSS çubuk grafikleri oluşturmanın bir yolunu mu arıyorsunuz? Tamamı CSS'de tasarlanmış ücretsiz, açık kaynaklı çubuk grafiklerle dolu olduğu için bu koleksiyon kesinlikle yardımcı olacaktır.

Bu grafiklerin çoğu, ekstra CSS animasyonları ve gradyan efektleriyle güçlü bir etki yaratıyor. Ancak, verilerin konumlandırılmasını, boyutunu, şeklini ve tasarımını bile yeniden şekillendiren birkaç tane bulacaksınız. Şık bir çubuk grafik kullanıcı arayüzü arayan herhangi bir ön uç geliştirici için mükemmel koleksiyon.

1. Veri Tabloları

Bu sette güzel tasarlanmış ve çok iyi uygulanmış birkaç çizelge bulacaksınız. Geliştirici Kris Olszewski, ham verileri (bu durumda yer tutucu numaraları) paylaşan her bir çubuğun üst kısmıyla birlikte bu çubuk grafikler için çoğunlukla UX'e odaklandı.

Doğal olarak, her şey CSS'de çalışıyor ve bu kesinlikle etkileyici. Arka plan rengini belirli değerlere göre değiştirebileceğiniz dikey ve yatay çubuklar ve katmanlı çubuklar için şablonlar içerir.

Kolayca en sevdiğim setlerden biri, çünkü geliştiricilerin alması ve özelleştirmesi için çok fazla çeşitlilik sunuyor.

2. Pokemon Çubuk Grafiği

Bu tasarımın gerçek dünya düzeninde özellikle yararlı olacağını söyleyemem ama kesinlikle etkileyici.

Bu Pokemon tarzı çubuklar, web için yaratıcı bir grafik tasarımı sunar. Her çubuk, bireysel Pokemon'un gözleri için vektör öğeleriyle birlikte belirli bir renk şemasına dayanır.

Her biri bir vurgulu animasyon efektine sahiptir, böylece bunu istediğiniz geçişlere uyacak şekilde yeniden şekillendirebilirsiniz. Ve bu yaratıkları başka hayvanlara dönüştürmek istiyorsanız, aynı şablonu değiştirilmiş renklerle takip edebilirsiniz.

3. Hareketli Grafik

Kolay tüketim için görsel verileri görüntülemek için çubuk grafikler kullanılır. Bu, hem görsel öğelerin hem de ham verilerin dahil edilmesi gerektiği anlamına gelir.

Her çubuğun üst kısmında yüzde etiketlerini kullanan bu grafikte gerçekten sevdiğim bir şey var. Bir açıklama veya herhangi bir X/Y etiketi içermez, ancak bunları eklemek zor olmayacaktır.

Bence en etkileyici kısım, her şeyin CSS'den nasıl geçtiği. Animasyonlar ve yüzde metni, CSS özellikleri nedeniyle görünür. Çılgın şeyler!

4. Minimalist Tablo

Basit ve kullanımı kolay, web'i süpüren minimalist çılgınlığı en iyi şekilde tanımlar. Minimalizm, duyarlı web siteleri veya yoğun renk şemaları gerektirmeyen daha basit düzenler için genellikle en iyi seçimdir.

Ve bu çubuk grafikle, istediğiniz herhangi bir açık renge uyacak şekilde verileri yeniden biçimlendirebilirsiniz.

Ölçümleri belirtmek için rastgele arka plan satırları kullanır ve verileri netleştirmek için Y eksenine etiketler bile ekleyebilirsiniz.

5. Saf CSS Renk Çubukları

CSS gradyanları web'e çok şey katar ve bu çubuk grafik, gradyanların eylem halindeki örneklerinden sadece bir tanesidir.

Her çubuk, biraz eski okul hissi veren ancak harika görünen klasik web 2.0 gradyanlarını kullanır. Tasarımın tamamı Sass kodu üzerinde çalışır ve animasyon gecikmesini, çubuk boyutlarını ve toplam grafik yüksekliğini ayarlamak için değişkenleri kullanır.

Renkleri düzenlemek için Sass/SCSS üzerinden çalışmanız veya ham CSS'de derlemek için CodePen kullanmanız gerekir. Ama aşırı karmaşık bir grafik değil, bu yüzden bu çok fazla sorun olmamalı.

6. Kademeli Yatay Çubuklar

Doğrusal animasyonlar benim favorilerimden bazıları çünkü çok çabuk dikkat çekiyorlar. Bu kalemde, her bir çubuğun birbiri ardına görüntüye yüklendiği bir doğrusal animasyon örneği göreceksiniz.

Yatay olarak tasarlanmıştır, böylece çubuklar ekran boyunca yüklenir ve çubuk grafiğin içinde etiketler içerir. Bu şekilde, toplam "beceri seviyesi" ölçümü X eksenini takip eder ve dikey olarak daha fazla beceri eklemek için yer bırakır.

Gördüğüm daha temiz çubuk grafiklerden biri ve beceri tabanlı herhangi bir portföy web sitesinde harika bir şekilde çalışabilir.

7. Duyarlı Çubuk Grafik

Her modern web sitesi, tüm cihazlara uyum sağlamak için gerçekten duyarlı olmalıdır. Ancak bazı unsurlara yanıt vermek diğerlerinden daha zordur.

Sekmeler, büyük tablolar ve grafikler karmaşık örneklerdir. Bu duyarlı grafik, daha küçük ekranlarda mükemmel bir iş çıkarıyor. Çubuklar arasındaki toplam boyutun ve boşluğun çok ötesinde yeniden düzenlenmez.

Daha küçük ekranlarda, çubuk öğeleri sıkışık ve okunması neredeyse imkansız olabilir. Ancak çoğunlukla, bu duyarlı stil harika ve statik grafikler için mükemmel bir alternatif.

8. Günlük CSS Grafiği

Geliştiriciler, Daily CSS gibi zorluklarla becerilerini test etmeyi sever. Bu, her gün UI tasarımlarının resimlerini çeker ve geliştiricilerden bunları HTML/CSS'de yeniden oluşturmalarını ister.

Bunlardan birçoğunu CodePen'de bulacaksınız ve bu grafik bozulmamış bir örnektir.

Her çubuğa eklenmiş sadelik ve temiz animasyon efektleriyle tasarlanmıştır. Herhangi bir web sitesine kolayca uyum sağlayabilen tek renkli bir renk şeması izlediğinden bahsetmiyorum bile.

9. Şarap Envanteri Tablosu

Bir başka harika Daily CSS örneği, CSS ve bazı ustaca HTML becerileri kullanılarak oluşturulan bu bağ envanter grafiğidir.

Oldukça benzersiz bir fikir ve yalnızca CSS üzerinden çalışması daha da etkileyici. Grafiğin gerçek tasarımından ve tarayıcıda nasıl mükemmel bir şekilde işlendiğinden çok etkilendim.

Elbette bu çoğu web sitesinde işe yaramaz, ancak modern CSS'de nelerin mümkün olduğunun bir kanıtıdır.

10. Yalnızca CSS'ye Özel Yatay Beceriler

Çevrimiçi olarak çok sayıda beceri ölçüm çubuğu grafiği bulacaksınız, ancak Jed Trow'un bu eseri gerçek bir zevktir.

Tamamen duyarlı olacak şekilde tasarlanmıştır ve her ekranda kusursuz çalışır. Akıllı telefonlar için bu çubuk grafiği 320 piksele kadar yeniden boyutlandırabilirsiniz ve yine de tutarlılığını koruyacaktır.

Ayrıca, bu kalem, demonun altında tüm kaynak kodunu ve nasıl çalıştığını görebileceğiniz küçük bir eğitim bölümü içerir. Elbette, CodePen'in IDE'sinden kopyalayıp yapıştırabilirsiniz, ancak bir geliştiricinin işlemlerini bozduğunu görmek güzel.

Bu grafiklerin tümü benzersiz bir şey sunar, ancak ortak bir noktayı da paylaşırlar: saf CSS kodunun inanılmaz kullanımı.

Şunlar da hoşunuza gidebilir: 10 Açık Kaynak JavaScript Veri Tablosu Kitaplığı Dikkate Alınmaya Değer.