Cara mengatur opacity text dari slider menggunakan javascript


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara mengatur opacity text dari slider menggunakan javascript,
berikut ini syntaxnya.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $('#range').change(function() {
                $('#page_contents').attr('style', 'opacity:' + $('#range').attr('value')/100);
            });
    });
</script>

<input id="range" type="range" max='100' min='0' value='100' />

<div id="page_contents">
    <h1>Ini adalah contoh teks sederhana.</h1>
</div>

Semoga bermanfaat.
http://pangeran-it.blogspot.com/

Cara buat background responsive css bahkan saat resize browser


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana cara buat background responsive css bahkan saat resize browser,
berikut ini syntaxnya.

<!DOCTYPE html>
<html>
<head>
<title>Extreme responsive background</title>
<style>
    .overlay{position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.25);z-index:3}
    .background{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff url(https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&s=d40582dbbbb66c7e0812854374194c2e&auto=format&fit=crop&w=750&q=80) center 65% no-repeat;background-size:cover}
    header.wrap{height:-webkit-calc(80vh);height:-moz-calc(80vh);height:calc(80vh);min-height:320px;position:relative;z-index:10}
    .header_section{height:100%;margin:0 0 60px;display:table;width:100%;height:100%;text-align:center}
    .header_section__copy{margin:0 auto;padding:0 40px;display:table-cell;vertical-align:middle}
</style>

<body>


<div class="overlay"></div>
<div class="background"></div>

<header class="wrap">
    <div class="header_section">
        <div class="header_section__copy">
        </div>
    </div>
</header>



</body>
</html>

Semoga bermanfaat.
http://pangeran-it.blogspot.com/

Google doodle 26 Januari 2018


Google doodle 25 Januari 2018


Google doodle 23 januari 2018