JavaScript ile fare hareketlerini takip etmek çok kolay. Geçtiğimiz sene bu fonksiyonu kullanarak fare pozisyonuna göre hareket eden yazı arka planı hazırlamıştık.
Bugün sizlerle birlikte yepyeni bir örnek, fare pozisyonuna göre dinamik bir şekilde hareket eden arkaplan resmi hazırlayacağız.
(daha&helliip;)
Bugün sizlerle birlikte çok şık ve eğlenceli bir mesaj panosu tasarımı yapacağız.
iPhone‘un şık ve kullanışlı mesajlaşma ekranı hem sadeliği hem de kolay kullanılabilir olması sebebiyle izini sürebileceğimiz başarılı tasarımlardan birisi. Peki bu yapıyı web ortamına nasıl aktaracağız? HTML5 ve CSS3‘ün güçlendirilmiş yeni teknikleri ve jQuery‘nin fonksiyonelitesiyle bu iş sandığınız kadar zor olmayabilir.
Adobewordpress gururla sunar : Karşınızda responsive yapıdaki iPhone mesajlar ekranı tasarımı
Bugün hazırlayacağımız flat renk şablonunu bir jQuery array içerisine yerleştirerek güzel bir renk paleti oluşturacağız. Sonrasında da birlikte oluşturacağımız bir fonksiyon ile web sitemizdeki tüm öğeler için kullanabileceğimiz mükemmel bir renk aracı hazırlayacağız.
Facebook sayfamızdan bir takipçimiz sormuş : “Front-end Developer ne iş yapar?” diye. Hakkaten ne iş yapar bu insanlar?
Özellikle serbest çalışma statüsündeki makalelerimize başlık atmak bizleri zorluyor. Dolayısıyla yer yer üstüne oturduğumuz yerlerden başlıklar türetmek ya da gelen soruları evirip çevirip yanıtlamak zorunda kalıyoruz. Bugün de konumuz web dünyasının son kullanıcıyla olan etkileşimini yöneten front-end geliştiricileri ile alakalı.
Front-end developer sadece önyüz yapar deyip bu makaleyi bitirmek isterdik. Ancak bu iş o kadar basit değil. Günümüzde iyi bir önyüz geliştiricisi olmak istiyorsanız birkaç stil kodu biliyor olmakla yetinmemeli, fonksiyonelite tarafında da kendinizi geliştirmelisiniz. Biraz da grafik tasarım..
Adobewordpress‘in Adobe eğitimleri sizi grafik tasarımcı, HTML–CSS–JS dersleri web tasarımcısı yapabilir. Bu iki yola da hakim olmanız da sizi tasarımcı yapar. Bunu müzisyenin de, ressamın da sanatçı diye nitelendirilmesiyle örneklendirebiliriz.
Makalemizin devamında “Front-end Developer ne yapar?” sorusunu hazırlayacağımız çalışmayla, aynı anda grafik tasarım ve web tasarımı yaparak örneklendireceğiz.
(daha&helliip;)
Günümüz sticky menü trendinin bir diğer örneği de ekran aşağı kaydırıldıkça stil değiştirerek ekranda sabit kalan menü örnekleri. Bu menü tipleri küçülen yapısıyla da ekranda daha az yer kaplamakta, bu da içerikleriniz için daha fazla alan demek oluyor.
Bugün sizlerle birlikte ekran aşağı kaydırıldığında küçülen bir menü örneği hazırlayacağız.
(daha&helliip;)
Özellikle haber sitelerinin vazgeçilmez öğesi olan akan anons pencereleri sizlere hem dinamik hem de kullanşlı bir sunum imkanı sağlıyor. Bu yapıları sizler de web sitenize kolayca eklemeniz için Adobewordpress ailesi olarak awNotices’i hazırladık.
(daha&helliip;)
Özellikle uzun yazıları barındıran blog sitelerinde kullanıcıya makalenin hangi aşamasında olduğunu göstermek faydalı olabilir. Böylece web sayfanızın kullanıcı etkileşimini de güçlendirebilirsiniz.
Bu makalemizde Brett Smith tarafından hazırlanmış, ekran aşağı scroll edildikçe dolan ve uzun yazıların okunma seviyesini gösteren bir bar oluşturacağız.
(daha&helliip;)
Web sayfanızdaki kırık linkleri jQuery desteğiyle bulabilir, bir başka görselle değiştirebilirsiniz. Böylece ziyaretçilerinizin çalışmayan resimlerle karşılamamış olursunuz. İnternette, web sayfanızdaki kırık görselleri size bildiren yüzlerce araç mevcut. Ancak bu işlemi birkaç satır kod yazarak daha hızlı ve kolay bir şekilde yönetebilirsiniz.
İşte karşınızda Adobewordpress tarafından geliştirilen bir diğer jQuery plugini : jQuery Image Fixer
(daha&helliip;)
Bu makalemizde CSS ve jQuery desteğiyle farenin sağ tuşuna basıldığında açılan bir menü tasarımı yapacağız. Bu menüyü diğerlerinden ayıran özelliği de ekrana eğik olarak gelmesi.
Bir zamanlar tipografik animasyonlarda bol bol gördüğümüz ‘öğeleri çevirerek kadraja alma’ tekniği temel anlamıyla bu tasarımda da yer almakta. Gelişen web teknolojileri sayesinde de bu tasarımı web tarafında oluşturmak gayet basit.
Örneği görüntüleyerek başlayabilirsiniz.
Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.
Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.
Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!
(daha&helliip;)
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
Photoshop ile Eskitme Efekti #2
Responsive Akordiyon (Collapsible)
iPhone’da “Mesajlara Girilmiyor” hatası nasıl çözülür?
Sadece CSS ile Slider Yapımı