ghost-button-with-css

CSS ile Ghost Button nasıl hazırlanır?

Günümüz web tasarımı trendlerinden biri de Türkçe karşılığıyla hayalet butonlar.

Literatüre göre ghost button, web sayfalarının birincil aksiyonuna kullanıcıları taşımakla ilişkilendirilmiş. Ayrıca çizgisel ve şık bir tasarıma sahip bu butonlar sitenizin cazibesini arttırmanıza yardımcı olacaktır.

Bu dersimizde sizlerle birlikte CSS kullanarak iki adet ghost button tasarımı oluşturacağız.

Ö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

LESS nedir? Nasıl yazılır?

less-logoTasarımcının kodla haşır neşir olduğu ender dillerdendir CSS. Çoğu zaman keyif verici bir dil olsa da büyük projelerde, satır sayısı binleri aştığında can sıkıcı bir hal alabiliyor. Bunun sebebi de çoğu zaman aynı kodları birden fazla yerde kullanmak durumunda kalıyor olmamız.

En ufak bir yazı tipi veya renk değişikliği için bile özgün tanım yapmamız gerekiyor. Peki buna mecbur muyuz? Tabii ki hayır. (daha&helliip;)

Devamını Oku

CodePen’de Yapılmış En Etkileyici 10 Çalışma

codepen-logoAdobewordpress ailesi olarak CodePen‘i çok seviyoruz ve sık sık örneklerimizi orada oluşturuyoruz. Biz web geliştiriciler için hazırlanmış interaktif bir oyun sahası olan CodePen’de milyonlarca fikri barındırmakta. Ama bunlardan bazıları var ki yaratıcılık ve teknik bilginin birlikte tavan yaptığında ne sonuçlar doğurabileceğini bize gösteriyor.

Bugün sizler için CodePen’in en dikkat çekici 10 çalışmasını derledik. (daha&helliip;)

Devamını Oku

CSS ile Çoklu Arkaplan ve Animasyon

css-car-movementCSS3‘ü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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Güneş Tutulması

eclipse-cssCSS3 ile tasarlanmış ilgi çekici yapımları incelemeye devam ediyoruz. Bugün ‘Eclipse’, yani tutulma isimli çalışmayı sizlerle paylaşıyor olacağız.

Yuvarlak cisimlere verilen beyaz, sarı, kahverengi ve kırmızı gölgelerin hareket ettirilmesi sonucunda oluşan bu teknik hem çok yaratıcı hem de çok şık. Evet, büyük ihtimal her web sayfasında yer alabilecek türden bir tasarım değil ama CSS ve biraz pratik zeka ile web tarafında neler yapılabileceğini gösteren örnek bir çalışma.

Örneği görüntüleyerek başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku