fatih memis
web tasarim ve yazilim
bilgi & information
   
Günlük Kategorileri
 
 
 
 
 
 
 
 
 
 
Sayfalar
 
 
 
Dost Siteler
 
 
E-Mail Listesi
Arama Yap
Aşağıdaki formu kullanarak arama yapabilirsiniz.
Css ve Javascript ile Gölgeli yazı yazma
 Css ve Javascript ile Gölgeli yazı yazma
Merhaba arkadaşlar pek çok sitede kullanılan bir işlevdir. Yazıları belirli programlar yardımı ile gölgelendirip resim olarak web site tasarımımıza kolayca ekleyebiliriz. Fakat bu işlev sayesinde belirli bir program kullanmadan Javascript ile gölgeli yazı yazdırabiliriz.
 
Css kodlarımız: 
 
/* www.fatihmemis.com */
/* golgeli yazi */
span.shadow {
top: 1px;
left: 1px;
color: #000;
}
.highContrast {
position: relative;
color:#06C;
}
.highContrast span {
position: relative;
}
span.shadow {
position: absolute;
}
Javascript Kodları:
function addEvent( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
createDropShadows = function(){
var highContrast = getElementsByClass('highContrast');
for(i = 0; i < highContrast.length; i++){
var currentElement = highContrast[i];
var hcContent = currentElement.firstChild.data;
var contentSpan = document.createElement('span');
var contentSpanText = document.createTextNode(hcContent);
contentSpan.appendChild(contentSpanText);
var shadowSpan = document.createElement('span');
var shadowSpanText = document.createTextNode(hcContent);
shadowSpan.appendChild(shadowSpanText);
shadowSpan.className = "shadow";
currentElement.firstChild.data = '';
currentElement.appendChild(shadowSpan);
currentElement.appendChild(contentSpan);
}
}
addEvent(window, 'load', createDropShadows);
Ve son olarak da Body etiketleri arasına gölgeli yazı yazdırmak istedimiz yere class olarak "highContrast" tanımlıcaz.

Merhaba Dünya! :)

Uygulamayı Önizlemek için tıklayın.
Uygulamayı İndirmek / Download için tıklayın.

Kolay gelsin :)
Tarih: 10.01.2012 17:30:55 Yazan: Fatih MEMİŞ Görüntülenme:190 Yorumlar [0] Yorum Yaz 
Yorumlar
Henüz yorum yazılmamış!
 Yorum Yaz
 
© Copyright Fatihmemis.com - Fatih MEMİŞ | Tüm Hakları Saklıdır.
Hiç bir materyal izinsiz olarak kullanılamaz!
Kisisel Blog Script V1.1