Membuat Spot Modus Malam Pengaruh Lampu Senter Di Blog

Membuat Spot Modus Malam Efek Lampu Senter di Blog - Membicarakan malam tentunya identik dengan suasana gelap, untuk melihat disuatu kegelapan diharapkan sebuah cahaya. Pada artikel kali ini aku akan menciptakan suasana pada Blog menyerupai malam hari dengan sebuah penerangan lampu senter.

Menciptakan modus malam ini memakai tiga arahan yang dipakai ialah CSS, Javascript dan HTML. Modus malam menyerupai pada ulasan Artikel aku sebelumnya ialah membuat imbas beling pembesar, mempunyai kesamaan pada penyorotan dalam satu titik. Untuk demo-nya Anda sanggup melihat screnshotnya diatas :
Berikut ini caranya :

L1-Pemasangan CSS
pada pemasangan CSS, silahakan Anda buka Editor Template kemudian cari kode  ]]></b:skin> , kemudian copy arahan berikut dan pastekan di bawahnya :

CSS

<style type="text/css">
#night-mode-effect {
position: fixed;
margin:0 auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: auto;
overflow: hidden;
background:transparent;
font-family: Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
z-index:0.1;
}
#night-mode-effect #layer-txt {
background:#ff8200;
color:#fff;
font-family: Helvetica, Arial, sans-serif;
position:absolute;
top:5px;
right:11px;
margin:20px;
padding:5px;
z-index:9999;
}
#night-mode-effect #ptb-text,
#night-mode-effect #ptb-link {
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 1em;
margin: -0.77em 0 0 0;
font-size: 20px;
line-height: 1em;
font-weight: bold;
text-align: center;
}
#night-mode-effect #ptb-text {
font-size: 20px;
color: transparent;
text-shadow: none; 
}
#night-mode-effect #ptb-link a {
color: #999;
text-decoration: none;
}
#night-mode-effect #ptb-box,
#night-mode-effect #ptb-wall {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
}
#night-mode-effect #ptb-box {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#night-mode-effect #ptb-wall {
background: transparent;
}
#night-mode-effect #ptb-wall p {
position: relative;
font-size: 18px;
line-height: 1.5em;
text-align: justify;
color: #222;
width: 550px;
margin: 1.5em auto;
cursor: default;
}
#night-mode-effect #ptb-wall p a {
color: #fff;
}
#night-mode-effect #ptb-wall p a:hover {
text-decoration: none;
color: #000;
background: #fff;
}
#ptb-spot {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
pointer-events: none;
background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
background: -o-radial-gradient(center, circle closest-side, transparent 0, black 450px);
}
<!--[if IE]>
#ptb-spot {
display: none;
}
#ptb-ie {
position: absolute;
top: -90%;
left: -50%;
width: 200%;
height: 334%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
<![endif]-->
</style>

L2-Pemasangan Javascript
Pada pemasangan Javascript, anda cari arahan </body> , kemduian Anda copy arahan dibawah ini dan pastekan sebelumnya :

Javascript

<script type="text/javascript">
// <![CDATA[
var spot = null,box = null,boxProperty = '';
init();

function init() {
    text = document.getElementById('ptb-text');
    spot = document.getElementById('ptb-spot');
    box = document.getElementById('ptb-box');
    
    if (typeof box.style.webkitBoxShadow == 'string') {
        boxProperty = 'webkitBoxShadow';
    } else if (typeof box.style.MozBoxShadow == 'string') {
        boxProperty = 'MozBoxShadow';
    } else if (typeof box.style.boxShadow == 'string') {
        boxProperty = 'boxShadow';
    }

    if (text && spot && box) {
        document.getElementById('night-mode-effect').onmousemove = onMouseMove;
        document.getElementById('night-mode-effect').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    }
}

function onMouseMove(e) {
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
        return;
    }
    
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4,
        ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4,
        d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
    
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
    
    if (boxProperty) {
        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
    }
    
    xm = e.clientX - Math.floor(window.innerWidth / 2);
    ym = e.clientY - Math.floor(window.innerHeight / 2);
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
// ]]>
</script>

L3-Pemasangan HTML
Pada pemasangan HTML, Anda buka Entri gres kemudian masuk ke Mode HTML dan pastekan kedalamnya

HTML

<div id="night-mode-effect">
<div id="layer-text">
Anda Berada Dalam Modus Malam
You Are In Night Mode</div>
<div id="ptb-box">
</div>
<div id="ptb-text">
</div>
<div id="ptb-layar">
<div id="ptb-ie">
</div>
</div>
<div id="ptb-spot">
</div>
</div>

Note :
>> Dalam pemasangan HTML pada Artikel anda terapkan arahan HTML sehabis pembuatan Artikel
>> Jika Anda ingin keseluruhan Blog modus malam, ada terapkan arahan HTML sebelum arahan
>> Perlu Anda ketahui dengan menciptakan Blog dengan keseluruhan modus malam kurang efektif untuk pengunjung sebab sanggup menggangu kenyaman pengunjung ketika membaca artikel Anda

Demo Spot Modus Malam

Demo

Selamat mencoba!

Sumber http://www.websiteedukasi.com/