Etiket- sedatdemirdogan

Css Arkaplan Özellikleri

Merhaba arkadaşlar bugün css’de arkaplan resimleri nasıl eklenir size anlatmaya çalışacağım. Css Background özelliklerini sırasıyla yazacak olursak;

  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

background: Bu özellik tüm background özelliklerini içinde barındırır.

body
{ 
    background: black url(images/yazilimsinifi.jpeg) 
}

Devamını Oku

Clear Both Kullanımı

Merhaba arkadaşlar bugünkü konumuz Css’ de clear both kullanımı. Biliyorsunuz ki Css kullanan herkes float kodunu epey sıklıkla kullanıyordur. Peki nedir bu float sorusunu da yanıtlayayım. Float özelliği genel anlamda elemanın konumunu belirmek için (sağa veya sola) kullanılır. Float kullanımı genellikle yeterli alan mevcut ise yan yana dizilimler için kullanılabilir. Yani eğer eleman sola konumlandırılırsa içerik elemanın sağından akacaktır. Sonuçta her iki durumda da içerik elemanın etrafını kuşatacaktır. Float elementi şu değerleri alabilir.

  • left : İçeriği sola yaslar.
  • right: İçeriği sağa yaslar.
  • none : İçeriği orjinal haline getirir.
  • inherit: İçerik üst elementin değerlerini alır.

Devamını Oku

@Font-Face Kullanımı

Merhaba arkadaşlar bugünkü makalemde font face’ nin nasıl kullanılacağını anlatacağım. Biliyorsunuz ki web sitelerimiz de standart sistem fontlarını kullanmak zorunda kalıyorduk ve Css 3 ile birlikte gelen font face bizi bu dertten kurtarmış durumda. Bizim için şu anda font face’ nin bütün tarayıcılarda aynı sonucu alacak şekilde çalışabilmesi gerçekten çok önemli. Anlatacağım font face kullanım şekli aşağıdaki tarayıcı versiyonlarını sorunsuz olarak desteklemektedir.

Safari 3.1+

Opera 10+

Firefox 3.5+

Chrome 4.0+

Internet Explorer 6+

Fontların bazı uzantıları bize font face kodlamasında lazım olacak. Bu konuda bence en iyisi Font Squirrel‘dır. Yukarıdaki resimde istediğiniz seçeneğe bağlı olarak fontunuzu ekleyerek çeviri yapabilirsiniz. İsteğe bağlı olarak başka uygulamalar  ile de tabiki çevirebilirsiniz. Çeviri işlemi de bittiyse gelelim bu anlattığım kullanım şeklini kodlamaya ilk işimiz fontların yer aldığı bir klasör oluşturmak. Ben “Fonts” olarak bir klasör oluşturdum ve fontlarımı buraya kopyaladım ve sıra kodlama kısmında; Devamını Oku

CSS Reset

Evet arkadaşlar, bu yazımızda CSS Resetten bahsedeceğiz. meyerweb.com tarafından açık kaynak olarak sunulan Css Reset, Css ile uğraşan yazılımcıların browserlar’ ın çeşitliliği yüzünden sıkıntı yaşaması günümüzde malesef kaçınılmaz durumda. Bu reset kodlarını kullanarak sapmaları minimuma indirebilirsiniz.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
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;
}
/* HTML5 display-role reset for older browsers */
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;
}

Bir başka makalede görüşme dileğiyle…

Sedat Demirdoğan