Background image gradient tidak selalu harus menggunakan image jpg atau png. Bisa juga memanfaatkan kode css, seperti pada contoh di bawah ini.
<html>
<head>
<title>Latihan CSS</title>
<style>
body {
background-image : linear-gradient(to right, #ff5722, #ff9800);
}
</style>
</head>
<body>
</body>
</html>
Kode css yg di gunakan pada bagian ini
body {
background-image : linear-gradient(to right, #ff5722, #ff9800);
}
Silahkan mencoba semoga berhasil, wassalam.
Bagaimana cara membuat navigasi di bawah halaman dengan posisi yang selalu muncul alias tidak terbawa scroll ketika halaman keatas.
Berikut adalah contoh kode untuk membuat navigasi di bawah halaman. Pertama buat file html seperti dibawah nama file misalkan index.html.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Endang Cahya Permana</title>
<!-- Library bootstrap 4 //-->
<link rel="stylesheet" href="bootstrap-4.0.0/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-4.0.0/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/popper.min.js"></script>
<!-- Library iconic glyphicon //-->
<link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<!-- Kode css halaman //-->
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="main">
</div>
</div>
<footer id="nav-footer">
<div class="row">
<div class="col nav-item-footer">
<span class="oi oi-menu" title="icon home" aria-hidden="true"></span>
</div>
<div class="col nav-item-footer">
<span class="oi oi-cart" title="icon cart" aria-hidden="true"></span>
</div>
<div class="col nav-item-footer">
<img src="images/whatsapp20.png">
</div>
</div>
</footer>
</body>
</html>
Include kan library di bagian tag head.
<!-- Library bootstrap 4 //-->
<link rel="stylesheet" href="bootstrap-4.0.0/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-4.0.0/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/popper.min.js"></script>
<!-- Library iconic glyphicon //-->
<link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
File library di atas bisa di download di halaman website resminya.
Didalam file style.css masukan kode di bawah.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#nav-footer {
background: #3b589d;
position: fixed;
height: 45px;
width: 100%;
bottom: 0px;
}
.nav-item-footer {
text-align: center;
color: #fff;
font-size: 20px;
padding-top: 6px;
}
Link : Download File ZIP
Semoga bermanfaat. wassalam.
Navbar merupakan bagian yang tidak terpisahkan dalam halaman sebuah website. Wajib ada dan di butuhkan dalam sebuah website, mungkin seperti itu. Dalam pembuatan sebuah navbar bisa dengan berbagai cara. Ada yang menggunakan script html, javascript dan css, ada yang hanya css. Untuk contoh di atas pembuatan navbar hanya menggunakan css dan html saja. Silahkan coba script di bawah ini.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=
swap"
rel="stylesheet">
<style>
header {
margin-top: 60px;
}
img {
display: block;
width: 100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Montserrat", sans-serif;
padding: 0 5%;
height: 60px;
background-color: #3e65da;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 18px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-weight: bold;
font-size: 14px;
color: #fff;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -60px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo{
float: none;
width: auto;
justify-content: center;
}
nav .links{
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 60px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0, 0, 0, .8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a{
font-size: 14px;
}
nav .icon-burger{
display: block;
}
nav :checked ~ .links {
bottom: 0;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<input id="nav-toggle" type="checkbox">
<div class="logo">
Logo<strong>Perusahaan</strong>
</div>
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</div>
</header>
<img src="https://picsum.photos/200/300?random=1">
</body>
</html>
Hasil tampilan website
Semoga bermanfaat, salam koding, wassalam.
Display Flex atau Display Flexible merupakan property yang di sediakan oleh CSS3. Tujuan diplay flex adalah memberikan container kemampuan untuk dapat memanipulasi item-item /elemen yang ada didalamnya (merubah tinggi dan lebar, urutan posisi elemen, dan spasi (jarak) diantara elemen).
Pernah berkunjung ke sebuah alamat website, terus ketika scroll halaman ada bagian komponen atau elemen web yang ke tutup, tapi ada elemen yang tetep ke bawa-bawa ngikut keatas ikut ke bawah ikut sampai pada posisi tertentu. Nah yang element yang ikut-ikut itu istilahnya dalam web disebut affix.
Apa itu affix plugin? affix plugin yaitu plugin yang berfungsi untuk mengunci(locked) element pada area tertentu pada halaman web.
Bootstrap 3 sudah menyiapkan plugin affix ini. Apa itu bootstrap, anda bisa cari info di google. Kurang lebih seperti ini.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Bootstrap adalah framework HTML, CSS dan Javascript yang sangat populer untuk membangun website yang responsive baik itu di PC atau di Mobile Smartphone.
Untuk contoh pemakaiannya cuplikan penggunaan affix adalah sebagai berikut.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
untuk menu horizontal
dan
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
untuk menu vertical.
semoga bermanfaat. wassalam.
Cara untuk membuat div agar posisi dibawah kanan, contoh scriptnya berikut
<html> <head> <title>Absolute Positioning</title> <style rel='stylesheet' type='text/css'> body { background: yellowgreen; } div { position: absolute; background: yellow; padding: 5px; width: 100px; height: 100px; } div#bottom-right { bottom: 0; right: 0; border-left: 1px solid black; border-top: 1px solid black; background: red; } </style> </head> <body> <div> normal </div> <div id='bottom-right'> Bottom, Right </div> </body> </html>
Untuk membuat posisi div ingin berada di bawah kanan pada browser caranya tidak sulit. contoh kodenya adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css Position Fixed Bottom</title>
<style>
.nav-fixed {
background: #FF5722;
position: fixed;
bottom: 0;
right: 0;
padding: 8px 15px;
margin-right: 5px;
color: #fff;
}
.nav-fixed-radius {
border-radius: 4px 4px 0 0;
}
</style>
</head>
<body>
</body>
</html>
Jika dilihat pada contoh kode di atas, Kunci attribut yang di pergunakan agar porsisi div dibawah adalah pada atribut position : fixed, bottom: 0, dan right: 0.
silahkan coba sendiri untuk ber eksperimen. wassalam.
Secara default Navigator Menu Atau Dropdown Menu akan memunculkan submenunya ketika diklik. Namun, bagaimana caranya jika Dropdown menu akan muncul ketika mouse berada diatas menu, yakni dengan menambahkan kode javascript berikut.
<[removeSpace]script type="text/javascript">
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
<[removeSpace]/script>
catatan : hapus tulisan [removeSpace]
Ok, semoga bermanfaat, wassalam :-).
Modal Overlays di pergunakan untuk memblok layar sementara pada halaman web,
secara teknis layar modal ini berada pada posisi layer yang lainnya, dengan demikian layer-layer dibawahnya tidak bisa di akses. Mengapa ini di pakai, adalah memberi tahukan sedang ada proses kepada user, sehingga user dapat menunggu hingga proses yang berjalan selesai.
Bagaimana membuatnya … berikut adalah contoh kode untuk membuat modal overlays dengan menggunakan css dan jquery.
Kode CSS yang digunakan adalah sebagai berikut :
#loading-img {
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
height: 100%;
z-index: 20;
}
.overlay {
background: #e9e9e9;
display: hide;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Kode JQuery yang digunakan adalah sebagai berikut :
$(“#button”).click(function () {
$(“.overlay”).show();
});
Dan, kode HTML yang digunakan adalah sebagai berikut :
<[remove_this]div class=”overlay”>
<[remove_this]div id=”loading-img”><[remove_this]/div>
<[remove_this]/div>
semoga bermanfaat, wassalam.
Berita gembira bagi pengguna bootsrap (salah satu html, css dan js framewok paling populer), sekarang sudah keluar bootstrap versi 4 untuk versi terbarunya. silahakan di download di web resmi.
jika sudah mendownload dan mengextract compressnya, didalamnya sudah terdapat file source untuk kode scss nya. bagi yang belum tahu apa itu scss silahkan searching mbah google.
Endang Cahya Permana 
