Bugün sizlerle birlikte görsel ve metinlerinizi bir arada şık bir şekilde sergilemenizi sağlayacak haber kutucukları tasarlayacağız. Mobil cihaz desteği de bulunan bu tasarım Material Design ruhunu da taşımaktadır.
(daha&helliip;)animasyon
CSS ile Çoklu Arkaplan ve Animasyon
CSS3‘ün geliştirilen background tanımı sayesinde bir öğeye birden fazla arkaplan tanımlıyabiliyoruz. Bu bize özellikle transparan – png ve gif- görseller kullanmamız halinde çok büyük bir oyun sahası yaratıyor. Gelin bu tekniği kullanarak otoyolda ilerleyen bir araç animasyonu oluşturalım.
Bugün sizlerle sıradan bir div elemanına atayacağımız iki arkaplan ile küçük çaplı bir animasyon hazırlayacağız.
(daha&helliip;)
3D İllüstrasyonlarıyla Guillaume
Guillaume Kurkdjian yoğunlukla illüstrasyon ve animasyon üzerine çalışmalar yapan genç bir tasarımcı.
Özellikle yaptığı 3D animasyonlarla bütün dikkatleri üzerine toplayan Guillaume, bakış açısı, renk tercihleri ve bütünlük algısı ile tarzını ve ruhunu tasarımlarına yansıtıyor. Yaptığı etkileyici çalışmalardan bazıları sizlerle paylaşmak istedik. (daha&helliip;)
Google Material Design Örnekleri
Google‘ın Android Lollipop ile hayatımıza giren tasarım trendi üzerine konuşmaya devam ediyoruz. Bugün Material Design animasyon örneklerinden birkaç tanesine göz atacağız. Daha önce de “Instagram, Material Design ile Tasarlansaydı?” konusunda benzer bir animasyon izlemiştik.
İşte karşınızda birbirinden etkileyici Material Design örnekleri… (daha&helliip;)
Yıldızlarla Yükleniyor Animasyonu (Spinner)
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.
(daha&helliip;)
CSS3 ile Animasyonlu Resim Geçişi
HTML5 ve CSS3 teknolojilerinin gelişimi ile birlikte önceleri JavaScript desteği olmadan yanından bile geçemediğimiz tasarımları artık kolayca hazırlayabiliyoruz. Özellikle CSS3‘ün animatif tanımları, tasarımın web tarafında slider, galeri ve türevi görsel bazlı öğeleri popüler kılmakta.
Bu yazımızda sadece CSS3’ün animation özelliğiyle bir resim geçişi tasarımı hazırlyacağız.
(daha&helliip;)Sadece CSS ile Loading Animasyonu
CSS3‘ün animasyon desteği, önceleri GIF ve SWF gibi formatlarda hazırladığımız loading tasarımlarını birkaç satır kod ile yapılabilir kılıyor. Animasyon efektlerinin infinite (sonsuz) desteği sayesinde de bu küçük tasarımları loop (döngü) halinde kullanabiliyoruz.
Bu dersimizde sadece CSS ile şık bir loading animasyonu hazırlayacağız.
(daha&helliip;)HTML5 ile Arkaplanda Video!
Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.
HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.
Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.
(daha&helliip;)
After Effects Ders 2 : Timeline
After Effects derslerimizin ikincisiyle sizlerleyiz. Bu videomuzun konusu ‘timeline’. Paneli tanıdıktan sonra ilk opacity aracı ile bir örnek hazırlıyoruz. Sonrasında ise daha detaylı bir çalışma yapıp render alıyoruz.
WordPress Kullanıcılarının En Sık Karşılaştığı Hatalar ve Çözümleri
Sitenize Kolayca Slider Ekleyin
Photoshop’u Türkçe Yapma, Türkçeleştirme
Kolayca fotoğraflarınızın kalitesini arttırın!
CSS Renk İsimleri
Front-end Developer ne yapar? -Super Mario
Responsive Akordiyon (Collapsible)
Su İçme Hatırlatıcısı : Waterate
Sadece HTML5 ile Geliştirilmiş 20 En Etkileyici Oyun