CSS3 ile yazıya gölge efekti verme işlemi (text-shadow özelliği)

Css web sayfası yapanların vazgeçilmez yardımcısı.İki satır kod ile bir sürü işlem yapabiliriz.İşte yazıya gölge verme özelliği de CSS3 ile gelen ve çoğu sitede kullanılan yeni bir özellik.
Yazıya gölge verme özelliğini kullamak için herhangi bir css seçicisine text-shadow tanımlamasını yapmanız gerekir. Tanımlama aşağıdaki gibi yapılır.

text-shadow özelliği html etiketlerinden herhangi bir yazı etiketine gölge vermek için kullanılır.4 adet parametresi vardır.Bunlardan ilki yatay olarak yani x ekseninde kaç piksel gölge verileceğini,ikincisi dikey olarak kaç piksel gölge verileceğini,üçüncü olanı bulanıklık değerini , sondaki ise gölge rengini belirtir.
Örnekler:

Vintage / Retro yazı efekti

CSS kodu:

       text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Neon yazı efekti

CSS kodu:

       text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 
0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 
0 0 150px #ff00de;

İnset yazı efekti

CSS kodu:

       text-shadow: 0px 2px 3px #666;

Anaglyphic yazı efekti

CSS kodu:

       text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Ateş yazı efekti

CSS kodu:

       text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
 -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 
-20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Umarım faydalı olur...
Yazının orjinali

Css ile blogger navbar ve footer kısmını kaldırmak/gizlemek

Blogger tabanlı bir blog yazarısınız ve sayfanızın üst kısmındaki navbar ve alt kısmındaki footer kısmını css ile kaldırmak istiyorsanız aşağıdaki adımları takip ederek bunu kolaylıkla yapabilirsiniz.

1. Öncelikle Blogger anasayfanızdan istediğiniz bloğu seçin ve şablon kısmına gelin.



2. Şimdi gelişmiş kısmından css ekle seçeneğini seçiyoruz.Ve aşağıdaki css kodunu buraya yapıştırıp sağ-üst kısımdaki bloğa uygula kısmından işlemi tamamlayın.



3. Css Kodu

#navbar{
    position:absolute;
    top:-100px;
}
footer{
    display: none;
}

4. Buradaki #navbar:navigasyon çubuğunu,footer:altbilgi çubuğunu etkiler.Umarım işinize yarar....

Html UL-Liste tipini değiştirme veya kaldırma işlemi

Daha önceki yazımda

html kodu

ile liste yapımını göstermiştim.Şimdi de bu listedeki elemanlardan önce gözüken ve Türkçe'ye

nokta

,

daire

ve

kare

şeklinde çevirebileceğimiz

liste biçimi

nin nasıl değiştirilebileceğini göstermeye çalışacağım.
Öncelikle liste tipini

UL etiketi

ni kapatmadan yazacağınız

type özelliği veya öz-niteliğini

kullanarak değiştirebilirsiniz.

TYPE

=

DISC

|

CIRCLE

|

SQUARE

Bu kod ile	Sonuç böyle
<UL TYPE=DISC> <LI>kahve <LI>çay <LI>limonata </UL>	kahve çay limonata
<UL TYPE=CIRCLE> <LI>kahve <LI>çay <LI>limonata </UL>	kahve çay limonata
<UL TYPE=SQUARE> <LI>kahve <LI>çay <LI>limonata </UL>	kahve çay limonata

Eğer ki

liste biçimini

beğenmedi isek ve

kaldırmak

istiyorsak o zaman

CSS kodu

kullanmamız gerekecek.Aşağıda buna bir örnek verdim.
<ul style="

list-style:none;"

>
<li>kahve</li>
<li>çay</li>
<li>limonata</li>
</ul>
Sonuç ise şu şekilde olur.

• kahve
• çay
• limonata

HTML Özel Karterlerinin Kodları

Hazırlamakta olduğunuz web sayfalarında HTML özel karakterlerinden yararlanmak istiyorsanız bunların ya sayısal kodunu yada karakter ismini bilmeniz gerekir. Aşağıdaki tabloda HTML özel kararterlerinden bazılarının hem sayısal kodu hemde Kararter İsmini çıkardım.
Örnek: © karakterini iki şekilde sayfanıza ekleyebilirsiniz.

1-Sayısal Kod: Bunun için &#sayısalkod ; şeklinde bir yazım kullanmalısınız.&#169;

2-Karakter İsmi: Bunun için &karakterismi; şeklinde bir yazım kullanmalısınız.&copy;

HTML ÖZel Karakter Kodları

-	Sayısal Kod	Karakter İsmi
Á	193	Aacute
á	225	aacute
â	226	acirc
Â	194	Acirc
´	180	acute
æ	230	aelig
Æ	198	AElig
À	192	Agrave
à	224	agrave
ℵ	8501	alefsym
Α	913	Alpha
α	945	alpha
&	38	amp
∧	8743	and
∠	8736	ang
å	229	aring
Å	197	Aring
≈	8776	asymp
Ã	195	Atilde
ã	227	atilde
Ä	196	Auml
ä	228	auml
„	8222	bdquo
Β	914	Beta
β	946	beta
¦	166	brvbar
•	8226	bull
∩	8745	cap
Ç	199	Ccedil
ç	231	ccedil
¸	184	cedil
¢	162	cent
χ	967	chi
Χ	935	Chi
ˆ	710	circ
♣	9827	clubs
≅	8773	cong
©	169	copy
↵	8629	crarr
∪	8746	cup
¤	164	curren
†	8224	dagger
‡	8225	Dagger
⇓	8659	dArr
↓	8595	darr
°	176	deg
Δ	916	Delta
δ	948	delta
♦	9830	diams
÷	247	divide
é	233	eacute
É	201	Eacute
Ê	202	Ecirc
ê	234	ecirc
è	232	egrave
È	200	Egrave
∅	8709	empty
	8195	emsp
	8194	ensp
ε	949	epsilon
Ε	917	Epsilon
≡	8801	equiv
Η	919	Eta
η	951	eta
ð	240	eth
Ð	208	ETH
ë	235	euml
Ë	203	Euml
€	8364	euro
∃	8707	exist
ƒ	402	fnof
∀	8704	forall
½	189	frac12
¼	188	frac14
¾	190	frac34
⁄	8260	frasl
Γ	915	Gamma
γ	947	gamma
≥	8805	ge
>	62	gt
⇔	8660	hArr
↔	8596	harr
♥	9829	hearts
…	8230	hellip
í	237	iacute
Í	205	Iacute
î	238	icirc
Î	206	Icirc
¡	161	iexcl
Ì	204	Igrave
ì	236	igrave
ℑ	8465	image
∞	8734	infin
∫	8747	int
Ι	921	Iota
ι	953	iota
¿	191	iquest
∈	8712	isin
Ï	207	Iuml
ï	239	iuml
Κ	922	Kappa
κ	954	kappa
λ	955	lambda
Λ	923	Lambda
〈	9001	lang
«	171	laquo
←	8592	larr
⇐	8656	lArr
⌈	8968	lceil
“	8220	ldquo
≤	8804	le
⌊	8970	lfloor
∗	8727	lowast
◊	9674	loz
‎	8206	lrm
‹	8249	lsaquo
‘	8216	lsquo
<	60	lt
¯	175	macr
—	8212	mdash
µ	181	micro
·	183	middot
−	8722	minus
Μ	924	Mu
μ	956	mu
∇	8711	nabla
	160	nbsp
–	8211	ndash
≠	8800	ne
∋	8715	ni
¬	172	not
∉	8713	notin
⊄	8836	nsub
ñ	241	ntilde
Ñ	209	Ntilde
Ν	925	Nu
ν	957	nu
ó	243	oacute
Ó	211	Oacute
Ô	212	Ocirc
ô	244	ocirc
Œ	338	OElig
œ	339	oelig
ò	242	ograve
Ò	210	Ograve
‾	8254	oline
ω	969	omega
Ω	937	Omega
Ο	927	Omicron
ο	959	omicron
⊕	8853	oplus
∨	8744	or
ª	170	ordf
º	186	ordm
Ø	216	Oslash
ø	248	oslash
Õ	213	Otilde
õ	245	otilde
⊗	8855	otimes
Ö	214	Ouml
ö	246	ouml
¶	182	para
∂	8706	part
‰	8240	permil
⊥	8869	perp
φ	966	phi
Φ	934	Phi
Π	928	Pi
π	960	pi
ϖ	982	piv
±	177	plusmn
£	163	pound
″	8243	Prime
′	8242	prime
∏	8719	prod
∝	8733	prop
ψ	968	psi
Ψ	936	Psi
"	34	quot
√	8730	radic
〉	9002	rang
»	187	raquo
⇒	8658	rArr
→	8594	rarr
⌉	8969	rceil
”	8221	rdquo
ℜ	8476	real
®	174	reg
⌋	8971	rfloor
Ρ	929	Rho
ρ	961	rho
‏	8207	rlm
›	8250	rsaquo
’	8217	rsquo
‚	8218	sbquo
Š	352	Scaron
š	353	scaron
⋅	8901	sdot
§	167	sect
­	173	shy
Σ	931	Sigma
σ	963	sigma
ς	962	sigmaf
∼	8764	sim
♠	9824	spades
⊂	8834	sub
⊆	8838	sube
∑	8721	sum
⊃	8835	sup
¹	185	sup1
²	178	sup2
³	179	sup3
⊇	8839	supe
ß	223	szlig
Τ	932	Tau
τ	964	tau
∴	8756	there4
Θ	920	Theta
θ	952	theta
ϑ	977	thetasym
	8201	thinsp
Þ	222	THORN
þ	254	thorn
˜	732	tilde
×	215	times
™	8482	trade
ú	250	uacute
Ú	218	Uacute
⇑	8657	uArr
↑	8593	uarr
û	251	ucirc
Û	219	Ucirc
Ù	217	Ugrave
ù	249	ugrave
¨	168	uml
ϒ	978	upsih
υ	965	upsilon
Υ	933	Upsilon
ü	252	uuml
Ü	220	Uuml
℘	8472	weierp
ξ	958	xi
Ξ	926	Xi
ý	253	yacute
Ý	221	Yacute
¥	165	yen
ÿ	255	yuml
Ÿ	376	Yuml
Ζ	918	Zeta
ζ	950	zeta
‍	8205	zwj
‌	8204	zwnj

Blogger Bloğunuzdan Önceki Yazılar-Sonraki Yazılar linkini kaldırmak için

Blogger bloğunuzun yazılar kısmının en altındaki "Önceki yazılar" veya "Sonraki yazılar" linklerini kaldırmanız aslında çok basit. Bunun için ilk önce bloğunuzun kontrol paneline giriş yapın ve yerleşim sekmesinden Html'yi düzenle seçeneğini seçin daha sonra "Widget şablonlarını genişlet" seçeneğini tik ettikten sonra aşağıda mavi olarak işaretlenmiş CSS kodlarını bulun ve bunların yerine kırmızı olanları yapıştırın. Artık bu linkler gözükmeyecektir.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

#blog-pager-newer-link {
display: none;
}
#blog-pager-older-link {
display: none;
}
#blog-pager {
display: none;
}

NOT:Bu çalışmaları yapmadan önce lütfen blog şablonunuzu bilgisayarınıza yedekleyin.

CSS:Resme kenarlık ekleme

Web sitenize gönderdiğiniz resimlerinize kenarlık eklemek aslında sandığınızdanda kolay.Bunun için yapmanız gereken şey aşağıdaki kodları CSS kodlarınızın altına yapıştırmak.

