Juanas Smith Shared: css

Tampilkan postingan dengan label css. Tampilkan semua postingan

Selamat Siang kali ini admin akan membahas Chat Bubble dengan CSS dan JQuery, langkah pertama buat dulu kerangka htmlnya seperti berikut

<!DOCTYPE html>
<html>
<head>
<title>Facebook Like Chat</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="style.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_head">Chatbox</div>
<div class="chat_body">
<div class="user">Juanas Smith</div>
</div>
</div>

<div class="msg_box" style="right: 290px">
<div class="msg_head">Juanas Smith
<div class="close">x</div></div>
<div class="msg_wrap">
<div class="msg_body">
<div class="msg_a">This is from A</div>
<div class="msg_b">This from B</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer">
<textarea rows="2" class="msg_input" placeholder="Press Enter to send Message"></textarea>
</div>
</div>
</div>
</body>
</html>

kemudian buat style CSS nya seperti berikut

body {

       background-color: #16a085;

       margin: 0px;

       font-family: sans-serif;

       }



       .chat_box, .msg_box {

       cursor: pointer;

       position: fixed;

       bottom: 0px;

       right: 20px;

       background: white;

       width : 250px;

/*height: 400px;*/

       border-radius: 5px 5px 0px 0px;

       }



       .msg_box {

/*height: 350px;*/

       bottom: -5px;

       }



       .chat_head,.msg_head {

       background: #f39c12;

       padding: 15px;

       color: white;

       font-weight: bold;

       border-radius: 5px 5px 0px 0px;

/*position: fixed;*/

       }



       .chat_body {

       height: 400px;

       }



       .user {

       padding: 20px 25px;

       position: relative;

       cursor: pointer;

       }



       .user:hover {

       background: #f8f8f8;

       }



       .user:before {

       content: "";

       position: absolute;

       background-color: #2ecc71;

       width: 10px;

       height: 10px;

       left: 8px;

       top: 24px;

       border-radius: 50%;

       }



       .msg_head {

       background: #3498db;

       }



       .close {

       float: right;

       }



       .msg_body {

       height: 250px;

       font-size: 12px;

       overflow-y: auto;

       overflow-x: hidden;

       background: #bdc3c7;

       }



       .msg_input {

       border-color: transparent;

       border-top: 1px solid silver;

       width: 100%;

       box-sizing: border-box;

       -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

       }



       .msg_a {

       margin-top: 10px;

       margin-right: 20px;

       min-height: 20px;

       padding: 15px;

       background: #99ffcc;

       margin-left: 20px;

       position: relative;

       border-radius: 5px;

       color: white;

       }



       .msg_a:before {

       content: "";

       position: absolute;

       width: 0px;

       height: 0px;

       top: 7px;

       left: -30px;

       border: 15px solid;

       border-color: transparent #99ffcc transparent transparent;

       }



       .msg_b {

       margin-top: 10px;

       width: auto;

       margin-right: 20px;

       min-height: 20px;

       padding: 15px;

       background: #ffff99;

       margin-left: 20px;

       position: relative;

       border-radius: 5px;

       color: black;

       }



       .msg_b:before {

       content: "";

       position: absolute;

       width: 0px;

       height: 0px;

       top: 7px;

       right: -30px;

       border: 15px solid;

       border-color: transparent transparent transparent #ffff99;

       }

kemudian buat style javascriptnya, untuk javascriptnya ini memerlukan jquery, silakan anda download dulu jquery dari website resminya. untuk javascriptnya seperti berikut

$(document).ready(function() {

    $('.chat_head').click(function(){

    $('.chat_body').slideToggle('slow');

    // $('.user').slideToggle('slow');

    });



    $('.msg_head').click(function(){

    $('.msg_wrap').slideToggle('slow');

    // $('.msg_box').slideToggle('slow');

    });



    $(".close").click(function(){

    $('.msg_box').hide();

    });



    $(".user").click(function(){

    $('.msg_wrap').show();

    $('.msg_box').show();

    });



    $('textarea').keypress(function(e){

    if(e.keyCode == 13) {

    var msg = $(this).val();

    $(this).val('');

    $("<div class='msg_b'>"+msg+"</div>").insertBefore('.msg_insert');

    $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);

    }

    });

});

langkah terakhir silakan test hasilnya di browser jika tampilanya seperti gambar di atas maka anda telah berhasil, ok sekian dulu tutorial kali ini, jika ada yang ditanyakan silakan tulis pada kolom komentar di bawah. jika artikel ini bermanfaat silakan bagikan ke teman anda.

Assalamualikum Wr. Wb. Selamat Pagi Semuanya. Kali ini saya mau berbagi tutorial cara membuat background video seperti websitenya unity. Jika kalian pernah mengunjungi websitenya unity 3d engine pasti pernah melihat backgroundnya itu menggunakan video, nah bagaimanakah cara membuat background video seperti itu? ternyata caranya cukup mudah hanya mengandalkan style CSS. Ok langsung saja untuk membuatnya siapkan satu buah video lalu buat sebuah file html, isinya seperti berikut, untuk stylenya saya gabungkan di dalam htmlnya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Background Video</title>
    <style media="screen">
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
        overflow-x: hidden;
      }
      .v-header {
        height: 100vh;
        display: flex;
        align-items: center;
        color: #fff;
      }
      .container {
        max-width: 960px;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: auto;
        text-align: center;
      }
      .fullscreen-video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .fullscreen-video-wrap video {
        min-width: 100%;
        min-height: 100%;
      }
      .header-overlay {
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        background: #225470;
        z-index: 1;
        opacity: 0.85;
      }
      .header-content {
        z-index: 2;
      }
      .header-content h1{
        font-size: 50px;
        margin-bottom: 0;
      }
      .header-content p {
        font-size: 1.5rem;
        display: block;
        padding-bottom: 2rem;
      }
      .btn {
        background: #34b3a0;
        color: #fff;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
      }
      .section {
        padding: 20px 0;
      }
      .section-b {
        background: #333;
        color: #fff;
      }

      @media(max-width:960px) {
        .container {
          padding-left: 3rem;
          padding-right: 3rem;
        }
      }
    </style>
  </head>
  <body>
    <header class="v-header container">
        <div class="fullscreen-video-wrap">
          <video src="video.mp4" autoplay loop="true" poster="youtube.jpg"></video>
        </div>
      <div class="header-overlay"></div>
      <div class="header-content">
        <h1>Hello Everyone</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariat</p>
        <a href="#" class="btn">Read More</a>
      </div>
    </header>

    <section class="section section-a">
      <div class="container">
        <h1>Section A</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <section class="section section-b">
      <div class="container">
        <h1>Section B</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
  </body>
</html>

Lihat Demo

Ok Sekianlah tutorial kali ini, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar di bawah. jika artikel ini bermanfaat silakan di share

Misalkan anda mempunyai beberapa file PHP dan anda ingin menyatukan beberapa file PHP tersebut menjadi sebuah halaman menjadi beberapa blok. ini juga pernah saya alami waktu saya dikasih tugas desain Pemerograman web. kita akan membuat desain web dengan html dan css untuk menempatkan file-file PHP tersebut. pertama kita buat dulu kerangka htmlnya seperti berikut:

<html>
<head><title>Tugas</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Francois One', sans-serif;
background: url("1.jpg");
}
.header {
height: 150px;
background-color: rgba(10, 100, 205, 0.9);
padding: 0;
font-family: 'Francois One', sans-serif;
}
.left {
width: 50%;
float: left;
background-color: transparent;
}
.right {
width: 50%;
float: right;
}
.box1{
margin: 25px auto;
padding: 10px;
width: 400px;
border-radius: 10px;
border: 1px solid #ddd;
background: linear-gradient(-90deg, rgba(0,0,255,0.6), rgba(0,255,0,0.6));
text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 0.2em yellow;
}
label {
width: 85px;
height: auto;
float: left;
margin: 8px auto;
}
input[type=text]{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
background: blue;
}
input[type=text]:hover{
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
background: #fff;
}
input[type=submit], input[type=reset]{
padding: 5px;
width: 90px;
cursor: pointer;
border-radius: 5px;
border: none;
background: #fff;
margin: 5px 95px;
display: inline-block;
}
input[type=submit]:hover, input[type=reset]:hover{
background: rgba(0,0,0,0.5);
color: #fff;
}
.footer {
heigh: 100px;
background-color: #ccc;
padding: 10px;
font-weight: bold;
}
.clear {
clear: both;
}
.h1, .h2{
text-align: center;
}
ul {
list-style: none;
background-color: yellow;
width: 100%;
bottom: 0;
text-align: center;
}
li{
display: inline-block;
padding: 10px;
background-color: yellow;
}
li:hover {
background-color: blue;
color: #fff;
}
li:current {
background-color: orange;
}
a {
text-decoration: none;
}
a:hover{
color: #fff;
}
right {
float: right;
}
select, textarea{
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid lightblue;
margin: 5px auto;
}
</style>
</head>
<body>
<div class="header">
<br>
<h1 class="h1">Tugas Pemerograman PHP dengan style CSS</h1>
<h2 class="h2">Diki Munggaran 1501110039</h2>
<br>
<ul>
<li><a href="?page=bab1">Bab 1</a></li>
<li><a href="?page=bab2">Bab 2</a></li>
<li><a href="?page=bab3">Bab 3</a></li>
<li><a href="?page=bab4">Bab 4</a></li>
<li><a href="?page=bab5">Bab 5</a></li>
<li><a href="?page=bab6">Bab 6</a></li>
<li><a href="?page=bab7">Bab 7</a></li>
<li><a href="?page=bab8">Bab 8</a></li>
</ul>
</div>
<?php
if(isset($_GET['page'])){
$page=htmlentities($_GET['page']);
}else{
$page="bab1";
}

$file="$page.php";
$cek=strlen($page);

