news-list-animated

CSS ile Açılıp Kapanabilen Haber Kutucukları

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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


Adobewordpress gururla sunar : “iPhone Mesajlar Ekranı”

iphone-mesajlar-css-html
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ı

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Yeni sekmede açılan bağlantılar nasıl özelleştirilir?

css-newtabWeb sayfanızda kullandığınız dış bağlantıları özelleştirmeniz, kullanıcılarınızı ilgili linke tıkladıklarında yeni bir sekme açılacağına dair uyarmanızı sağlar. Bu tip küçük hatırlatmalar kullanıcı deneyimi seviyenizi arttırır ve takipçilerinizde farkındalık yaratır.

Peki böylesine bir işlemi yaparken sitenizde daha önceleri kullandığınız yüzlerce dış bağlantıyı da tetiklemek, bütün linkleri tek tek düzenlemek zor olmaz mı? Evet, ancak CSS‘in attribute selectorü sayesinde bu işlemi yapmak çocuk oyuncağı.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

cssgram

CSSGram ile Resimlerinize Instagram Filtresi Ekleyin

CSS‘in filtrelerine üzerine bolca konuştuk. Popüler tarayıcıların neredeyse tamamının da destek vermesinden sonra CSS Filter yapısı kullanılarak yepyeni kütüphaneler oluşturuldu. Bugün size bu filtre kütüphanelerinden biri olan CSSGram’ı tanıtacağız. İsminden de anlaşılacağı gibi bu kütüphane resimlerinize Instagram filtresi eklemenizi sağlıyor. Hem de sadece CSS ile!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS Değişkenlere “Merhaba” Deyin!

css-variablesArtık hiçbir kütüphaneye ihtiyaç duymadan CSS içerisinde de kendi değişkenlerinizi tanımlayabileceksiniz.

Arayüz tasarımcılarının en büyük kabuslarından biri de hem sayıca hem de satır kod satırı açısından büyüyen CSS dosyalarıdır. Hal böyleyken yardımımıza yetişenler SASS ve LESS gibi dinamik derleme yapan kütüphaneler oldu. Şimdi ise sırada CSS içerisinde değişken tanımlamak var. (daha&helliip;)

Devamını Oku

CSS ile Blend Mode

css-blend-modeCSS‘in yeni elemanlarından biri de blend-mode tanımı. Özellikle grafik tasarım programlarından aşina olduğumuz bu stil yapısı artık CSS tarafından da destekleniyor.

Bu özellik 2 farklı öğenin üstüste renkleri karıştırılmış bir halde kullanmamızı sağlıyor. Tabii bunun için kullanmamızı bekleyen onlarca seçenek mevcut. Hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Front-end Developer ne yapar? -Super Mario

marioFacebook 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ı, HTMLCSSJS 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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku