Beste front-enders,

Zelf werk ik ook als front-end developer en heb nog wel eens dat de designer naar me toekomt van "Dit moet toch echt nog 2 pixels naar links".

Heb daarom een script geschreven zodat ik zijn ontwerp (opgeslagen als jpg). als achtergrond kan gebruiken en met de "+" en "-" kan ik de opacity van dat element aanpassen.

Op die manier kan ik soort van overtekenen en altijd pixel perfect werken. Dus bij deze stel ik het ook beschikbaar voor jullie zodat je zekerheid heb dat alles pixel perfect is en maakt het werk een stuk makkelijker.

De js code.

PHP Code:

$(document).ready(function() {
    jOverdraw();
});

function jOverdraw() {
    var jOverdraw = ".jOverdraw";

    var _browserWidth = $("body").outerWidth();
    var _browserHeight = $("body").outerHeight();

    var _jOverdrawWidth = $(jOverdraw).outerWidth();
    var _jOverdrawMarginLeft = -(_jOverdrawWidth / 2);

    $(jOverdraw).css("margin-left", _jOverdrawMarginLeft);

    $('*').keydown(function(event) {
        if (event.keyCode == '107') {
            event.preventDefault();

            var _currentOpacity = $(jOverdraw).css("opacity");
            _currentOpacity = parseFloat(_currentOpacity);
            var _newOpacity = _currentOpacity + 0.1;
            if (_newOpacity > 1) {
                _newOpacity = 1;
            }

        }
        if (event.keyCode == '109') {
            event.preventDefault();

            var _currentOpacity = $(jOverdraw).css("opacity");
            var _newOpacity = _currentOpacity - 0.1;
            if (_newOpacity < 0) {
                _newOpacity = 0;
            }

        }
        $(jOverdraw).css("opacity", _newOpacity)
    });

    
} 


De code in je html

PHP Code:

<img src="template.jpg" class="jOverdraw" alt="" /> 


De css

PHP Code:

html, body
{
    margin:0px;
    width:100%;
    height:100%;
}

.jOverdraw
{
    position:absolute;
    display:block;
    left:50%;
    top:0px;
} 


De code in het zip met voorbeeld: http://www.itsleon.com/projects/overdraw.zip

demo link: http://itsleon.com/projects/overdraw/index.html

Een voorbeeldje zou leuk zijn. :-)

Goed idee! Maar als ik het goed begrijp werkt het niet meer als je een container met een achtergrondkleur gebruikt. Dan moet je dus vanaf de bovenste 'laag' (Tekst e.d) gaan werken, terwijl ik het liefst vanaf de basis werk (Achtergrond > body > container). Toch ga ik het eens proberen.

Dit knippen / plakken in een html bestand is ook 1 minuut werk?
Ik snap het idee, je gebruikt het plaatje als achtergrond van je website, en kunt daarmee de rest er overheen bouwen, met de opacity kun je er dan als het ware doorheen kijken.

bedankt, kan nog wel eens van pas komen

Voorbeeld in de vorm van een zip en link toegevoegd


Je kan er zelf ernog voor kiezen om de template (overdraw) ervoor of erachter te zetten door middel van de z-index in de css aan te passen.

@J. de Boer

Inderdaad zodra jou container een achtergrond kleur heeft word het dus wat lastig, je zou er dan ervoor kunnen kiezen om de overdraw erover te leggen inplaats van eronder.

Leon,

Ik heb het even uitgeprobeerd. Als ik overdraw erover leg, werkt het perfect! Deze 'tool' ga ik zeker gebruiken. Bedankt!