if($cek>30 || !file_exists($file) || empty($page)){
include ("bab1.php");
}else{
include ($file);
}
?>
<div class="clear">
<div class="footer">
Copyright © <?php echo date("Y");?> Diki Munggaran All Right Reserved. <right>We made with love</right>
</div>
</body>
</html>

Simpan file diatas dengan nama index.php atau nama lain sesuai keinginan anda. selanjutnya kita buat file bab4.php berikut ini scriptnya:

Untuk file bab1 sampai bab8 cara penulisanya sama seperti bab4.php cuma beda isinya saja. untuk file phpnya bisa anda download disini. atau jika ingin yang udah jadi bisa di download disini

Selamat siang, kali ini admin masih membahas tentang animasi. pada kesempatan kali ini kita akan membuat animasi glowing dots dengan HTML dan CSS.

Langkah pertama buat dulu struktur HTML nya seperti dibawah :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glowing Dots</title>
<link rel="stylesheet" href="css/glowing.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Selanjutnya masukan kode CSS berikut

body {
        margin: 0;        padding: 0;        background: #262626;        }
        ul {
        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        margin: 0;        padding: 0;        display: flex;        }
        ul li {
        list-style: none;        width: 40px;        height: 40px;        background: #fff;        border-radius: 50%;        animation: animate 1.6s ease-in-out infinite;        }
@keyframes animate {
        0%, 40%, 100% {
        transform: scale(0.2);        }
        20% {
        transform: scale(1);        }
        }
        ul li:nth-child(1)
        {
        animation-delay: -1.4s;        background: #ffff00;        box-shadow: 0 0 50px #ffff00;        }
        ul li:nth-child(2)
        {
        animation-delay: -1.2s;        background: #76ff03;        box-shadow: 0 0 50px #76ff03;        }
        ul li:nth-child(3)
        {
        animation-delay: -1s;        background: #f06292;        box-shadow: 0 0 50px #f06292;        }
        ul li:nth-child(4)
        {
        animation-delay: -0.8s;        background: #4fc3f7;        box-shadow: 0 0 50px #4fc3f7;        }
        ul li:nth-child(5)
        {
        animation-delay: -0.6s;        background: #ba68c8;        box-shadow: 0 0 50px #ba68c8;        }
        ul li:nth-child(6)
        {
        animation-delay: -0.4s;        background: #f57c00;        box-shadow: 0 0 50px #f57c00;        }
        ul li:nth-child(7)
        {
        animation-delay: -0.2s;        background: #673ab7;        box-shadow: 0 0 50px #673ab7;        }

Sekarang lihat hasilnya di browser jika tampilanya seperti di atas berarti animasi glowing dots anda sudah jadi, selamat mencoba. jika artikel ini bermanfaat silakan share ke teman anda

Lihat Demo

Selamat Siang kali ini kita akan membuat Div bubble dengan menggabungkan bentuk persegi panjang dan segitiga kemudian pinggiranya diberi border dan hasilnya seolah-olah hanya satu bentuk. div buble ini bisa digunakan untuk menampilkan komentar, untuk chat bubble dll.

langsung saja, ini scriptnya:

<!DOCTYPE html>
<html>
<head>
                <title>Div Bubble Box</title>
                <style type="text/css">
                                body {
                                                background-color: #de302f;
                                                font-family: sans-serif;
                                                font-size: 14px;
                                                line-height: 1.4;
                                                color: #fff;
                                                font-weight: 100;
                                }
                                .container {
                                                position: relative;
                                                margin: 50px auto;
                                                max-width: 600px;
                                                height: auto;
                                                border: 2px solid #fff;
                                                padding: 30px;
                                                box-sizing: border-box;
                                }
                                .container:after {
                                                position: absolute;
                                                width: 50px; height: 50px;
                                                content: '';
                                                transform: rotate(45deg);
                                                margin-top: -25px;
                                                background-color: #de302f;
                                }
                                .satu:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 100%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                                .dua:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: 50%;
                                                left: 0%;
                                                margin-left: -27px;
                                                content: '';
                                }
                                .tiga:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 50%;
                                                right: 0%;
                                                margin-right: -27px;
                                                content: '';
                                }
                                .empat:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: -2%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                </style>
</head>
<body>
                <div class="container satu">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container dua">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor      sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container tiga">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container empat">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
</body>
</html>

Sekianlah tutorial kali, selamat mencoba, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar dibawah.

Langganan: Postingan ( Atom )

Membuat Chat Bubble Seperti di Facebook dengan CSS dan jQuery

Cara Membuat Background Video dengan CSS seperti websitnya unity

Menyatukan beberapa file PHP menjadi sebuah halaman berbentuk kotak-kotak dan memisahkanya per Bab

Membuat Animasi Glowing Dots dengan CSS dan HTML

Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Membuat Chat Bubble Seperti di Facebook dengan CSS dan jQuery

Share story

Cara Membuat Background Video dengan CSS seperti websitnya unity

Share story

Menyatukan beberapa file PHP menjadi sebuah halaman berbentuk kotak-kotak dan memisahkanya per Bab

Share story

Membuat Animasi Glowing Dots dengan CSS dan HTML

Share story

Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive