Dimensi TutupBotol: CSS

Showing posts with label CSS. Show all posts

Wednesday, October 9, 2019

Main ROTASI di CSS

ate

CSS

HTML

Monday, November 26, 2018

Konversi SASS ke CSS menggunakan GruntJS

Dipostingan sebelumnya kita udan nyiapin environment development buat gruntjs. Trs udah nyoba2in juga gimana caranya ngebuat dan ngerunning task. So dipostingan ini kita akan mencoba mengkompile atw mengkonvert sass ke css menggunakan gruntjs.

Pertama-tama, mari kita buat kode sass yang sangat sederhana saja seperti terlihat pada gambar dibawah :

Jadi intinya kita ngebuat folder baru 'sass'. Terus didalem sass ini ada file adimixins.scss yang isinya bisa dilihat diatas. Terus mixins tersebut diload di styles.scss....
Siiipssss.... Berikutnya kita install dl package dari npm yaitu node-sass dan grunt-sass buat ngekonvert file sass tersebut diatas ke csss. Cara installnya bisa dilihat dicommand prompt screen dibawah :

Jadi sekarang kita udah punya grunt-sass dan node-sass di packge.json kita seperti terlihat dibawah :

Okie berikutnya kita load grunt-sass di Gruntfile.js. Untuk ngeload kita bisa liad contohnya di grunt-sass pagenya. Dari page tersebut kita masukin kode dibawah :

module.exports = function(grunt) {
    const sass = require('node-sass');
    // Configuration
    grunt.initConfig({
        // pass in options to plugins
        // refenrece to files etc
        sass: {
            options: {
                implementation: sass
            },
            dist: {
                files: [{
                    src: 'sass/styles.scss',
                    dest: 'css/main.css'
                }]
            }
        }
    });

    
    // Load plugins
    grunt.loadNpmTasks('grunt-sass');

    
    // Register tasks
    grunt.registerTask('convert-sass', 'sass');
    
    grunt.registerTask('run', function() {
        console.log('running task from grunt');
    });

    grunt.registerTask('testajjah', function() {
        console.log('running test task from grunt');
    });

    grunt.registerTask('allTasks', ['run', 'testajjah'])
}

Kode diatas intinya ngebuat konfigurasi sassnya. Jadi styles.scss (di sass/styles.css) yang bakalan dikonvert ke css yang lokasinya di css/main.css. Trs di line 22, kita ngeload grunt-sassnya dan diline 26 kita ngebuat grunt task yang baru. So klu kita run 'grunt convert-sass', hasilnya adalah :

Siipss... sekian untuk proses konversinya... semoga bermanfaat... :-)

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... :-)

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>