| Autor | Zpráva | ||
|---|---|---|---|
| Plackins Profil |
#1 · Zasláno: 2. 4. 2014, 17:13:59
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> .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 |
#2 · Zasláno: 2. 4. 2014, 18:08:07
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 |
#3 · Zasláno: 2. 4. 2014, 19:27:50
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 |
#4 · Zasláno: 2. 4. 2014, 19:53:11
Plackins:
Tak to bude chyba ve tvé implementaci a chtělo by to odkaz na živou ukázku. |
||
| Plackins Profil |
#5 · Zasláno: 2. 4. 2014, 19:57:19
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 |
#6 · Zasláno: 2. 4. 2014, 20:31:13
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><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;
}.login-submit, .login-submit:before, .login-submit:after {
background: #000;
} |
||
| Joker Profil |
#8 · Zasláno: 2. 4. 2014, 21:30:39
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? :( |
||
|
Časová prodleva: 10 let
|
|||
0