HTML ve CSS ile Animasyonlara Giriş | Ders 2

Uzun(çok uzun) bir aradan sonra sizlerle birlikteyim. Genellikle seri yazmayı pek sevmesem de animasyonlar özel ilgi alanım.

Son derste bir animasyon oluşturup bunu bir elemente atamıştık. Bu derste ise animasyonlarda objelere hareket vermeyi ve animasyonun farklı aşamalarında objeye farklı şeyler yaptırmayı göreceksiniz. Umarım önceki dersteki örnekleri silmemişsinizdir(Sildiyseniz veya hiç yapmadıysanız sizi şöyle alalım).

En başta şunu söyleyeyim. Aşağıdaki sınıfa çok fazla dokunmayacağız.

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: renk-degistir;
    animation-duration: 4s;
}

Bizim işimiz @keyframes renk-degistir sınıfıyla şimdi o sınıfın içini tamamen silin. Şimdi aşağıdaki satırları @keyframes renk-degistir sınıfına  yazın: Daha

Web Tasarımcı’nın Alet Çantası

Evet bu yazıda sizler için mutlaka kullanmanız gereken, hayatınızı daha güzel yapan 🙂 aletleri(fiziksel obje/uygulama/framework) derledim(bu sefer uzun olacak merak etmeyin).

Jacobs Monarch Stick Kahve

Kahve her an lazım olabilir sonuçta bu meslekte uyku yok mutlaka yanınızda iki tane bulundurun.

Kulaklık 

Kulaklık artık her insanın yanında bulunudrması gereken birşey; insanın ne zaman motivasyona ihtiyacı olacağı belli olmuyor 🙂

Notebook

Tamam evde bir masaüstü var ama mutlaka bir notebook edinmeniz lazım. Gerek işe giderken, gerek müşterinin yanında bir kişisel bilgisayar bulundurmanız sizin için bir artı.

Brackets Editor

Açıkçası IDE mi desem editor mü desem bilemedim. Fakat ne olursa olsun harika özellikleri var örneğin bir elementin id’sinin veya sınıfının üzerine gelip Cmd(Control) + E yaptığınız zaman sizi sınıf arama derdinden kurtarıp anında küçük bir alan içinde o sınıfı açıyor. Tek özelliği bu mu? Kesinlikle hayır. Öncelikle tamamen HTML, CSS ve JS ile yazılmış. Bitmedi(bal reklamı gibi oldu) ayrıca PSD to HTML’ciler için bulunmaz özellikleri var(daha sonra bir yazımda anlatıcam). Hâla bitmedi(bitiyor sabredin 🙂 ), birde açık kaynaklı bir Adobe ürünü, gerisini siz düşünün artık.
http://brackets.io/

Daha

Web Tasarımda Hayat Kurtaran Detaylar

Bu yazıda sizler için web tasarımda dikkat edilmesi gereken bazen hayat kurtaran bazen müşteri yüzü güldüren detayları derledim.

Renklerin gücünü kullan !

Kimilerinin hiç umrunda olmasa da aslında renklerin büyük bir önemi vardır. Örneğin Facebook, Twitter veya LinkedIn(pek sevmesem de) neden mavi rengini kullanır? Basit çünkü mavi renk gökyüzünün, geniş ufukların ve denizin simgesidir.

Daha