Gece modu (CSS)

Date Mart 9, 2008

CSS ve VBS kullanarak sitenizi gece moduna alabilirsiniz.Sitenizde parlak renkler kullanırsanız bir süre sonra kullanıcılar rahatsız olabilirler özelliklede karanlıkta ekrana bakan kişiler için parlak renkler rahatsız edicidir.Aşağıdaki işlemler ile bu parlaklığı azaltabilir sitenizi gece moduna alabilirsiniz.

lampa.css

CODE

body { margin:0; padding:0; color:black; background-color:#B5957C; font-family:Verdana, sans-serif; }
h1, h2 {font-family: Arial, sans-serif; font-style:italic; color:#523821; }
h1 {font-size:160%}
h2 {font-size:140%}
table {border-collapse:collapse}
td { border: 1px solid #FFB673; padding: 0.1em 0.2em; }
th { background-color:#F7D480; text-align:left; padding: 0.1em 0.2em; }
.subscribe {text-align:right}
.tip {background-color:white; border:1px dashed #FFB673; margin:1em; padding:1em; text-align:center; font-weight:bold; }
.note {font-size:80%}
td, th, #page {font-size:80%}
#page a:link {color:#EA3500}
#page a:visited {color:#A50000}
#page a:hover {background-color:#FFFFFF}
#page {border: 1px solid #C2360D; margin: 1em 2em 2em 270px; background-color:#FFF0D4;}
#page2 {border: 4px solid #FFB770; }
#content {margin:1em}
#navigation { background-color:#F7D480; padding: 0.2em 0.5em; }
#prostor { position:absolute; top:10px; left:10px; width:240px; padding:0px; margin:0px; background-color:white; border:1px solid #754C24; }
#lampa { text-align:center; margin:250px 0px 0px 40px; width:160px; }
#lampa div { font-size:0; }
#cepec div { border-width:0; border-bottom:2px solid #00C962; }
#cepec div div { border:0 solid white; border-bottom:2px solid #00B659; }
#cepec div div div { border-width:0 12px; border-bottom:26px solid #00A651; }
#cepec div div div div { border-width:0 5px; border-bottom:5px solid #009E4D; }
#cepec div div div div div { border-width:0 8px; border-bottom:5px solid #009348; }
#cepec div div div div div div  { border-width:0 10px; border-bottom:4px solid #008A43; }
#cepec div div div div div div div  {border-width:0 20px;  border-bottom:3px solid #007539; height:1px; }
#vypinac {position:absolute; width:20px; left:80px; top:300px; text-align:left; }
#vypinac div {border-left:2px dashed gray; height:40px; margin-left:4px; }
#vypinac span {display:block}
#vypinac span a {font-size:15px}
#vypinac a:link, #vypinac a:visited {text-decoration:none; color:black;}
#stojna {width:11px; margin-left:auto; margin-right:auto;}
#stojna div {border-left:2px solid #B09F12; border-right:2px solid #B09F12; width:7px; }
#stojna div div { border-left:2px solid #DDC609; border-right:2px solid #DDC609; width:3px; }
#stojna div div div { background-color:#FFE403; border:none; width:3px; height:120px; }
#podstava { width:50%; margin:0px auto; }
#podstava div {border-bottom:4px solid #B09F12; border-right: 1px solid white; border-left:1px solid white; }
#podstava div div { border-width: 0 2px;  border-bottom:3px solid #CCB915; }
#podstava div div div { border-width: 0 3px; border-bottom:2px solid #DCC716; }
#podstava div div div div { border-width: 0 4px; border-bottom:2px solid #FFE403; }
#podstava div div div div div { height:2px; background-color:#B09F12; border-width: 0 5px; }

lampa-tma.css

CODE

body {background-color:#957B65}
#page {background-color:#E1D4B3; border-color:#992806; }
#page2 {border-color:#CA905B}
th, td {border-color:#CA905B}
#navigation, th {background-color:#D5B76B}
#page a:hover {background-color:#DEDEDE}
#prostor {background-color:#878787}
.tip {background-color:#DEDEDE}
#cepec div {border-bottom-color:#406618}
#cepec div div {border-bottom-color:#406618}
#cepec div div div {border-bottom-color:#406618; border-right-color:#878787; border-left-color:#878787;}
#cepec div div div div { border-bottom-color:#406618; border-right-color:#878787; border-left-color:#878787;}
#cepec div div div div div { border-bottom-color:#406618; border-right-color:#878787; border-left-color:#878787;}
#cepec div div div div div div  { border-bottom-color:#406618; border-right-color:#878787; border-left-color:#878787;}
#cepec div div div div div div div  { border-bottom-color:#406618; border-right-color:#878787; border-left-color:#878787;}
#vypinac div {border-left-color:black; height:30px;}
#stojna div {border-left-color:#7D7500; border-right-color:#7D7500;}
#stojna div div {border-left-color:#7D7500; border-right-color:#7D7500;}
#stojna div div div {background-color:#7D7500}
#podstava div {border-bottom-color: #7D7500; border-left-color:#878787; border-right-color:#878787;}
#podstava div div {border-bottom-color:#7D7500; border-left-color:#878787; border-right-color:#878787;}
#podstava div div div {border-bottom-color:#7D7500; border-left-color:#878787; border-right-color:#878787; }
#podstava div div div div {border-bottom-color:#7D7500; border-left-color:#878787; border-right-color:#878787;}
#podstava div div div div div {background-color: #7D7500; border-left-color:#878787; border-right-color:#878787;}

styleswitcher.vbs

CODE

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
if(a.getAttribute(”rel”).indexOf(”style”) != -1 && a.getAttribute(”title”)) {
a.disabled = true;
if(a.getAttribute(”title”) == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
if(a.getAttribute(”rel”).indexOf(”style”) != -1 && a.getAttribute(”title”) && !a.disabled) return a.getAttribute(”title”);
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
if(a.getAttribute(”rel”).indexOf(”style”) != -1
&& a.getAttribute(”rel”).indexOf(”alt”) == -1
&& a.getAttribute(”title”)
) return a.getAttribute(”title”);
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(’;');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function handleStyleSheet() {
if (getActiveStyleSheet() == “tma”) {
setActiveStyleSheet(’default’);
}
else {
setActiveStyleSheet(’tma’);
}
}

window.onload = function(e) {
var cookie = readCookie(”style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie(”style”, title, 365);
}

var cookie = readCookie(”style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

lampa.html

CODE

<?xml version=”1.0″ encoding=”iso-8859-2″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”cs” lang=”cs”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-2″ />
<title>CSS Lampa</title>
<link rel=”stylesheet” type=”text/css” href=”lampa.css” />
<link rel=”alternate stylesheet” type=”text/css” href=”lampa-tma.css” title=”tma” />
<script type=”text/javascript” src=”styleswitcher.js”></script>
</head>
<body>

<div id=”prostor”>
<div id=”lampa”>
<div id=”cepec”><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div>
<div id=”vypinac”><div></div><span><a href=”#” onclick=”handleStyleSheet(); return false;”>O</a></span></div>
<div id=”stojna”><div><div><div></div></div></div></div>
<div id=”podstava”><div><div><div><div><div></div></div></div></div></div></div>
</div>
</div>

/div></div></div>

</body>
</html>

Sende Yorum Yaz ...

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

eXTReMe Tracker