Dalam membangun sebuah website CSS merupakan salah satu hal yang penting. CSS berperan untuk menciptakan tampilan yang menarik serta dapat membantu pengguna memiliki pengalaman yang menyenangkan saat mengakese website. Dengan menggunakan CSS kamu dapat menentukan ukuran, warna, posisi, dan elemen visual lainnya.
10 Contoh CSS Menarik Untuk Website Design
Dalam kesempatan kali ini kami akan memberikan kamu 10 contoh CSS menarik untuk website desiain yang mungkin bisa kamu jadikan sebagai inspirasi saat membuat portofolio website kamu sendiri.
1. Efek Hovering pada Skala Elemen
Efek hovering skala adalah salah satu cara untuk memberikan respons visual pada elemen saat pengguna mengarahkan kursor ke atasnya. Ketika kursor berada di atas elemen, elemen tersebut akan mengalami perubahan ukuran yang membuatnya terlihat lebih besar atau lebih kecil dari ukuran aslinya.
Cara kerja efek hovering skala biasanya menggunakan CSS dengan memanfaatkan properti transform dan transition. Pertama, kita mendefinisikan elemen yang ingin diberi efek hovering skala. Kemudian, kita menetapkan transisi (transition) pada elemen tersebut, yang akan mengatur kecepatan dan gaya animasi perubahan ukuran.
Selanjutnya, saat pengguna mengarahkan kursor ke elemen tersebut, kita mengubah properti transform elemen dengan menggunakan pseudoclass :hover pada CSS. Properti transform dengan nilai scale digunakan untuk mengubah ukuran elemen, di mana nilai 1.0 adalah ukuran asli, sedangkan nilai di atas 1.0 akan membuat elemen terlihat lebih besar dan nilai di bawah 1.0 akan membuat elemen terlihat lebih kecil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="scale-effect">
<h2>Elemen dengan Efek Skala</h2>
</div>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
.scale-effect {
transition: transform 0.3s ease;
}
.scale-effect:hover {
transform: scale(1.2);
}
2. Efek Loading Pada Button
Pada contoh di atas, tombol dengan kelas "loading-button" dibuat dengan menggunakan CSS. Efek animasi loading diimplementasikan dengan menggunakan pseudo-elemen :before. Pseudo-elemen ini memiliki animasi yang memindahkan posisinya dari kiri ke kanan sejauh 100% lebar tombol dalam waktu 2 detik.
Latar belakang pseudo-elemen tersebut memiliki warna semi-transparan untuk memberikan efek loading yang terlihat di belakang teks tombol. Anda dapat menyesuaikan ukuran tombol, warna latar belakang, dan gaya lainnya sesuai dengan preferensi desain kamu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<h1 class="creative-text">Welcome to <span>My Website</span></h1>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
.creative-text {
font-size: 48px;
color: #333;
text-align: center;
}
.creative-text span {
display: inline-block;
font-size: 60px;
color: #4CAF50;
animation: textAnimation 2s ease-in-out infinite;
}
@keyframes textAnimation {
0% {
transform: scale(1);
color: #4CAF50;
}
50% {
transform: scale(1.2);
color: #FFC107;
}
100% {
transform: scale(1);
color: #4CAF50;
}
}
3. Efek pada Typography
Pada contoh di atas, elemen judul <h1> dengan kelas "creative-text" memiliki teks "Welcome to" diikuti dengan elemen <span> yang berisi teks "My Website". Efek animasi kreatif diterapkan pada elemen <span> menggunakan CSS. Animasi tersebut mengubah ukuran teks dan warna pada dua tahap yaitu saat 50% dan 100% dari animasi.
Teks akan memperbesar ukurannya dan berubah warna menjadi kuning pada tahap pertama, kemudian kembali ke ukuran semula dan warna hijau pada tahap kedua. Animasi ini akan berulang secara terus-menerus menggunakan infinite pada properti animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<h1 class="creative-text">Welcome to <span>My Website</span></h1>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
.creative-text {
font-size: 48px;
color: #333;
text-align: center;
}
.creative-text span {
display: inline-block;
font-size: 60px;
color: #4CAF50;
animation: textAnimation 2s ease-in-out infinite;
}
@keyframes textAnimation {
0% {
transform: scale(1);
color: #4CAF50;
}
50% {
transform: scale(1.2);
color: #FFC107;
}
100% {
transform: scale(1);
color: #4CAF50;
}
}
4. Efek hovering pada Button
Pada contoh di atas, kita menggunakan CSS untuk memberikan efek gelombang pada tombol saat dihover. Kelas "wave-button" diterapkan pada elemen <button> untuk menerapkan gaya tombol. Properti position: relative; digunakan untuk mengatur elemen sejajar dengan posisinya yang asli.
Pseudo-elemen ::before digunakan untuk membuat latar belakang gelombang. Pada kode ini, kita mengatur posisi latar belakang ke tengah tombol menggunakan transformasi translate(-50%, -50%);. Lebar dan tinggi latar belakang awalnya diatur sebagai 0 sehingga tidak terlihat. Pada saat hover (:hover), kita mengubah lebar dan tinggi latar belakang menjadi 200% sehingga menciptakan efek gelombang yang membesar. Selain itu, kita mengatur opasitas menjadi 1 sehingga latar belakang terlihat dengan transparansi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<button class="wave-button">Click Me</button>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
.wave-button {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4CAF50;
border: none;
cursor: pointer;
overflow: hidden;
}
.wave-button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.wave-button:hover:after {
width: 200%;
height: 200%;
opacity: 1;
}
5. Efek overlay pada image
Pada contoh di atas, kita menggunakan CSS untuk memberikan efek overlay pada gambar saat dihover. Di dalam kontainer gambar (<div class="image-container">), kita meletakkan elemen gambar (<img>) dan elemen overlay (<div class="overlay">).
Kelas "image-container" diterapkan pada elemen kontainer untuk mengatur posisi relatif dan tata letak inline-block. Kelas "overlay-image" diterapkan pada elemen gambar untuk memastikan bahwa gambar menempati seluruh lebar kontainer.
Kelas "overlay" diterapkan pada elemen overlay dan menggunakan properti position: absolute; untuk mengatur posisi absolut di atas gambar. top: 0; left: 0; digunakan untuk mengatur posisi overlay di pojok kiri atas kontainer. Background color diatur dengan rgba(0, 0, 0, 0.5) yang mewakili warna hitam dengan tingkat transparansi 0.5. Awalnya, kita mengatur opasitas overlay menjadi 0 sehingga tidak terlihat. Namun, saat dihover (:hover), kita mengubah opasitas menjadi 1 sehingga overlay terlihat dengan transparansi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="image-container">
<img src="gambar.jpeg" alt="Gambar" class="overlay-image" >
<div class="overlay">
<h1 class="text-overlay">hello world</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>.container{
height: 100vh;
}
.image-container {
position: relative;
display: inline-block;
}
.overlay-image {
display: block;
width: 500px;
height: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}
.text-overlay{
color: white;
}
6. Membuat Carousel menggunakan CSS
Pada contoh di atas di bagian kode HTML <div class="wrapper">: Ini adalah elemen pembungkus yang mengelilingi elemen carousel. Ini diperlukan untuk membuat efek overlay pada tombol navigasi. Anda dapat menerapkan gaya dan memodifikasi elemen ini sesuai kebutuhan desain Anda. <div class="carousel" tabindex="0">: Ini adalah elemen utama carousel yang memiliki kelas "carousel". Properti tabindex="0" diberikan untuk membuat elemen ini dapat menerima fokus saat interaksi keyboard. Ini memungkinkan pengguna menggunakan tombol panah untuk menggulir melalui slide.
Kemudian untuk <div class="slide">: Ini adalah elemen slide dalam carousel. Setiap slide terdiri dari gambar dan tautan navigasi yang terletak di atas dan di bawah gambar. Anda dapat menambahkan lebih banyak elemen atau mengubah tampilan slide sesuai kebutuhan. <a href="#item-4">Slide 4</a>: Ini adalah tautan navigasi di dalam slide. Setiap tautan memiliki atribut href yang mengarahkan ke slide tertentu. Misalnya, tautan ini mengarahkan ke slide dengan ID "item-4". Anda dapat mengubah teks tautan dan mengatur href sesuai dengan kebutuhan.
Selanjutnya <img id="item-1" src="<https://source.unsplash.com/random/800x500?1>" alt="">: Ini adalah elemen gambar dalam slide. Setiap gambar memiliki atribut src yang menunjukkan sumber gambar dan atribut alt yang memberikan teks alternatif untuk aksesibilitas. ID pada gambar yang sesuai dengan href pada tautan navigasi memungkinkan navigasi yang tepat saat menggunakan tombol panah.
Kemudian pada bagian CSS Kelas .carousel digunakan untuk elemen carousel utama. Ini diberi properti position: relative; untuk mengatur posisi relatif terhadap konten sekitarnya dan display: flex; untuk mengatur tampilan elemen-elemen dalam satu baris. overflow-x: auto; mengaktifkan guliran horizontal jika kontennya melebihi lebar kontainer. Sementara itu, scroll-behavior: smooth; memberikan efek animasi saat bergeser, dan scroll-snap-type: x mandatory; mengaktifkan snap saat menggulir ke elemen-elemen carousel. Properti lain seperti z-index dan :focus diberikan untuk memberikan gaya tambahan saat interaksi dengan carousel.
Selanjutnya Kelas .wrapper digunakan sebagai pembungkus elemen carousel untuk menciptakan efek overlay pada tombol navigasi. Elemen ini menggunakan pseudo-elemen ::before dan ::after untuk membuat tampilan anak panah yang muncul di sisi kiri dan kanan carousel. Properti seperti position, width, height, background-image, dan z-index diberikan untuk mengatur tampilan dan posisi anak panah. Kelas .slide mengatur tampilan setiap slide dalam carousel. Elemen-elemen ini memiliki properti position: relative; untuk mengatur posisi relatif terhadap elemen carousel dan flex: 1 0 100%; untuk memastikan setiap slide mengisi lebar penuh carousel. scroll-snap-align: center; mengatur bahwa setiap slide akan selalu muncul di tengah saat bergeser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="wrapper">
<div class="carousel" tabindex="0">
<div class="slide">
<a href="#item-4">Slide 4</a>
<img id="item-1" src="<https://source.unsplash.com/random/800x500?1>" alt="">
<a href="#item-2">Slide 2</a>
</div>
<div class="slide">
<a href="#item-1">Slide 1</a>
<img id="item-2" src="<https://source.unsplash.com/random/800x500?2>" alt="">
<a href="#item-3">Slide 3</a>
</div>
<div class="slide">
<a href="#item-2">Slide 2</a>
<img id="item-3" src="<https://source.unsplash.com/random/800x500?3>" alt="">
<a href="#item-4">Slide 4</a>
</div>
<div class="slide">
<a href="#item-3">Slide 3</a>
<img id="item-4" src="<https://source.unsplash.com/random/800x500?4>" alt="">
<a href="#item-1">Slide 1</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
* {
box-sizing: border-box;
}
body {
max-width: 50rem;
margin: 0 auto;
padding: 2rem;
}
img {
max-width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.carousel {
position: relative;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
z-index: 0;
}
.carousel:focus {
outline: 0.25rem solid hsl(220, 60%, 60%);
outline-offset: 0.25rem;
}
.wrapper {
position: relative;
}
.wrapper::before,
.wrapper::after {
--size: 2rem;
content: '';
display: block;
position: absolute;
width: var(--size);
height: 100%;
top: 0;
left: 0.5rem;
padding: 0.25rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 10 10" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2 L2 5 L7 8" /></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
z-index: 10;
pointer-events: none;
}
.wrapper::after {
left: auto;
right: 0.5rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 10 10" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"><path d="M2 2 L7 5 L2 8" /></svg>');
}
.slide {
position: relative;
flex: 1 0 100%;
scroll-snap-align: center;
}
.slide a {
position: absolute;
top: 0;
width: 3rem;
height: 100%;
display: grid;
place-items: center;
font-size: 0;
}
.slide a:last-of-type {
top: 0;
right: 0;
}
.carousel img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel__nav ul {
margin-top: -3rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.carousel__nav a {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
color: white;
text-decoration: none;
text-shadow: 1px 1px 0 hsla(220, 20%, 20%, 0.5);
}
7. Efek gradient pada background
Pada contoh di atas digunakan untuk membuat efek latar belakang berupa gradasi warna yang bergerak secara animasi. Ketika kode ini diterapkan pada elemen <body> dalam HTML, latar belakang akan berubah-ubah dengan perpindahan warna yang mengikuti pola linear gradient.
Pada bagian pertama, properti "background" digunakan untuk mengatur latar belakang dengan menggunakan linear gradient. Warna yang digunakan adalah akan bertransisi dari satu warna ke warna lainnya. Selanjutnya, properti "background-size" dengan nilai 400% 400% menentukan ukuran latar belakang. Dalam hal ini, latar belakang akan mengisi 400% lebar dan 400% tinggi dari elemen <body> yang sedang digunakan.
Animasi pada latar belakang ini ditentukan oleh properti "animation" dengan nilai "gradient 15s ease infinite". Properti ini menandakan bahwa animasi dengan nama "gradient" akan berlangsung selama 15 detik dengan perpindahan warna yang lancar. Kata kunci "infinite" mengindikasikan bahwa animasi akan berputar secara terus-menerus. Selanjutnya, properti "height" dengan nilai 100vh menentukan tinggi elemen <body> sebesar 100% dari tinggi tampilan viewport. Ini memberikan efek latar belakang yang memenuhi seluruh layar.
Setelahnya, deklarasi "@keyframes gradient" digunakan untuk mendefinisikan animasi tersebut. Pada bagian ini, terdapat tiga peraturan untuk animasi dalam bentuk persentase: 0%, 50%, dan 100%. Setiap peraturan menentukan posisi latar belakang gradasi pada waktu tertentu. Pada 0%, latar belakang berada pada posisi 0% 50% (posisi horizontal 0% dan posisi vertikal 50%). Pada 50%, latar belakang berpindah ke posisi 100% 50%. Pada 100%, latar belakang kembali ke posisi awal yaitu 0% 50%. Dengan demikian, gradasi warna pada latar belakang akan bergerak dari kiri ke kanan dan kembali lagi dalam interval waktu animasi yang ditentukan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="d-flex flex-column justify-content-center w-100 h-100">
<div class="d-flex flex-column justify-content-center align-items-center">
<h1 class="fw-light text-white m-0">Efek gradient pada background</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>.container{
height: 100vh;
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
8. Efek Lightbox pada gambar
Lightbox adalah suatu fitur atau elemen pada sebuah website yang menampilkan konten tambahan atau gambar dalam jendela yang terpisah atau teroverlay di atas halaman utama. Ketika pengguna mengklik atau mengaktifkan suatu elemen tertentu, seperti gambar thumbnail atau tautan, lightbox akan muncul dengan konten yang lebih besar atau informasi tambahan.
Umumnya, lightbox menampilkan gambar dengan ukuran yang lebih besar sehingga pengguna dapat melihat rincian yang lebih baik. Konten tambahan, seperti deskripsi, tombol navigasi, atau video, juga dapat ditampilkan dalam lightbox. Lightbox biasanya mengaburkan atau menggelapkan latar belakang halaman web utama untuk menyoroti konten yang sedang ditampilkan dan memberikan fokus kepada pengguna.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<p>Klik untuk menampilkan efek lightbox</p>
<a href="#img1">
<img src="https://picsum.photos/seed/9/500/300">
</a>
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('https://picsum.photos/seed/9/900/450')"></span>
</a>
</div>
</div>
</div>
</body>
</html>.container{
height: 100vh;
}
html,body {
font-family: sans-serif;
padding: 0 1em;
font-size: 19px;
background: #222;
color: #aaa;
text-align:center;
}
p {
margin: 1.5em 0;
color: #aaa;
}
img {
max-height: 50vh;
}
a {
color: inherit;
}
a:hover {
color: #bbb;
}
.italic { font-style: italic; }
.small { font-size: 0.8em; }
.lightbox {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1em;
background: rgba(0, 0, 0, 0.8);
}
.lightbox:target {
display: block;
}
.lightbox span {
display: block;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
9. Select Box dengan CSS
Dalam contoh di atas, kita menggunakan elemen <div> sebagai wadah (container) untuk select box. Properti CSS position: relative; diterapkan pada wadah tersebut agar kita dapat menggunakan properti CSS position: absolute; pada elemen select nanti.
Pada elemen <select>, kita memberikan beberapa properti CSS seperti lebar (width), padding, ukuran font (font-size), border, dan border radius untuk menciptakan tampilan yang diinginkan. Properti appearance: none; digunakan untuk menghilangkan styling bawaan dari browser, sehingga kita dapat mengkustomisasi tampilan select box sesuai keinginan.
Properti :focus digunakan untuk mengubah tampilan saat select box dalam keadaan focus, seperti menghilangkan outline dan mengubah warna border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="select-box">
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>.container{
height: 100vh;
}
.select-box {
position: relative;
display: inline-block;
}
.select-box select {
width: 200px;
padding: 10px;
font-size: 16px;
border: 2px solid #181818;
border-radius: 4px;
background-color: #fff;
appearance: none;
}
.select-box select:focus {
outline: none;
border-color: #4a90e2;
}
10. Membuat Accordion dengan CSS
Accordion pada web adalah elemen interaktif yang digunakan untuk menyajikan konten dalam bentuk daftar yang dapat diperluas dan disusutkan. Umumnya, accordion terdiri dari beberapa item atau panel yang terdiri dari header dan konten terkait. Saat pengguna mengklik header, konten terkait akan muncul atau disembunyikan dengan animasi yang halus.
Tujuan utama dari accordion adalah untuk mengatur dan menyajikan konten secara terstruktur, mengurangi tampilan yang berlebihan, dan memberikan pengalaman pengguna yang lebih interaktif. Accordion sangat berguna ketika kita memiliki banyak informasi yang ingin disajikan dalam ruang yang terbatas, sehingga pengguna dapat fokus pada konten yang relevan dengan kemampuan untuk memperluas konten tambahan jika diperlukan.
Accordion sering digunakan dalam halaman FAQ (Frequently Asked Questions) atau dalam menu navigasi dengan submenu yang dapat diperluas. Dengan menggunakan teknik HTML, CSS, dan JavaScript, kita dapat membuat accordion yang responsif dan dapat diakses pada berbagai perangkat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row">
<div class="col">
<div class="accordion">
<input id="toggle1" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle1">Pure CSS Accordion 1</label>
<section>
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
<div class="accordion">
<input id="toggle2" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle2">Pure CSS Accordion 2</label>
<section>
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
<div class="accordion">
<input id="toggle3" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle3">Pure CSS Accordion 3</label>
<section>
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
<div class="accordion">
<input id="toggle4" type="radio" class="accordion-toggle" name="toggle" />
<label for="toggle4">Pure CSS Accordion 4</label>
<section>
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
.container{
height: 100vh;
}
@import url("<https://fonts.googleapis.com/css?family=Open+Sans:400,700>");
@import url("<https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css>");
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
font: 16px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
body {
padding: 50px;
}
.accordion{
transform: translateZ(0);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: #fff;
}
.accordion > .accordion-toggle{
position: absolute;
opacity: 0;
display: none;
}
.accordion > label{
position: relative;
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #ddd;
background: #fff;
cursor: pointer;
}
.accordion > label:after {
content: '\\f078';
position: absolute;
top: 0px;
right: 20px;
font-family: fontawesome;
transform: rotate(90deg);
transition: .3s transform;
}
.accordion > section{
height: 0;
transition: .3s all;
overflow: hidden;
}
.accordion > .accordion-toggle:checked ~ label:after{
transform: rotate(0deg);
}
.accordion > .accordion-toggle:checked ~ section{
height: 200px;
}
.accordion > section p {
margin: 15px 0;
padding: 0 20px;
font-size: 12px;
line-height: 1.5;
}
Kesimpulan
Dalam artikel ini, kita telah menjelajahi 10 contoh CSS menarik yang dapat digunakan untuk mendesain website dengan tampilan yang menarik. Dari efek hover hingga animasi kompleks, CSS memiliki beragam fitur yang dapat memperkaya pengalaman pengguna dan meningkatkan daya tarik visual suatu halaman web. Tentu beberapa contoh tersebut bisa kamu kembangkan lagi untuk website kamu sendiri. Agar lebih menguasai Styling menggunakan CSS kamu dapat mengikuti Kelas Dasar CSS atau kamu bisa mencoba membuat sebuah projek dengan mengikuti kelas HTML CSS Bootstrap 5: Finance Landing Page Website yang bisa kamu ikutin di website Build With Angga.
