10 Yararlı Materyal Tasarımı Kod Parçacığı

Materyal tasarımı çılgınlığı, web dünyasını kasıp kavuruyor. Her ay, çerçeveler veya özel UI kitleri kullanarak malzeme stili üzerinde çalışan yeni siteler buluyorum.

Ama bu kötü bir şey değil, tam tersi! Bu, Google'ın kendi tercih ettikleri tasarım dili olarak kabul ettiği kanıtlanmış trendlerle çalışarak tasarım sürecinizi basitleştirmenin bir yoludur.

Materyal tasarım stilinde büyükseniz, bu kod parçacıkları tam size göre. Bunlar, seçilebilecek çeşitli tasarımlar ve bileşenler sunan favorilerimden sadece 10'u.

Duyarlı Tablo

İşte benzersiz bir bükülme ile malzeme tasarım pasajı. Sergey Kupletsky tarafından oluşturulan bu duyarlı tablo, aslında malzeme tasarımı snippet'lerine yönelik diğer bağlantıları barındırıyor. Oldukça havalı!

Bu, doğal olarak malzeme tasarım teknikleri kullanılarak da oluşturulur, bu nedenle masa kendi düzeninize mükemmel şekilde uymalıdır. Ancak mobil tasarımın en zor kısmı, daha küçük ekranlarda çalışan tablolar yapmaktır.

Bence bu yöntem, üstesinden gelmenin en iyi yollarından biri. Kodunuz ayrıca temiz kalır, bu da tablonuzun boyutundan bağımsız olarak kodlamayı, temizlemeyi ve yönetmeyi çok kolaylaştırır.

Kart Kullanıcı Arayüzü Geçişleri

Geliştirici Ivan Villamil, bu çok benzersiz kart UI tasarımını oldukça çılgın animasyonlarla oluşturdu.

Sayfaya bir göz atın ve kartlardan herhangi birine tıklamayı deneyin. Kart içeriğinin kap üzerinde canlandırıldığı ve görünümde göründüğü benzersiz bir animasyon efekti elde edeceksiniz. Bir mobil uygulamada bulmayı umduğunuz, ancak web'e taşınmış bir şey gibi!

Animasyon efektleri kusursuz ve bugün internette ne kadar çok şey yapabileceğinizi gösteriyorlar. Bu birleşik web/mobil kullanıcı arayüzü için malzeme stilinden bahsetmiyorum bile.

Kompakt Giriş

Tasarımcı olarak geçirdiğim yıllar boyunca çok havalı giriş formları gördüm. Ancak bu çılgın tasarım, etkileşimli özellikleri ve benzersiz stilleri için pastayı alabilir.

Sağ üst köşedeki parlak pembe simgeye tıkladığınızda, sayfanın üzerinde görünen bir kayıt alanı göreceksiniz. Oldukça benzersiz ve gerçekten kullanılabilir bir arayüz oluşturuyor.

Yakalamak nedir? Bu, çok fazla JavaScript kullanır, bu nedenle kod açısından en temiz çözüm değildir. Ancak yine de kompakt özelliklerle tasarlamanın mükemmel bir örneği.

Animasyonu Doldur

Scott Kellum, sayfa yüklendiğinde otomatik olarak doldurulan bu ilgi çekici malzeme kartı düzenini geliştirdi. Bu, malzeme tasarım özelliklerini çalışırken görmek için her kartın üzerine gelebileceğiniz bir ızgarada gelişir.

Bunun doğrudan bir projede ne kadar faydalı olduğunu veya bundan ne kadar kazanabileceğinizi söyleyemem. Ancak bu, web için ızgara dışı tasarımı gösteren, malzeme tadında bir dokunuşla vurgulu animasyonları karıştıran eğlenceli bir snippet.

Malzeme BS4 Düğmeleri

Çevrimiçi olarak sunulan birçok Bootstrap şablonundan bazılarının malzeme tasarımı kullandığına inansanız iyi olur. Ve bu kalem, Bootstrap 4'te malzeme tasarımıyla yapabileceğiniz tüm harika şeyleri sergiliyor.

