Category Archives: CSS

Tasarımlarda Standart Sistem Fontunu Kullanmak

1 yorum

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

Konuyu görmek için tıklayın

OS X El Capitan Sass Kurulum Hatası ve Çözümü

yorum yok

Yakın zamanda mac’de işletim sistemimi güncelledim.
Ancak daha sonra sass’ı kullanamaz oldum.
Kurulum yaparken ise şöyle bir hata alıyordum;

ERROR:  While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

Daha sonra biraz araştırınca benim gibi bir çok kişi el capitan’da sorun yaşamış.
Şöyle bir issue‘ya denk geldim ve çözümünü burada buldum. Sorun yaşayanlar için çözüm;

sudo gem install sass

yerine

sudo gem install -n /usr/local/bin sass

şeklinde kurulum yapmak.

Sorun yaşanlar olursa diye blog’da bulundurmak istedim bu konuyu 🙂
Bol kodlamalı günler.

Konuyu görmek için tıklayın

Responsive Tablo Yapımı

10 yorum

Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet 🙂
Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

Video

Demo

http://www.erbilen.net/demo/responsive-tablo/

Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Konuyu görmek için tıklayın

Css’de geniş yazıyı üç nokta ile sınırlandırmak

15 yorum

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;

Konuyu görmek için tıklayın

SASS Dersleri

15 yorum

logo-235e394c

SASS için hazırladığım 3 bölümden oluşan bir ders serisi var. Aslında prototürk’te paylaştım ancak, kişisel bloğumu takip edenler olabileceğinden birde burada paylaşmak istiyorum 🙂

Konuyu görmek için tıklayın

Reset CSS Kullanımı

7 yorum

Eric Meyer’in reset.css’ini kullanıyorum. Ancak bazı kısımları hatalı, mesela gitmiş strong’u em’yi sıfırlamış ne eğik yazılıyor ne kalın.. Ee ne anladım o işten 😀 Eric reyiz bize yanlış yaptı, bende onun reset.css’ini biraz düzenledim. Böylesi daha tatlı oldu.

Not: Mevcut tüm reset.css’lere aşağıdaki bağlantıdan ulaşabilirsiniz.
http://www.cssreset.com/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}
:focus {
    outline: 0;
}
.clear {
    clear: both;
}
Konuyu görmek için tıklayın

CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

3 yorum

CSS ile bir nesnenin görünümünü gri tonda yapabilmemiz mümkün. Aslında gri ton bu özelliğin sadece bir değeri 🙂 Her neyse, lazım olur diye bende bloğumda paylaşıyorum.. Örneğin resme grayscale özelliğini vermek için graysale adında bir class ekleyelim. Daha sonra css’de bu class’ı tanımlayalım.

Konuyu görmek için tıklayın

LESS Kullanımı

32 yorum

LESS, CSS yazımınızı hızlandıracak, daha basit ve kullanışlı hale getirecek bir araçtır.
LESS ile değişkenler tanımlayabilir, mixinler oluşturabilir, tanımlı fonksiyonları kullanabilir, matematiksel hesaplar yapabiliriz..

Başka Alternatifler Var mı?

Elbette alternatif mevcut. Örneğin LESS yerine SASS kullanmayı seçebilirsiniz. Ancak ben LESS’i tercih ettim. Kullanımı ve kurulumu çok daha kolay zira.

Konuyu görmek için tıklayın

CSS ile Animasyonlu Menü Yapımı

22 yorum

Daha önce şu dersimde jquery ile animasyonlu menü yapımını göstermiştim. Bu dersimde ise bu işlemi CSS ile nasıl yapabileceğimizi göstereceğim sizlere.. Bunun için CSS3 özelliği olan transition özelliğini kullanıyoruz. Yararlı olması dileğiyle..

Konuyu görmek için tıklayın

Font Awesome ve Diğer İkon Fontları

14 yorum

Font Awesome ve Diğer İkon Fontları

Font Awesome için, ikon fontları arasında en çok kullanılanı diyebiliriz. Bootstrap‘ta bir süre font awesome kullanarak bu popüleriteyi arttırdı sanıyorum. Ancak şuanda kullandıkları (yanılmıyorsam) sadece Glyphicons. Bu yazımda bunlardan da bahsedeceğim sizlere.

Konuyu görmek için tıklayın