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 :)