Material Design ile birlikte kullanılan iconlar “Material Design Iconic Font” isimli proje altında bir araya getirildi. Toplamda 744 adet icon vektörel formatta, web tasarımında kullanabileceğiniz şekilde sizleri beklemekte. Diğer popüler icon setleri Glyphicon ve Font Awesome’dan farklı bir ruha sahip bu icon tasarımları günden güne daha da popülerleşecek gibi.
Sergey Kupletsky tarafından hazırlanan bu icon setini ücretsiz bir şekilde kullanabilirsiniz.
ZIP dosyası içerisinden çıkan css ve fonts klasörlerini web sayfanızın dizini içerisine atın. Daha sonra da web sitenizin <head></head> tanımları arasına aşağıdaki kodu ekleyin.
Strafa, HTML5up tarafından hazırlanmış şık ve minimalist bir tema. HTML5 ve CSS3 teknolojilerini kullanan Strafa beraberinde parallax scrolling trendini de içeriyor.
Bu hafta pastel renklerden oluşan responsive yapıdaki Strafa temasını sizlerle paylaşacağız.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.
Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.
JavaScript ile Yıldızlı Yükleniyor Animasyonu (Spinner)
Birbirinin kopyası yıldızların koordinatlarını yöneterek, perdeye giren ve bir süre sonra çıkan oyuncular misali görünürlükleriyle oynayarak, klasik canvas yapısını etkileyici bir şekilde kullanıyor Georgi’nin JavaScript kodları. Anlaşılır bir şekilde temiz ve sade olarak yazılmış kodlar, bizlere de tasarımı özgünleştirme şansı tanıyor.
Şimdi bu yapıyı oluşturmaya başlıyoruz.
HTML ve CSS Kodları
İhtiyaç duyacağımız içi boş bir canvas tanımı.
<canvas></canvas>
Beraberinde de bu canvas öğesini ekrana düzgün bir şekilde basmamızı sağlayacak CSS tanımları da şöyle :
var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), W = canvas.width = window.innerWidth, H = canvas.height = window.innerHeight, stars = [], circle = new Circle(W / 2, H / 2, 110), square = new Square(W / 2, H / 2);
function animateRect(square) var star, counter = 0; square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047)); square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047)); circle.angle++; stars.push(new Star(square.x, square.y, Math.random() * 360));
function moveStars() for (var i = 0; i < stars.length; i++) var star = stars[i]; if (star.scaleX <= 1) star.scaleX += .05; star.scaleY += .05;
if (star.alpha >= .05) star.alpha -= .015; else if (star.alpha < .1) stars.splice(stars[i], 1);
Flex, Templatemo tarafından hazırlanmış, şık ve büyük bir slider ile başlayıp minimalist yapıda devam eden responsive bir web şablonu. Trial, portfolio, our team ve contact gibi alanları da barındıran tasarım flat renkleri başarıyla taşıyor. Bootstrap’le de desteklenmiş olması, biz tasarımcıların yapacağı revizyonları hızlandırıyor.
Bu hafta scrollspy ve sticky header gibi güncel tasarım trendlerini başarılı bir şekilde uygulayan Flex isimli temayı sizler için inceliyor olacağız.
Aradığınız şık ve kullanışlı bir tasarım ise Agency sizin için doğru tercih olabilir!
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Sadece CSS kodlarıyla açılabilir (dropdown) ve mobil uyumlu menü hazırlanabilir mi? Birkaç sene öncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden öteye geçemezdi. Ancak bugün, CSS3’ün gelişen tanımlarıyla web tarafında neredeyse herşey mümkün!
Ayrıca aç/kapa düğmesiyle bu menüyü taşınabilir cihazlara özel stilize de edebiliyoruz. Evet, yanlış duymadınız. Aç/kapa işlemini bile sıradan bir checkbox öğesini selector gibi kullanarak CSS ile hazırlıyoruz.
Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menü hazırlayacağız. Sadece kod tarafında değil, önyüzde de basitliğe yönelerek bu tasarımı yapacağız.
HTML tarafında ihtiyaç duyacağımız kodları yazdıktan sonra menünün genel taslağını oluşturacağız. Klasik ul yapısı öyle bir stilize edilmeli ki mobil cihazlarda da sorunsuz çalışmalı. Öyleyse bir aç/kapa düğmesine, yani jQuery kodlarına ihtiyaç duymaz mıydık?
Burada da sıradan bir checkbox öğesini, değerine göre selector ile yakalanabilir hale getirip aç/kapa düğmesi olarak kullanacağız. Ve en sonunda da bütün bu yapıyı responsive, yani mobil uyumlu hale getireceğiz.
HTML kodlarımız ile başlayalım.
HTML Kodları
İlk olarak mobil tarafta aç/kapa işlemini yapacak checkbox öğesini ekleyelim.
HTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.
Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.
Hazırlayacağımız yapı bir çerçevenin içerisine 2 adet fotoğraf veya resim yükleyerek, bunları hiyerarşik olarak sıralayıp, yeri geldiğinde kapatıp açabilecek. Bu yüzden bol bol pozisyonlama da yapmış olacağız. Özetle işin büyük bir kısmı yine CSS3 tarafında ilerleyecek.
HTML Kodları
İlk olarak .karsilastirma isimli tablo yapıda bir division oluşturalım. İçerisine de birinci görseli eklemek için figure, ikinci görseli eklemek için de #ikincil ismindeki division öğesini ekleyelim. Altına da range inputumuzu ekleyerek kaydırma işleminin temelini oluşturalım.
Google’ın yeni nesil kullanıcı dostu tasarım prensipleri ile Twitter’ın CSS kütüphanesini bir arada kullanmaya ne dersiniz?
Material Design‘ı mobil ortamda yeni yeni görmeye başlamışken web tarafında işler daha hızlı ilerliyor. Web geliştiricileri günden güne yeni Material Design elemanları paylaşırken şimdi de Bootstrap tarafında hareketlenmeler yaşanmaya başladı. FezVrasta, GitHub sayfasında paylaştığı bu web önyüzüyle son günlerde fazlasıyla popüler.
Bootstrap Material Design
Bootstrap Material temasının detaylarını GitHub sayfasından takip edebilirsiniz. Download etmek veya önizlemek için de aşağıdaki bağlantıları kullanabilirsiniz.
Particles.JS, birden çok etkileşimli parçacığı oluşturan bir JavaScript kütüphanesi.
Kullanıcılarınızın ilgisini çekebilecek bu partikül yapısı birçok JavaScript kütüphanesinin aksine web sayfanızda ağır bir performans kaybına sebep olmuyor.
Vincent Garreau tarafından geliştirilen bu parçacık yapısını geliştirmek veya daha da özgünleştirmek istiyorsanız GitHub linkine göz atabilirsiniz.
HTML Kodları
Partiküller nerede gözükecek? Basit bir division elemanı ekleyelim.
<div id="particles-js"></div>
CSS Kodları
CSS tarafında bizi bekleyen bir tasarım yok. Ancak sayfa yapısındaki boşlukları kaldırıp canvas yapılarını blok tipe çevirmek işinizi kolaylaştıracaktır.
html,body margin:0;
canvas display:block; vertical-align:bottom;
#particles-js height:100%; background:#b61924
JS Kodları
Temel haliyle çalışması için particle.js isimli dosyanın web sayfanıza eklenmesi gerekiyor.
Bu partikül yapısı sizlere de moleküllerin yapısını anımsatmadı mı? Özellikle de parçalar arasındaki değişken etkileşim bilimsel içerikli web sayfaları için birebir.
Bu hafta daha detaylı ve sert renklere sahip bir temayla sizlerleyiz. Agency, isminden de anlaşılacağı gibi küçük iş tipleri ve ajanslar için kullanılabilecek şık bir web sunumu. Tek sayfalık yapıda hazırlanmış yapı gücünü ve fonksiyonelitesini Bootstrap’den alıyor.
Aradığınız şık ve kullanışlı bir tasarım ise Agency sizin için doğru tercih olabilir!
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Yapmamız gereken klasik paragraf yapımızın altına çizgi eklemek. Daha sonra da aynı yapıya after tanımıyla birkaç özellik daha ekleyeceğiz. Özetle işin büyük kısmı CSS tarafında. Hazırsanız yazı ayıracı yapımına dair bir örnekle başlayalım.
HTML Kodları
3 adet makalemiz olduğunu varsayalım.
<article>Burada bir makale olsun</article> <article>Bu da ikinci makale</article> <article>Bu son olsun.</article>
Şimdi de yazı ayıracını tasarlayalım.
CSS Kodları
İlk olarak yazıların altına border ekleyelim. Ayrıca :not(:last-of-type) tanımı sayesinde de tüm bu tasarımların son makaleye uygulanmasını engelliyoruz. Böylece altında başka yazı olmayan makaleye ayıraç eklemiyoruz.
jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?
Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.
jQuery ile aşağı scroll edildikçe büyüyen ve bulanıklaşan arkaplan
Bu işlemi yapmak için ilk olarak elemanımızı HTML’de tanımlamamız gerekiyor. Daha sonra CSS ile ekranın herbir kısmını kaplayıp arkaplanımızı uygulayacağız. İşin dinamikliğini de jQuery ile hazırlayacağız.
HTML ile başlayalım.
HTML Kodları
Sadece süreci ilerletebileceğimiz bir arkaplan öğesine ihtiyacımız var.
<div class="arkaplan"></div>
CSS Kodları
Body tanımınızda margin ve padding değerlerinin 0’a çekilmesi gerekiyor. Aksi halde bazı tarayıcılarda kenar boşlukları oluşabiliyor.
body padding:0; margin:0;
Şimdi de arkaplan ismini verdiğimiz division öğemizi tasarlayalım.
.arkaplan position:fixed; top:0; z-index:0; width:100%; padding-top:50%; background: url(ARKAPLAN_RESMI.jpg) center center no-repeat; transform:scale(1); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
Artık bu yapıyı dinamik hale getirebiliriz.
jQuery Kodları
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
Burada 2400 üst limitimiz oluyor. Bu değeri geçen yüksekliklerde arkaplan resmini büyütmeyi ve bulanıklaştırmayı kesiyoruz. Daha sonra da CSS’in ölçeklendirme ve filtre efektlerini kullanıyoruz.
Yorumlarınız?
Bu dinamik arkaplan tasarımımızla ilgili öneri ve yorumlarınızı bekliyoruz.
Verti, HTML5 ve CSS3 ile hazırlanmış minimalist yapıdaki bir web teması. Gri noise bir arkaplan üzerine açık renklerden kurulu tasarım büyük puntolu yazı ve köşeleri yumuşatılmış resimlerle şık bir görüntü oluşturuyor.
Sadece, hızlı ve geliştirilebilir bir tasarıma ihtiyacınız varsa HTML5up’ın hazırladığı Verti tam sizlik!
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Bootstrap ders serimizin ikinci adımıyla sizlerleyiz.
Adobewordpress ailesi olarak CSS3’ün Media Sorgularını daha önce konu edinmiştik. Şimdi aynı işlemi, yani Responsive Design’in liquid yapısını Bootstrap ile hazırlayacağız.
Bugün kütüphanenin sunduğu en büyük avantajı, 12’lik grid (ızgara) yapısını konuşacağız.
Bootstrap’in 12’lik grid yapısı
İlk olarak sık sık dillendirdiğimiz grid yapısının ne olduğuna bakalım.
Bootstrap, web sayfalarını yatay olarak 12 eşit parçaya bölünmüş olarak ele alıyor. Her bir grid 8.3% genişlik değerine sahip şekilde hazırlanıyor. Önyüz geliştiricisi de sadece class tanımlayarak tüm yapıyı hiç olmadığı kadar hızlı ve kolay bir şekilde düzenleyebiliyor. Bir örnekle devam edelim.
Şuan görüntülediğiniz sayfa da Bootstrap’in 12 lik grid sistemi ile hazırlanmıştır. Ekranın sağındaki ve solundaki gri alanlar 4 grid büyüklüğünde. Geriye kalan 8 grid ise okuduğunuz içerik kısmının ve sağ taraftaki menünün bulunduğu yeri barındırıyor.
Grid yapısı sitenizin iskelet yapısını oluşturmak konusunda size hız katıyor bu açık. Ancak en büyük yenilik bu değil. Izgara yapısı sayesinde web sayfanızın responsive (duyarlı) hale bürünmesini sağlayabilirsiniz. Nasıl mı? Acele etmeyin, öncesinde öğrenmemiz gereken birkaç özellik daha var.
Başlamadan önce
Bootstrap’in grid yapısı her türden taşınabilir cihaza uygun tasarımlar oluşturmanızı sağlıyor. Bunları kendi içinde extra small(xs),small medium(sm), medium(md) ve large(lg) devices olarak sıralıyor. Bu terimleri İngilizce paylaşma gereği duyduk. Çünkü hemen yanlarında parantez içerisinde verdiğimiz kısaltmalar büyük önem taşımakta.
Ayrıca ekranın her yerini kullanmak istiyorsanız container-fluid, sabit genişlikte çalışmak istiyorsanız container classlarını wrapper öğenize verebilirsiniz. Bunlar da Bootstrap’in grid yapısını destekleyen çerçeve tanımları.
Şimdi tanımların ne olduğu öğrenerek başlayalım.
İyi anlatıyorsunuz da nedir bu 12’lik grid yapısı?
En temeliyle başlıyoruz. Arkanıza yaslanın ve rahatlayın. Şuan bütün web tasarım dünyasını çalkalayan ve insanların zor olduğunu düşünerek araştırmaya çekindiği Bootstrap kütüphanesinin en önemli özelliğini öğrenmektesiniz. Bu cümle serisi bittiğinde siz de eşiği atlayan önyüz geliştiricilerinin arasında olacaksınız.
Yukarıda konuştuğumuz gibi Bootstrap xs, sm, md ve lg büyüklüğündeki cihazlara göre özel tasarımlar oluşturuyor. Örneğimizde medium, yani tabletler ve desktoplar üzerine konuşalım.
Yukarıdaki col-md-6 tanımlaması, medium (orta) boyutlardaki cihazlarda, ekranın 12’de 6’sını (yarısını) kaplayacak şekilde pozisyon alır. 12 tane grid olduğunu söylemiştik, burada 6 tanesini belirttik. Dolayısıyla bir div’e bu classı verdiğimizde öğe kendiliğinden %50 (6/12 grid) width değerini alacaktır.
Medium boyutlardaki cihazlar 992 pikselden büyük ekran genişliklerine sahiptir.
Üstteki 3 cümlelik paragraf Bootstrap’in en önemli yapısı olan grid sistemini özetlemektedir. An itibariyle tepeyi aştınız. Bundan sonrası sizler için yokuş aşağı. Tebrikler.
Örneklere geçmeden önce offset ve push kavramlarını öğrenelim.
Offset ve Push tanımları ne işe yarar?
Her iki tanım da ilgili elemanı dış kısmından ittirmenizi sağlar. Margin gibi düşünün. Margin değerini 50 piksel yaptığınız bir resim nasıl diğer öğelerden 50 piksel uzaklaşıyorsa da offset ve push tanımları da bu işi yapıyor.
Üstteki tanım sayesinde mavi bir div öğesini 8/12 olarak siteye ekliyoruz. Sağına ve soluna da 2’şer, toplamda 4 gridlik boşluk bırakıyoruz. Özetle 8 mavi ve 4 gri olmak üzere 12’lik gridimizi tamamlamış oluyoruz.
Bu seferde aynı mavi div öğesini sadece sol taraftan 4 gridlik ittiriyoruz. Böylece 8 mavi ve 4 gri olmak üzere 12’lik gridimizi tamamlıyoruz.
Bootstrap kullanırken grid içerisinde grid yapısını kullanabilirsiniz. Örneğin 12’lik bir wrapper tanımlayıp içerisinde 4’lük menü ve 8’lik içerik alanı yaratabilirsiniz.
Şimdi örneklerimizi çoğaltalım. Ve bunu canlı örneklerle destekleyelim.
Örneklendirmeler
İlk olarak 3 adet div’i col-xs-4 tanımıyla yanyana gelecek şekilde dizelim. Günün sonunda amaç 12’lik gridi elde etmek. Divleri renklendirmek dışında şunları yazdık :
Şimdi üstteki örneği, her türden cihazda farklı gözükecek şekilde tekrar hazırlayalım. Mavi alan menümüz olsun, kırmızı alan içeriğimiz, yeşil alan da footerımız olsun.
Mavi div (menü) için : Large ekranlarda col-lg-3, medium boyutlardaki ekranlarda col-md-3, small medium ekranlarda biraz büyüsün ve col-sm-4 olsun, cep telefonları ve türevi cihazlarda da tüm 12’lik gridi kaplasın col-xs-12.
Kırmızı div (içerik) için : Menüden kalan alanları 12’ye eşitleyelim. Large ekranlarda col-lg-9, medium boyutlardaki ekranlarda col-md-9, small medium ekranlarda biraz küçülsün ve col-sm-8 olsun, cep telefonları ve türevi cihazlarda da tüm 12’lik gridi kaplasın col-xs-12.
Yeşil div (footer) için : Her boyutta tam genişliğe sahip olmalı, ister tek tek tüm boyutlar için 12 tanımı yapın. İsterseniz de sadece col-md-12 ve col-xs-12 classlarını tanımlayarak tüm ekranlarda 12’lik boyutta olmasını sağlayın.
Bootstrap kullanırken display tanımları yapmakla da uğraşmıyoruz. Öğelerinizin her türden tasarımda görünürlük derecelerini sadece bir class ile yönetebiliyoruz. Burada tanımlarımız visible ve hidden olarak ayrılmakta. Normal haliyle verilmiş bir visible tanımı öğeyi her türden cihazda görünür kılar. Hidden ise onu gizler. Şimdi detaylandıralım.
visible-lg : Sadece large ekran genişliklerinde gözükür.
visible-md : Sadece medium ekran genişliklerinde gözükür.
visible-sm : Sadece small medium ekran genişliklerinde gözükür.
visible-xs : Sadece extra small ekran genişliklerinde gözükür.
hidden-lg : Sadece large ekran genişliklerinde gizlenir.
hidden-md : Sadece medium ekran genişliklerinde gizlenir.
hidden-sm : Sadece small medium ekran genişliklerinde gizlenir.
hidden-xs : Sadece extra small ekran genişliklerinde gizlenir.