img {
padding:5px;
margin:5px;
border-width: 5px;
border-color: #0066CC;
border-style: single;
}

burada border-style kısmı kenarlığınızın biçimidir.Aşağıdaki resimde değişik kenarlık biçimleri verilmiştir.Buradan istediğiniz biçimi seçip ilgili alana koyarsanız istediğiniz kenarlık biçimini elde etmiş olursunuz.Ayrıca bu kodlarda kırmızı ile belirtilmiş kısımları değiştirerek değişik biçimlerde kenarlık oluşturabilirsiniz.





CSS ile kursör tiplerini değiştirin (CSS Cursor Type)

Css ile web sayfanızda kursör tipini kendinize göre değiştirebilirsiniz.Bunun için yazılması gereken şu kısacık koddur.Örn:cursor:default(kursör tipi);
Yanlız bu kod ile sadece genel kursör tiplerine erişebilirsiniz.Eğer kendi kursörünüzü kullanmak istiyorsanız;
1-Kursörünüzü bir hosting'e yüklemeniz gerekir.
2-Daha sonra şu kodla bu kursörü kullanabilirsiniz."cursor:url(kursör url'si)"
Örneğin:Cursor:url(http://surbas19.googlepages.com/Boxbusy.ani) "KÜP KURSÖR"

İşte bunlarda standart kursör isimleri

default	auto	crosshair	pointer	move	e-resize
nw-resize	se-resize	sw-resize	s-resize	text	help

CSS padding ve margin özellikleri

Özellikle css ile yeni tanışan arkadaşların sıkıntısı padding ve margin özellikleridir. Aslında bu iki özellikte sayfa elementinin (div,span,img v.b.) yerleşimini belirtmek için kullanılır.Yani bir elementin sağ,sol,üst ve alt kısımdaki elementlere göre pozisyonunu belirler.
Padding: İçeriğin elementin sınırlarına olan uzaklığını belirlemek için kullanılır.Örneğin "padding:4px;" şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler.
Margin: Elementin komşu elementlere olan uzaklığını belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki bir deklerasyon elementin komşularının sınırlarına (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Aşağıdaki şekilde padding ve margin seçeneğini gösterir.


Yandaki şekilde bizim elementimiz mavi olan ise 1 numaralı boşluk margin (komşuya uzaklık) 2 numaralı boşluk ise paddaing(içeriğin elemente olan uzaklığı) dır.

Padding ve Margin 'in ne olduğunu öğrendikten sonra nasıl kullanıldıklarına bakalım.Her iki özelliğinde yazım kuralları aynıdır. Boşuk (margin veya padding) belirlerken üç şekilde tanımlanır.

1-Sadece bir yön verilerek tanımlama yapılabilir.Bunu öncelikle özellik adını yazıp yanına da yönü belirtiyoruz. Örneğin: padding-left:4px; veya margin-top:30px; gibi.
2-Özellik adı yazıldıktan sonra sırasıyla üst, sağ, alt, sol boşluklar verilir. Örneğin: margin:2px 4px 6px 8px; şeklindeki bir tanım elementin komşu elementlere göre üstten 2 sağdan 4 alttan 6 ve soldan da 8 pixel boşluk olacak şekilde hizalar.
3-Özellik adı yazılır ve yanına sadece bir tanımlama yapılır.Örneğin:padding:50px; şeklindeki bir tanımlama ile element içeriği dört taraftan da 50 pixel boşluk bırakılarak hizalar.

Umarım faydalı olur.

CSS based hotizontal menu

Creating to Css based horizontal menu like above.You copy/paste following code into your .css files or head tags of .html file.

#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;

}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}

#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}

#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}

#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;

}

Css ile yatay menü yapmak (Digg menüleri gibi)

Yukarda görmüş olduğunuz gibi bir menü yapmak için aşağıdaki kodları .css dosyanızın içine veya html kodunuzun head taglarının içine yapıştırın.

#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;

}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}

#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}

#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}

#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;

}

CSS ile dikey menü yapımı

