Gece modu (CSS)
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() { function getPreferredStyleSheet() { function createCookie(name,value,days) { function readCookie(name) { function handleStyleSheet() { window.onload = function(e) { window.onunload = function(e) { var cookie = readCookie(”style”); |
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></div></div> </body> |
Kategori: 

