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ı

Projelerinizde resimleri figure ve figcaption ile etiketleyin

HTML5 ile birlikte resimleri, çizimleri arama motorlarına belirtmek için figure ve figcaption etiketleri kullanılmaya başlandı. Figure etiketi img, svg (resim, çizim) gibi elemanları belirtmek için kullanılır, Figcaption ise figure etiketinin başlığını tanımlamamızı sağlar, örnek kullanımları aşağıdaki gibidir. Basit Kullanım <figure> <img src=”/macaque.jpg” alt=”Macaque in the trees” /> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href=”http://www.flickr.com/photos/rclark/”>Richard Clark</a></figcaption> … Okumaya devam et Projelerinizde resimleri figure ve figcaption ile etiketleyin

CSS ile hazırlanmış loading animasyonu (spinner)

Hazırlayacağınız projede “Yükleniyor” ibaresine ihtiyaç duyuyorsanız bu ihtiyacı gidermek içinde gif kullanmak istemiyorsanız bu örnek tam size göre. Harold Soto tarafından hazırlanmış bu örnekte 12 adet sadece css ile hazırlanmış loading animasyonu bulunmaktadır. Diğer örnekleri görmek için [button]Tıklayın[/button] [bilgi]Aşağıda paylaştığım örnek circle olarak işaretlenen spinner’dır.[/bilgi] Nasıl Yapılır? Html kodları ile başlayalım, sadece division ekliyoruz html kısmı bu kadar. <div … Okumaya devam et CSS ile hazırlanmış loading animasyonu (spinner)

Responsive açılır-kapanır menü örneği

Günümüzün mobil internet kullanımı en üst seviyeye çıkmış durumda.. Haliyle mobil tasarımda ön plana çıkıyor bende sizin için responsive açılır kapanır menü hazırladım.  Paylaşacağım bu menü örneği tüm mobil cihazlar için uygun görünüme bürünmektedir ayrıca bu menü wordpress stil yapısına uygun tasarlanmıştır. [button color=”btn-danger” size=”” link=”http://codepen.io/uckannet/pen/MwaxVw” icon=”” target=”true”]Detaylı Demo[/button] [button color=”btn-info” size=”” link=”http://codepen.io/uckannet/full/MwaxVw/” icon=”” target=”true”]Full … Okumaya devam et Responsive açılır-kapanır menü örneği

Google Material Design Ripple Efekti – jQuery

Bugün kü yazımda günümüzün popüler tasarım trendi google material design ile sıkça görmeye başladığımız fare etkileşimini konu alıyorum.  Makalemde dalganma efektini yaratmak jquery eklentisi yaratacağız. Google material design hakkında bilgi edinmek istiyorsanız tıklayın. [indir]Demo Downlaod[/indir] Dalgalanma Efekti nasıl yaratılır? 1. Web sayfamızda buton oluşturalım. <button>Tıklayın</button> 2. jQuery kütüphanesi ve oluşturacağız jQuery eklentisini web sayfamıza çağıralım. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script … Okumaya devam et Google Material Design Ripple Efekti – jQuery

WordPress Etiket Yöntemiyle Manşet Oluşturma Yöntemi

Merhaba bu yazımda sizlerle Türk kaynak bulunmadığı için etiket yöntemiyle  manşet oluşturacağız. Stil dosyalarından tutun, hiçbir işlem yapmadan kullanabiliceksiniz. [bilgi]Atıyorum featured diye etiket girildiğinde anasayfada manşet olarak o yazıyı göstereceğiz. [/bilgi] İlk olarak temanızın ana dizinine slider.php adında bir dosya oluşturalım.. Daha sonra index.php dosyasını açarak aşağıda ki kodu ekleyelim veya Slider’ın görünmesini istediğimiz yere ekliyoruz. … Okumaya devam et WordPress Etiket Yöntemiyle Manşet Oluşturma Yöntemi

Google Yapısal Veri Test Aracı Hataları: #1

Bugün, google yapısal veri test aracıyla sitemin arama motorları sonuçlarının en iyi şekilde olması için çalışırken böyle bir hatayla karşılaştım ve çözümü için araştırdım çözümünü bulur bulmaz da Türkçe bir kaynak yaratmak istedim.. İlerleyen günlerde veri test aracında karşılaştığım hataların çözümleri için bazı yazılarım olacaktır.. Google Yapısal Veri Test Aracı Çözümlenen Hata:  If this markup … Okumaya devam et Google Yapısal Veri Test Aracı Hataları: #1

CSS ile Form Tooltip Hazırlıyoruz

Bugün kü yazımızda hazırladığınız arayüzlerde kullanıcıların doldurulması gereken  formlar hakkında bilgi verici kelime ekleme gerekliliği oluşabiliyor bunun için css yardımıyla form tooptip örneği hazırlayacağız. Sizler bu örnek yardımıyla daha özgün içerikler oluşturabileceksiniz ve arayüzünüzü kullanıcı deneyimini geliştirebileceksiniz. [indir]Demo[/indir] CSS ile Form Tooltip Nasıl Yapılır? İlk html yapımızı hazırlayalım.. “Form” divi ile örneğimizi içerisine alıyoruz daha sonra … Okumaya devam et CSS ile Form Tooltip Hazırlıyoruz

WordPress Sosyal Medya Paylaş Butonu

Bugün kü makalemizin konusu sosyal medya.. Günümüzde kullanımı artan bazı sosyal medya sitelerinde yazılarınızı paylaşmanız için bir içerik hazırladım ve bunu sizlerle paylaşıyorum.. [indir]Demo[/indir] HTML yapımız aşağıda ki şekildedir..  Temanızın single.php dosyasında görünmesini istediğiniz yere eklemeniz gerekmektedir. <ul class="btn-share clearfix"> <li><a href="#" class="button share entypo-share"></a></li> <li><a href="https://www.twitter.com/intent/tweet?url=<?php echo get_permalink(); ?>" class="button twitter entypo-twitter" target="_blank"></a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo … Okumaya devam et WordPress Sosyal Medya Paylaş Butonu