1-Aşağıdaki kodu html dosyanızın head tag'ına yada .css dosyanıza yapıştırın.

body
{
margin:0px;
}

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px;
background-color:#3465a4;

}
#menu ul li a
{
display:block;
margin:2px 2px 2px 2px;
padding:0 0 0 5px;
text-decoration:none;
font-family:Verdana;
font-size:12px;
color:#f68e56;
font-weight:600;
vertical-align:middle;
line-height:200%;
}
#menu ul li a:hover
{
background-color:#204a87;
border-left:solid 3px black;

}

2-Burada oluşturacğımız div'in adı(id'si) menu olarak tanımlandı.Şimdi menü elemanlarımızı içinde tutacak menu id'li div'i oluşturup içine linklerimizi koyalım.

<div id="menu">

<ul>

<li>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

<a href="http://xmlci.blogspot.com/2008/01/css-ile-dikey-men-yapm.html">Dikey CSS Menü</a>

</li>

</ul>

</div>

3-Menümüz Aşağıdaki gibi oluşmuş olmalı..

• 
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  Dikey CSS Menü
  

Yeni tasarım trendi web 2.0 renkleri-3(web 2.0 color palette)

Sizlerle iki güzel renk paletini paylaşmak istedim...Aşağıdaki linklerden indirebilirsiniz.
1-Web 2.0 paleti
2-Web 2.0 paleti-2

Yeni tasarım trendi web 2.0 renkleri-2(web 2.0 color palette)

Tango web 2.0 renkleri

Yeni tasarım trendi web 2.0 renkleri-1(web 2.0 color palette)

Shiny silver [#EEEEEE]

Reddit white [#FFFFFF]

Magnolia Mag.nolia [#F9F7ED]

Interactive action yellow [#FFFF88]

Qoop Mint [#CDEB8B]

Gmail blue [#C3D9FF]

Shadows Grey [#36393D]

Bold

Mozilla Red [#FF1A00]

Rollyo Red [#CC0000]

RSS Orange [#FF7400]

Techcrunch green [#008C00]

Newsvine Green [#006E2E]

Flock Blue [#4096EE]

Flickr Pink [#FF0084]

Muted

Ruby on Rails Red [#B02B2C]

Etsy Vermillion [#D15600]

43 Things Gold [#C79810]

Writely Olive [#73880A]

Basecamp Green [#6BBA70]

Mozilla Blue [#3F4C6B]

Digg Blue [#356AA0]

Last.fm Crimson [#D01F3C]

CSS ile 3 sütunlu web sayfası oluşturma

Üç kolonlu bir web sayfası yapmak için aşağıdaki kodu "default.css" dosyasının içine yapıştırın.Burada # ile gösterilen kısımlar divlerin "id" leridir.

body
{
margin:0px;
padding:0px;
text-align:center;
}
#ust_div
{
width:900px;
height:100px;
background-color:Aqua;
}
#alt_div
{
clear:both;
width:900px;
height:50px;
background-color:Aqua;
}
#sol_div
{ float:left;
height:100%;
width:150px;
background-color:Gray;
}
#sag_div
{
float:right;
height:100%;
width:150px;
background-color:Blue;
}
#orta_div
{
float:left;
height:100%;
width:600px;
background-color:Green;
}
#ana_div
{
width:900px;
height:450px;
margin:auto;
}

Şimdi de ana sayfanıza css'yi dahil (import) edin.

<link href="deault.css" rel="stylesheet" type="text/css" />

Geldik son aşamaya bu aşamada web sayfamıza div leri oluşturacağız.Divleri aşağıdaki gibi oluşturmamız gerekiyor.

<div id="ana_div">
<div id="ust_div"></div>
<div id="sol_div"></div>
<div id="orta_div">
Buraya ana içerik gelecek..
</div>
<div id="sag_div"></div>
<div id="alt_div"></div>
</div>

Sonuç sayfanın üst kısmındaki gibi olmalı.Kolaygelsin....