12 Haziran 2015
minimalcoding
3579 0

Css ile Özel Checkbox ve Radio Buttons Yapımı

Bir önceki konumuzun (Css ile özel Select Box Yapımı) devamı olarak ,  Checkbox ve Radio buttons elementlerinide tarayıcıların yorumlamış olduğu kötü görüntüden kurtaralım istedik. Bu uygulamanın kaynak dosyasına içeriğin sonunda bulunan download linkine tıklayarak indirebilirsiniz içeriğinde SASS dosyasıda mevcuttur . Umarız yapacağınız uygulamalarda sizlere yardımcı olur.

Devamı

Devamı
11 Haziran 2015
minimalcoding
4958 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
3774 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
1979 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
2634 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
2145 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
1761 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ı