Autor Zpráva
Plackins
Profil
Zdravím,
pročetl jsem už hodně témat jak zhasnout web, ale nikde se mi nedostala odpověď jakou bych potřeboval. Takže mám na webu tohle tlačítko
<div class="slideThree">  
    <input type="checkbox" value="None" id="slideThree" name="check" />
    <label for="slideThree"></label>
</div> 
css
.slideThree {
    width: 80px;
    height: 26px;
    background: #696969;
    margin: 20px auto;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideThree:after {
    content: 'OFF';
    font: 12px/26px Arial, sans-serif;
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.slideThree:before {
    content: 'ON';
    font: 12px/26px Arial, sans-serif;
    color: #2db2ea;
    position: absolute;
    left: 10px;
    z-index: 0;
    font-weight: bold;
  
}



.slideThree label {
    display: block;
    width: 34px;
    height: 20px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;

    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideThree input[type=checkbox]:checked + label {
    left: 43px;
}

A chtěl bych, abych když kliknu na tlačítko, neboli stane se aktivní část css stylu .slideThree:before tak aby mi celý web zčernal buď pomocí obrázku z photoshopu na který bude průhledný, nebo pomocí css/js. Prosím někoho schopného a ochotného kdo by byl ochoten mi udělat takový kód, jsem amatér a javascriptem zatím nepolíbený a css mi to co chci nastavit nejde. Předem děkuju všem za pomoc :)
Joker
Profil
Plackins:
Asi nejjednodušší řešení od boku:
<input type="checkbox" value="None" id="slideThree" name="check" onclick = "document.body.className = this.checked ? 'svetlo' : 'tma'" />

A pak můžete světlé styly psát jako body.svetlo selektor a tmavé jako body.tma selektor
Plackins
Profil
Joker:
zkusil jsem tuto možnost, když kliknu na tlačítko, zmizí celý web když kliknu znovu, tak se mi zobrazí s takovou opacity jakou jsem mu nastavil. Ale tak, že nych kliknul na tlačítko naskočilo by jedno opacity kliknul bych znova a nebylo by tam žádné opacity mi nefunguje. selektr svetlo jak kyby to ani nebralov potaz.
Bubák
Profil
Plackins:
Tak to bude chyba ve tvé implementaci a chtělo by to odkaz na živou ukázku.
Plackins
Profil
Bubák:
Ano je to možné, jak píšu jsem začátečník.
Živá ukázka. Chtěl bych to tak že když kliknu na tlačítko dole poprvé ztmaví se to a když kliknu podruhé vrátí se to na původní vzhled.
Bubák
Profil
Stránka ti zmizne (zmizí obsah a zešedně), protože třídu .svetlo deklaruješ jak DIVu, je kterém máš input, a pak ji přiděluješ javascriptem elementu body. Já osobně bych dal divu, ve kterém je input jinou třídu, třebas .prepinac.
Jiná možnost je namísto selektoru .svetlo použít div.svetlo
Vyber si, co ti více vyhovuje, doporučuji ti udělat to tak, ať se v tom hlavně ty vyznáš.

Pro body.tma toho deklaruješ spoustu, pro body.svetlo jen opacity, nevím, zda to stačí, jen se mi to nezdá na první pohled, ale nezkoumal jsem to.
Plackins
Profil
Bubák:
To co si teď napsal upřímně moc nechápu.
<div class="svetlo">
 <div class="slideThree">  
    <input type="checkbox" value="None" id="slideThree" name="check" onclick = "document.body.className = this.checked ? 'svetlo' : 'tma'" />
    <label for="slideThree"></label>
</div>
</div>
Teď to mám takhle <div class="svetlo"> tohle je kvůi pozici a pak v tomhle <div class="slideThree"> je to tlačítko samo o sobě. Jde vůbec nastavit že to bude reagovat na to tlačítko? Nebo kd myslíš ať vytvořím ten přepínač. Na radu od jokera jsem tam vložil kód co mi dal a funguje že se web ztmaví, ale on se poprvé vypne a podruhé naskočí tmavý, ale nejde pomocí tlačítka dostat zpět na původní hodnotu.


//Edit: Aha, už jsem pochopil co mi tady říkáš, něuvědomil jsem si, že je to ještě v tom divu předtím. díky
//Edit2: Už to funguje, díky za pomoc

//Edit3: Už prosím o poslední radu jak zapíšu do css aby se mi při aktivní body.tma zobrazoval tento kód
.login-submit, .login-submit:before, .login-submit:after {
  background: #373737 url("../images/bg.png") 0 0 repeat;
}
takhle
.login-submit, .login-submit:before, .login-submit:after {
  background: #000;
}
Joker
Profil
Plackins:
jak zapíšu do css aby se mi při aktivní body.tma zobrazoval tento kód … takhle
Stačí před to jednoduše přidat body.tma
body.tma .login-submit, body.tma .login-submit:before, body.tma .login-submit:after
Plackins
Profil
Joker:
To právě nefunguje.viz ukázka. Je to černé i když není body.tma aktivní.
//Edit: Ví mi někdo poradit? :(

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: