22 Haziran 2015
minimalcoding
2322 0

Google Web Fonts Kullanımı

Bir önceki konumuzda @font-face Css ile Özel Font Kullanımından bahsetmiştik, buna ek olarak Google’ın tamamen ücretsiz olarak sunduğu Google Web Fonts  servisinden de bahsedelim istedik. İçerisinde 698 tane font ailesini barından bu servis ile sitelerinizde özgürce (lisans derdi olmadan) kullanabilirsiniz. Bu siteye https://www.google.com/fonts adresinden ulaşabilirsiniz. Kullanımı son derece basit olan Google Fonts yapısına daha yakından bakalım. Devamı

Devamı
21 Haziran 2015
minimalcoding
2844 0

Css ile Özel Font Kullanımı @font-face

Tasarlanan web sitelerinde kullanılan özel fontlar (yazı tipi) tasarım bütünlüğü oluşturmaktır.Tasarımda kullanılan  özel font yapısı kulanıcıların bilgisayarlarında yüklü olmayabilir ve site kullanıcılarının siteyi sistem fontlarıyla görüntülemesine neden olur. Bu da tasarım bütünlüğünü ortadan kaldırır. Hiçbir site sahibi ve tasarımcı bunun böyle olmasını istemez. Artık bir çok firmada kendi markasıyla bütünleşmiş fontların web sitelerinde kullanılmasını talep etmektedir. Peki kullanıcıların bilgisayarlarında olmayan bu özel font yapısını nasıl göstereceğiz? İşte tam bu noktada CSS @font-face yapısı sorunumuza çözüm olmaktadır (kullanımı için yazının devamına bkz). CSS2 ile gelen bu özellik yazı tiplerinde yaşanan telif hakları sıkıntısından dolayı CSS 2.1 de kaldırılsada CSS3 ile bu sorun çözülmüştür. Tam her şeyi çözdük derken karşımıza farklı tarayıcıların desteklediği farklı font dosyası uzantıları çıkmaktadır. Peki bu font dosya uzantıları ve bu uzantılara bağlı masaüstü ve mobil tarayıcı destekleri nelerdir? Devamı

Devamı
20 Haziran 2015
minimalcoding
2106 0

Javascript ile Responsive Accordion Panel Yapımı

Bu yazımızda Javascprit ve CSS ile harmanlanmış basit kullanışlı bir Akordiyon Panel yapımıdan bahsediyor olacağız. Eğer isterseniz bir kaç değişiklik ile kullanışlı bir Javascript Accerdion Menu olarakta kullanmanız mümkün umarız işinize yarar. Uygulamalı örneği ve ilgili Javascript , Css , Sass ve Html kodlarını yazının devamında bulabilirsiniz. Devamı

Devamı
17 Haziran 2015
minimalcoding
1663 1

IE 10 (internet explorer) ,Chrome ,Safari ve Firefox ta Select Elementinin Okunu Gizleme

Özel yapılmış Selectbox yapılarının tarayıcı yorumlamasından kaynaklanan ok yapıları default olarak görünür halde gelmektedir. CSS stil dosyamıza ekleyeceğimiz bir kaç satır kodla bunu çözmek mümkün. Peki bu kodlar nelerdir.  Devamı

Devamı
16 Haziran 2015
minimalcoding
1976 0

Css ile Basit Parallax Background Effect yapımı

Bu yazımızda sadece CSS’in “background-attachment:fixed” özelliğini kullanarak basit kullanışlı , ekstra bir eklenti gerektirmeden (Javascript vb.) , parallax background yapımından bahsediyor olacağız. Uygulamanın daha anlaşılır olması için örnek yapıyı icelemenizde fayda var source kodlara download linkinden ulaşabilirsiniz…

Devamı

Devamı
14 Haziran 2015
minimalcoding
2806 0

Css Fullscreen Background (Tam ekran arkaplan) Yapımı..

Bu yazımızda One page (tek sayfa) tasarımlarda sıklıkla kullanılan tam ekran açılan sayfa yönteminden bahsediyor olacağız. CSS dosyanıza ekleyeceğiniz bir kaç pratik kod ile bu işlemi yapmanız son derece kolay, uygulamanın daha net anlaşıla bilmesi için yapıyı one page mantığında tasarladık, doküman içerisinde tıklanıldığında ilgili alana giden (named anchor) basit bir java script koduda mevcut example butonuna tıklayarak uygulamayı daha net inceleye bilir, download butonuna tıklayarakta uygulamayı indirebilirsiniz Sass ve Less kullanıcılarını da unutmadık elbette döküman içinde hem Sass hemde Less dosyalarıda mevcut umarız sizler için kullanışlı bir uygulama olmuştur… Devamı

Devamı
12 Haziran 2015
minimalcoding
2466 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ı