Gerçekten bu, Google'ın materyal diline yeniden şekillendirilmiş bir düğmeler koleksiyonudur. Ancak bunların tümü en yeni BS4 çerçevesinde çalışır, böylece bunları herhangi bir Bootstrap destekli sayfaya ekleyebilirsiniz.

Bootstrap konusunda ciddiyseniz, ne düşündüğünüzü görmek için en yeni sürüme bir göz atın. Her şey için bir temel olarak harika çalışıyor ve bu özellikle materyal siteler için geçerlidir.

Malzeme Tasarımı Seçim Menüsü

Açılır seçim menüleri, form tasarımında temel bir unsurdur. Kullanıcıların eyaletler, ülkeler, diller vb. gibi ilgili konularda bir avuç cevap arasından seçim yapmasına izin verir.

Bu malzeme tasarımı seçimi, ortak HTML seçim menüsünü tamamen yeni bir düzeye yükseltir.

Bir seçeneği belirlemek için tipik belge stiline güvenmez. Bunun yerine, jQuery'nin animasyonları ve seçim sürecini ele aldığı sırasız bir liste kullanır. Ve söylemeliyim ki, bu şey malzeme stilini çiviliyor.

Malzeme Gölgeleri

Google, malzeme belgelerinde derinlik için gölgeleri gerçekten zorlar. Dairelerin hepsinin kendi ayrı gölge efektlerine sahip olduğu bu kalemde göreceğiniz şey bu.

Gölgelerle, bazılarının üstte, bazılarının daha aşağıda görünmesi için sayfa öğelerine hiyerarşi atayabilirsiniz. Ekranda, özellikle dokunmatik ekranlarda kullanışlı olan bir boşluk yanılsaması yaratır.

Oldukça havalı bir efekt ve kesinlikle kendi projelerinizde kopyalayabileceğiniz bir şey.

Hava Durumu Kartı Kullanıcı Arayüzü

Geliştirici Thomas Vallez, saf HTML ve CSS üzerinde çalışan bu harika hava durumu kartını yarattı. Sayfa yükünde basit bir solma efekti kullanır, ancak buradaki gerçek güzellik malzeme tasarım stilidir.

Renklerden yazı tiplerine ve hatta hava durumu simgesine kadar her şey doğal malzeme stillerine güveniyor.

Bu şablonu alıp hemen hemen her tür kart düzeni için kullanabilirsiniz. Olağanüstü ve kesinlikle bu listedeki en basit projelerden biri.

Malzeme Sekmeleri

İşte malzeme tasarımı sekmeleri fikrine dayanan ilginç bir proje. Michael Richins, bu kalemi bazı temel JavaScript bilgileri ve Google'ın tasarım yönergeleri hakkında biraz bilgi sahibi olarak yarattı.

Sekmeler, Android akıllı telefonlar veya tabletler gibi diğer benzer cihazlarda beklediğiniz gibi çalışır. Bu şeyin sade vanilya JavaScript üzerinde çalıştığından bahsetmiyorum bile, bu yüzden asla jQuery veya bunun gibi şeyler için endişelenmenize gerek yok.

Sitenizde sekmeler arıyorsanız oldukça havalı bir efekt. Sayfanızla doğal olarak uyum sağlayıp sağlamadıklarını görmek için stilleri test ettiğinizden emin olun.

Yanıt Animasyonu'na tıklayın

Geliştirici Emmanuel Pilande, bu harika tepki efektini Google'ın materyal mikro etkileşimlerini kopyalamanın basit bir yolu olarak oluşturdu.

Efekti görmek için malzeme kartlarında herhangi bir yere tıklayın. Bunu, düğmelerden sayfa kapsayıcılarına veya giriş alanlarına kadar hemen hemen her şeye uygulayabilirsiniz.

Bazı JavaScript'lere dayanır, ancak herhangi bir projeye eklemek de kolaydır. Yani, o doğal malzeme görünümü için gidiyorsanız, bu kaydetmek için harika bir snippet.