Dimensi TutupBotol: August 2018

Thursday, August 30, 2018

CSS Clip Property

Nambain Transition ke Menu Navigasi

Postingan ini adalah kelanjutan dari postingan sebelumnya disini... Jadi silahkan diilihat2 dl klu belum diliad... :v

Terus untuk ngebuat transisinya kita cuma nambain transition ajjah sama ngubah display: block menggunakan visibilit sama hidden. Source code lengkapnya seperti terlihat di bawah (untuk yg CSS ajjah )

nav {
    background-color: rgba(93, 236, 189, 0.6);
    position: relative;
    padding: 0 0 0 18px;
    margin-top: 30px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > ul > li {
    float: left;
}

nav ul::after {
    content: '';
    display: block;
    clear: both;
}

nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
    transition: all .5s ease-in;
}

nav ul li a:hover {
    background-color: #399939;
}

nav ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    background-color: rgba(0, 102, 102, .7); 
    transition: all 1s ease-in;
}

nav ul li:hover {
    background-color: rgba(0, 102, 102, .7);
}

nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

nav ul ul ul {
    left: 100%;
    top: 0;
}

nav ul ul li {
    position: relative;
}

Demonya bisa dilihat divideo berikut :

Source code githubnya bisa dilihat disini....

Membuat Navigasi Menu Menggunakan CSS

Postingan ini adalah kelanjutan dari postingan 'Navigasi sederhana menggunakan CSS'... So silahkan dibaca dl postingan yang pertama klu temen-temen blum baca/liad... :D

Naah disini kita cuma nambain beberapa submenu kayak gambar dibawah :

So langsung ajjah ke index htmlnya kyk gini :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Simple Nav </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#"> Home </a>
                    <ul>                        
                        <li><a href="#">Home 1</a></li>
                        <li><a href="#">Home 2</a></li>
                    </ul>
                </li>                
                <li><a href="#"> Articles </a></li>
                <li><a href="#"> List </a></li>
                <li><a href="#"> Number </a>
                    <ul>
                        <li><a href="#"> Number 1</a></li>
                        <li><a href="#"> Number 2</a>
                            <ul>
                                <li><a href="#"> Number 2a</a></li>
                                <li><a href="#"> Number 2b</a></li>
                                <li><a href="#"> Number 2c</a>
                                    <ul>
                                        <li><a href="#"> Number 2c1</a></li>
                                        <li><a href="#"> Number 2c2</a></li>
                                        <li><a href="#"> Number 2c3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"> Contact Poipo </a></li>
            </ul>
        </nav>
    </body>
</html>

Terus tambahan file css nya seperti ini ajjah :

nav ul ul ul {
    left: 100%;
    top: 0;
}

nav ul ul li {
    position: relative;
}

Simple bukaan... Hasilnya...

Silahkan download kodenya dari github disini...

Navigasi Sederhana Menggunakan CSS

Isi html awal :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Simple Nav </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li> <a href="#"> Home </a>
                    <ul>                        
                        <li><a href="#">Home 1</a></li>
                        <li><a href="#">Home 2</a></li>
                    </ul>
                </li>                
                <li><a href="#"> Articles </a></li>
                <li><a href="#"> List </a></li>
                <li><a href="#"> Number </a>
                    <ul>
                        <li><a href="#"> Number 1</a></li>
                        <li><a href="#"> Number 2</a></li>
                    </ul>
                </li>
                <li><a href="#"> Contact Poipo </a></li>
            </ul>
        </nav>
    </body>
</html>

Terus beralih ke style.css yg masih kosong...Tambahkan kode dibawah buat settingan dasar...

nav {
    background-color: rgba(93, 236, 189, 0.6);
    position: relative;
    padding: 45px 0 45px 18px;
}

nav ul {
    list-style: none;
}

Tampilan awal kek gini :

Terus di nav ul kita ilangin margin sama paddingnya, jadinya kek gini :

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Okay... terus tambain css buat children pertama dari ul, kyk gini :

1
2
3

nav > ul > li {
    float: left;
}

Terus tambain pseudo kek gini :

nav ul::after {
    content: '';
    display: block;
    clear: both;
}

