11 Haziran 2015
minimalcoding
2158 0

Css ile özel Select Box Yapımı

Herkes bilir ki tarayıcıların yorumlamış olduğu select elementlerinin görünümü son derece kötüdür. Her ne kadar bu yapıyı düzeltmek  için javascript eklentileri kullanılsada işin back-end kısmında bazen sorunlar çıkabilir , bu yüzden select elementini native kullanmak daha yerinde olacaktır. Şimdi CSS ile Select elementinin nasıl stillendirileceğine göz atalım.

Devamı

Devamı
10 Haziran 2015
minimalcoding
2147 0

Javascript ile Kutu (div) Boyutlarını Eşitleme

Bir çok Front-End Developer’ın karşılaşmış olduğu sorunlardan bir tanesi içerik girişi yapılmış divlerin boy orantılarının birbirinden farklık göstermesidir. Tasarımcı metin alanlarının hepsinin eşit olacağını hayal eder ve ortaya yan yana sıralanmış eşit uzunlukta aynı karakter sayısına sahip kutular oluşturur, ama bu kutuların içerisine gerçek içerikler girilmeye başlandığında hayal edilen ile gerçekleşen yapı aynı değildir,uzunlu kısalı kutular tasarım bütünlüğünden ve görselliğinden artık kopmuş , tasarımdaki güzelliği yansıtamaz hale gelmiş ve sonunda mutusuz bir müşteri profili orataya çıkmıştır. Akla ilk gelen çözümlerden bir tanesi ; kutu boylarına eşit uzunluk verip ( height:150px) taşma alanlarını  gizlemek (overflow:hidden)  gelebilir ama buda kullanıcılara anlamsız yerde kalan içerikler oluşturacaktır, ikinci yöntem sabit karakter sınırlaması; yani bu div içine max karekter basmak olacaktır, sonuç ilk yöntem ile aynı, anlamsız içerik. Peki ya çözüm?.. Devamı

Devamı
9 Haziran 2015
minimalcoding
1271 0

Css3 Translate Yöntemi ile Yazıları Kutu içine Hizalama

Css3 transform:translate yöntemi, x ve y ekseni için verilen parametelere göre konumlandırma işlemi gerçekleştirmektedir. Biz bu yazımızda kullanmayı sıklıkla tercih ettiğimiz yazıları div içine yatay hizalama, dikey hizalama ve hem dikey hem yatay hizalama yönteminden bahsedeceğiz tabi bunları transform:translate olmadan da yapmak mümkün. CSS3 image hover effect adlı yazımızda da bu yöntemi kullanmıştık , şimdi bu yapıyı tek başına inceleyelim. Devamı

Devamı
7 Haziran 2015
minimalcoding
1734 0

Css3 image Hover Effect

Bugun sizlerle içinde hem SASS hemde CSS dosyasını barındıran güzel bir CSS image hover effect uygulaması paylaşmak istedik umarız uygulamalarınızda kullana bileceğiniz güzel bir çalışma olmuştur. Yazının sonunda hem uygulama yapısı hemde download linki mevcuttur.  Devamı

Devamı
5 Haziran 2015
minimalcoding
1374 0

Css3 Geçiş Efektleri (CSS3 Transitions)

CSS3 Transitions belirli bir süre boyunca bir durumdan diğerine dönüşüm işlemleri için kullanılan bir özelliktir. Bilindiği gibi Css ile bu işlemleri anlık olarak yapabiliyorduk.Bir link yapısını ele alacak olursak “a” tagının rengini turuncu olarak ayarladığımızı düşünelim hover hali için de siyah olsun, bu yapıda linkin üzerine gelindiğinde turuncudan, siyaha olan geçiş direk (anlık) olacaktır.Eğer ki belli bir zaman aralığı koyarak daha yumuşak bir geçiş elde etmek isteseydik kullanacak olduğumuz yapı CSS3 Transitions olacaktı. Şimdi bu yapıyı ve özelliklerini inceleyelim.

Devamı

Devamı
4 Haziran 2015
minimalcoding
1094 0

İnternet Explorer 10 için Özel Css Tanımlaması Yapmak (IE 10 Hacks)

Daha önceki konularımızda İnternet explorer versiyonları için koşullu ifade yöntemiyle özel CSS tanımla yapısını paylaşmıştık. Bu koşullu yapılar İnternet explorer 10 da  kalksa da bazen özel durumlar için CSS tanımlamarı yapmak gerekebilir. Bir kaç satır Javascript kodu ve CSS tanımlamasıyla bunu yapmak son derece basit, şimdi nasıl yapıldığını bir uygulamayla daha yakından inceleyelim… Devamı

Devamı
3 Haziran 2015
minimalcoding
1298 0

Css3 border-radius ile Yuvarlak Köşeli Kutular Oluşturmak.

“border-radius” özelliği CSS 3.0 ile gelen güzel özelliklerden bir tanesi, bu özellik sayesinde  örneğin bir img tagına bir div e ya da form elemanlarından inputa  kısaca Html elementlerimize yuvarlak köşeli olma özelliğini ekleyebiliyoruz. Tasarımcılar arasında da giderek artan bu tasarım modeli  border-radius özelliği ile  html’e aktarmak kabus olmaktan çıkıyor. Tabi tarayıcı desteklerini de göz ardı etmemek gerekiyor.  Devamı

Devamı