CSS ve jQuery ile Sosyal Medya Paylaş Buton Barı

Uzun zamandır yazı giremiyorum sitenin kapanmasına kadar giden bir süreç oldu ama bu kadar emeğin boşa gitmemesi amacıyla geri döndüm. Hem başlangıç olması amacıyla hemde yararlı olacağını düşündüğüm bir css örneği paylaşmak istedim. Bu yazıda css ve jquery yardımıyla sayfada aşağıya inildiğinde ortaya çıkan yukarı çıkıldığında kaybolan bir sosyal medya paylaş buton barı örneği paylaşacağım. … Okumaya devam et CSS ve jQuery ile Sosyal Medya Paylaş Buton Barı

Sol Taraftan Açılıp Kapanabilen Drawer Menü

Android’in Marshmallow sürümüyle hayatımıza giren Materyal Tasarım trendinin en çok beğenilen özelliği olan drawer menü hakkında bir örnek hazırladım. Google’nin yeniden tasarladığı veya yeni projelerinde sıkça yer verdiği drawer menü oldukça kullanışlı bir menüdür. Tasarladığım menüyü adım adım yapılışını anlatarak sizlerle paylaşmak istedim, umarım beğenirsiniz. Menü oldukça kullanışlı ve modern bir yapıdadır. Çalışma mantığı ise hamburger görünümünde olan … Okumaya devam et Sol Taraftan Açılıp Kapanabilen Drawer Menü

Web geliştiricileri için en iyi 10 materyal tasarım kartları

Son yıllarda popüleritesi artan Google Material Design trendi hakkında yeni yazımın konusu en iyi 5 materyal tasarım kartı. Web tasarım blogları, dergiler tarafından yapılan ön görülerde kartların birkaç yıl içinde web ve mobil tasarımlarını domine edeceği yönünde. Nitekim büyük şirketler mobil ve web tasarımlarında bu tasarım trendine kaydığını görebiliyoruz. Örneğin twitter, facebook, google, pinterest vb gibi büyük şirketlerin … Okumaya devam et Web geliştiricileri için en iyi 10 materyal tasarım kartları

iOS’da input’a tanımlanan stilleri algılamama sorununun çözümü

Bu yazımda Web geliştiricilerin iOS Safari’de karşılaştıkları input’a tanımlanan stilleri algılamama sorunun çözümünden bahsettim. Çözümü aslında oldukça basit olmakla birlikte hem kendim için hemde bu sorunla karşılaşacaklara yardımcı olmak amacıyla bu yazıyı hazırladım. İşte iOS’da input’a tanımlanan stilleri algılamama sorununun çözümü; input { -webkit-appearance: none; -webkit-border-radius: 0; } Yukarıdaki yöntem sorununuzu çözmekle birlikte tavsiye ettiğim bir çözüm … Okumaya devam et iOS’da input’a tanımlanan stilleri algılamama sorununun çözümü

CSS ile Off-Canvas mobil menü nasıl yapılır

Bu yazımda mobil cihazlarda off-canvas yöntemiyle çalışan kullanışlı bir menü tasarlayacağız. Bunu yaparken herhangi bir css ve jquery kodu kullanacağız. Örnekte Kullandıklarım Örneğin çalışması için jquery kütüphanesini ve fontawesome ikonunu<head> tag’ı içine eklemeniz gerekmekte. FontAwesome Google Font (Open Sans, Roboto Slab) Html, CSS ve jQuery CSS ile Off-Canvas mobil menü nasıl yapılır Yapımı oldukça basittir ilk olarak … Okumaya devam et CSS ile Off-Canvas mobil menü nasıl yapılır

Bootstrap Carousel’e fade geçiş efekti nasıl verilir

Bu yazımda bootstrap’ın içinde bulunan Carousel’e fade geçiş efektinin nasıl verileceğinden bahsedeceğim. Lafı uzatmadan nasıl yapacağımızdan bahsedeyim. Herhangi bir javascript kodu kullanmanıza gerek yok ekleyeceğiniz tek şey mevcut bootstrap carousel kodlarına ek bir div class’ı dır. Bootstrap’ın varsayılan carousel koduna göz atmak için tıklayın. Bootstrap Carousel’e fade geçiş efektini eklemek istiyorsanız aşağıdaki kodları kullanın. HTML <div … Okumaya devam et Bootstrap Carousel’e fade geçiş efekti nasıl verilir

WordPress’te Bootstrap sayfalama kullanımı

Eğer kullandığınız tema bootstrap ile tasarlanmışsa wp-pagenavi eklentisini yüklemenize gerek yok. Bootstrap bir çok özelliği içinde bulundurduğu gibi pagination yani sayfalamayıda içinde bulunduruyor. Bizim yapmamız gereken tek şey bunu wordress’e entegre etmek. O işide bu yazı ile anlatacağım. İlk olarak bootstrap’ın pagination makalesine göz atın. Bootstrap Pagination Özellikler İlk ve son sayfa butonları (First, Last) İleri, geri … Okumaya devam et WordPress’te Bootstrap sayfalama kullanımı

SASS ile css önişlemcilerine giriş yapıyoruz

Sass hakkında yazılar yazmak istiyorum ama sürekli makalelerimin başında sass hakkında bilgi vermek yerine ilk olarak sass’a giriş niteliğinde bir yazı yazmanın daha yararlı olacağını düşündüm. Yazımda popüler css önişlemcilerinden, sass kurulumundan, sass ve scss farklılığından, sass ve scss ile yazılan söz dizimlerini css’e çevirmekten bahsettim. Popüler css önişlemcileri Günümüzde 3 adet popüler css önişlemcisi bulunmaktadır. Bunlar SASS, LESS ve Stylus’dur. Neden css … Okumaya devam et SASS ile css önişlemcilerine giriş yapıyoruz

CSS3: “text-overflow” alanına sığmayan metinler

Tasarımınızı yaparken sıkıntı çekebileceğiniz olaylardan birisi alanına sığmayan metinler olabiliyor css3 ile birlikte gelen text-overflow özelliği sayesinde alanına sığmayan metinlerin sonuna üç nokta koyabilirsiniz. text-overflow: ellipsis Alanın satır atlamaması için white-space: nowrap değerini kullanıyoruz demoda görüldüğü gibi yazı alandan taşıyor. Taşan yazının gözükmemesi içinde overflow: hidden değerini kullanıp alandan taşan yazıyı gizliyoruz. text-overflow: ellipsis değeri ile taşan alanın … Okumaya devam et CSS3: “text-overflow” alanına sığmayan metinler

CSS3 ve Sass ile hazırlanmış uzun gölgeli butonlar

Günümüzde uzun gölgeli tasarımların popüleritesi gittikçe artmakta. Bu uzun gölgeler birçok şekilde kullanılabilir  bu yazımda css3 ve sass ile hazırlanmış uzun gölgeli buton tasarımlarını paylaşacağım. Başlayalım! İcon’lar için fontawesome’yi tercih ettim css içinde scss kullandım. /* fontawesome */ [class*="fontawesome-"]:before { font-family: ‘FontAwesome’, sans-serif; } Şimdi, html ekleyelim. İlk olarak icons adında bir div açalım daha … Okumaya devam et CSS3 ve Sass ile hazırlanmış uzun gölgeli butonlar