Naah klu diperhatiin semua menunya udah masuk dalam nav element (masuk ke warna cyannya) soalnya udah ditambain block untuk setiap ul.
Siipss...berikutnya kita ke anchor element....

nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
}

nav ul li a:hover {
    background-color: #399939;
}

Naah berikutnya kita target submenunya...

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: rgba(0, 102, 102, .7);
}

nav ul li:hover {
    background-color: rgba(0, 102, 102, .7);
}

nav ul li:hover > ul {
    display: block;
}

Hasil :

Naah... sampai sini sebenarnya udaah selseee navigasi css yang sederhana.. :v.. Cuman karena terlalu pendek... baiknya kita tambain submenu ajjah yg akan dilanjutkan di part berikutnya... :-)

Membuat Drag and Drop Angka di Javascript - I

Ookie disini kita setting awal projectnya dulu... Jadi silahkan cari list angka2 dari google, trs tempatin dalam suatu folder, ters buat index.hmtl, style.css, dan script.js... semuanya akan terlihat seperti ini :

Isi index.html seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Drag Drop Angka </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    
    <script src="script.js"></script>
    </body>
</html>

Seeepsss... berikutnya kita masukin semua angka-angka kita kedalam file html, contoh 1 biji kek gini propertinya...

1 2	<img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a" style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

Jadi klu dimasukin semua angkanya.. jadinya seperti ini :

    <body>
        <img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a"
        style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_1a' src="_angka/1a.png" alt="angka_1a"
        style="position: absolute; left: 44px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_2a' src="_angka/2a.png" alt="angka_2a"
        style="position: absolute; left: 54px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_3a' src="_angka/3a.png" alt="angka_3a"
        style="position: absolute; left: 664px; top: 234px; z-index: 7;" />

        <img draggable="true" id='angka_4a' src="_angka/4a.png" alt="angka_4a"
        style="position: absolute; left: 274px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_5a' src="_angka/5a.png" alt="angka_5a"
        style="position: absolute; left: 40px; top: 534px; z-index: 7;" />

        <img draggable="true" id='angka_6a' src="_angka/6a.png" alt="angka_6a"
        style="position: absolute; left: 340px; top: 304px; z-index: 7;" />

        <img draggable="true" id='angka_7a' src="_angka/7a.png" alt="angka_7a"
        style="position: absolute; left: 734px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_8a' src="_angka/8a.png" alt="angka_8a"
        style="position: absolute; left: 500px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_9a' src="_angka/9a.png" alt="angka_9a"
        style="position: absolute; left: 600px; top: 550px; z-index: 7;" />
    
        <script src="script.js"></script>
    </body>

Kalu kita liad disitu ada draggable = "true", itu mskdnya biar tar bisa didrag...berikutnya kita taroin styling cursor move di css kyk gini :

Hasilnya :

(cursor movenya g' bisa diprint screent trnyata.. :D)

Siipsss.... sampai disini dl... berikutnya kita akan beralih kebagian javascriptnya... See yaa in the next post...

Wednesday, August 29, 2018

Membuat Video Sebagai Background Web

Pertama-tama kita buat foldernya terus ditaroin file html sama video yang ingin kita pake sebagai background kyk gambar dibawah :

Terus didalem mainfile.html kita tambain kode buat videobackgroundnya dl kek gini :

Klu udah nambain kyk kode diatas, trs kita buka mainfile.html, hasilnya seperti ini :

Jadi videonya udah running dibackground... yeeaaah..... Berikutnya kita tambain sesuatu diatas videonya kyk gini ajjah yg simpel...

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause">Pause</button></div>
        </div>
    </body>
</html>

Hasilnya :

Terus berikutnya kita nambain handler buat button yg paling bawah buat ngepause dan ngeplay kembali videonya... So tambahkan script kyk gini :

        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>

Naaah... dengan script itu kita bisa ngplay dan/atau ngepause videonya.... :D

Siipss... sekians dan terima kasih... semoga bermanfaaat... :-)

Source code lengkapnya :

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause()">Pause</button></div>
        </div>
        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>
    </body>
</html>