samedi 25 avril 2015

A 'light swtch' to toggle text and background colours for a full page using CSS

I'm trying to create a 'light switch' with CSS to toggle the colours of a page. I've made a bad start using Joe's excellent response to this question: Change background on button click, using CSS only?

Is it possible to target the whole page rather than content inside divs? Also: can I do anything more to disguise the button as a link?

http://ift.tt/1GtdGZ3

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

Thank you for looking - and apologies, I'm really naive.




Aucun commentaire:

Enregistrer un commentaire