Javascriptoo – Belajar HTML, CSS Tutorial Desain Website

Javascriptoo adalah situs Tutorial belajar coding indonesia, HTML, CSS dan Editor PHP dan bahasa pemrograman yang paling umum digunakan saat membuat halaman web.

MOST COMMENTED

10 Properti CSS3 Yang Perlu Anda Ketahui – Kami telah memperkenalkan 30 pemilih CSS yang harus kita semua ingat, tetapi bagaimana dengan properti CSS3 yang baru? Meskipun sebagian besar masih memerlukan prefiks khusus vendor, Anda masih dapat menggunakannya dalam proyek hari ini. Nyatanya, ini menggembirakan!

Di akhir artikel ini, kita akan mendapat tugas akhir yang menarik.

10 Properti CSS3 Yang Perlu Anda Ketahui
Source : tutorialrepublic

1. border-radius

border-radius dapat dengan mudah menjadi sekumpulan properti CSS3 yang paling populer, mirip dengan properti CSS3 andalan. Meskipun banyak desainer masih takut dengan gagasan bahwa tata letaknya mungkin berbeda tergantung pada browser, langkah-langkah kecil seperti sudut membulat dapat dengan mudah menarik perhatian mereka!

Ironisnya, ide javascriptoo untuk memberikan pengalaman menonton alternatif untuk peramban seluler sangatlah sempurna. Namun, anehnya, beberapa orang merasa berbeda saat menjelajah desktop.

1
border-radius: 4px;

Circles

Beberapa pembaca mungkin tidak menyadari bahwa kita juga dapat menggunakan atribut ini untuk membuat lingkaran. Yang harus Anda lakukan adalah mengatur radius menjadi setengah dari lebar atau tinggi elemen.

1border-radius: 50px;

Dan, jika kita ingin bersenang-senang, kita juga dapat menggunakan “model kotak fleksibel” (dijelaskan di # 8) untuk memusatkan teks secara vertikal dan horizontal di dalam lingkaran. Ini membutuhkan beberapa kode, tetapi ini hanya karena perlu mengkompensasi berbagai vendor.

1 display: flex;
2 align-items: center;
3 justify-content: center;

2 Juta + Tema Dan Plugin WordPress, Template Web Dan Email, Toolkit UI, Dll.

Gunakan keanggotaan Envato Elements untuk mengunduh ribuan tema dan plugin WordPress, templat web, elemen UI, dan banyak lagi. Akses tak terbatas ke perpustakaan yang berkembang untuk mengakses jutaan aset materi iklan dan kode.

Baca Juga : Tutorial Cara Kelola CSS Z-Index

2. box-shadow

Selanjutnya, kita akan menggunakan box-shadow di mana-mana, yang memungkinkan Anda menerapkan kedalaman ke elemen dengan segera. Hanya saja, jangan membenci nilai yang Anda tetapkan terlalu banyak!

box-shadow: 1px 1px 3px #292929;

box-shadow menerima empat parameter:

  • x offset
  • y offset
  • blur
  • color of shadow

Sekarang, yang tidak disadari banyak orang adalah Anda dapat menerapkan beberapa box-shadows sekaligus. Ini dapat menyebabkan beberapa efek yang sangat menarik. Misalnya, kita dapat menggunakan warna biru dan hijau untuk memperbesar setiap bayangan.

box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

Clever Shadows

Dengan menerapkan bayangan ::before dan ::after pseudo-class, kita dapat membuat beberapa perspektif yang sangat menarik. Ini adalah cara untuk memulai :

The HTML

<div class="box">
   <img src="tuts.jpg" alt="Tuts" />
</div>

The CSS

.box:after {
  content: "";
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
  height: 100px;
  bottom: 0;
}

3. text-shadow

Mirip dengan box-shadow, itu harus diterapkan ke teks dan menerima empat parameter yang sama :

  • X offset
  • y offset
  • buram
  • Warna bayangan
h1 {
   text-shadow: 0 1px 0 white;
   color: #292929;
}

Text Outlines

Sekali lagi, seperti box-shadow saudara kandungnya, kita bisa menerapkan beberapa bayangan dengan menggunakan koma sebagai pemisah. Misalnya, kita ingin membuat efek garis besar untuk teks. Meskipun webkit memberikan efek stroke, kita dapat mengakses lebih banyak browser (meskipun tidak cukup bagus) dengan menggunakan metode berikut :

body { background: white; }
h1 {
   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
   color: white;
}

4. text-stroke

Harap gunakan metode ini dengan hati-hati. Ini adalah fitur non-standar. Atribut text-stroke belum menjadi bagian dari spesifikasi CSS3. Namun, jika Anda menggunakan awalan -webkit-, semua browser utama sekarang mendukung fitur ini.

Baca Juga : 3 Kerangka Javascript Digunakan Pada 2021

h1 {
   -webkit-text-stroke: 3px black;
   color: white;
}

Deteksi fitur

Bagaimana kami menyediakan satu set gaya untuk Firefox dan set gaya lainnya untuk Safari atau Chrome? Salah satu solusinya adalah dengan menggunakan deteksi fitur.

Melalui deteksi fitur, kita dapat menggunakan JavaScript untuk menguji apakah atribut tertentu tersedia. Jika tidak, kami siapkan cadangan.

Mari kita simak kembali masalah text-stroke. Mari kita menyetel black cadangan untuk browser yang tidak mendukung atribut ini (kecuali webkit saat ini).

var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
   var heading = document.getElementsByTagName('h1')[0];
   heading.style.color = 'black';
}

Pertama, kami membuat elemen h1 virtual. Kemudian, kami melakukan pencarian rongga penuh melalui atribut style untuk menentukan apakah atribut -webkit- text-stroke dapat digunakan untuk elemen tersebut. Jika tidak, kita akan mengambil judul Hello Readers dan mengatur warnanya dari putih menjadi hitam.

Harap dicatat bahwa kami generik di sini. Jika Anda perlu mengganti beberapa tag h1 di halaman, Anda perlu menggunakan pernyataan vhile untuk memfilter setiap judul dan memperbarui gaya atau nama kelas yang sesuai.

Saat browser lain pada akhirnya mendukung atribut text-stroke, kami hanya akan menguji webkit. Ingat ini.

Jika Anda membutuhkan solusi deteksi fungsional yang lebih komprehensif, silakan merujuk ke Modernizr.

5. Multiple Backgrounds

Properti background telah dimodifikasi secara komprehensif untuk memungkinkan banyak latar belakang di CSS3.

Mari buat contoh konyol, hanya sebagai bukti konsep. Karena tidak ada gambar yang cocok di dekatnya, saya akan menggunakan dua gambar tutorial sebagai latar belakang. Tentu saja, dalam aplikasi nyata, Anda dapat menggunakan tekstur untuk latar belakang, dan mungkin gradien.

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

Di atas, dengan menggunakan koma sebagai pemisah, kami mereferensikan dua gambar latar belakang yang terpisah. Harap perhatikan bagaimana itu ditempatkan di posisi sudut kiri atas (0 0) dalam kasus pertama, dan bagaimana itu ditempatkan di posisi sudut kanan atas (100% 0) dalam kasus kedua.

Baca Juga : Cara Ubah Suara Menjadi Teks Dengan Javascript

Pastikan untuk menyediakan fitur cadangan untuk browser yang tidak mendukung banyak latar belakang. Mereka akan melewatkan atribut sama sekali, membiarkan latar belakang kosong.

Kompensasi Untuk Browser Lama

Untuk menambahkan gambar background tunggal untuk browser lama (seperti IE7), harap nyatakan properti latar belakang dua kali: yang pertama untuk browser lama, dan yang kedua adalah pengganti. Selain itu, Anda dapat menggunakan Modernizr lagi.

.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

6. background-size

Sebelum menggunakan CSS modern, kami terpaksa menggunakan teknik licik untuk menyesuaikan ukuran gambar latar belakang.

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

Kode di atas akan mengarahkan gambar latar untuk menempati semua ruang yang tersedia. Misalnya, bagaimana jika kita ingin gambar tertentu menempati seluruh latar belakang elemen body, terlepas dari lebar jendela browser?

body, html { height: 100%; }
body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

Semuanya di sini adalah miliknya. Atribut background-size akan menerima dua parameter: masing-masing lebar x dan y.

Meskipun Chrome dan Safari versi terbaru mendukung background-size secara native, untuk browser lama, kami masih perlu menggunakan awalan vendor.

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

7. text-overflow

Atribut text-overflow yang awalnya dikembangkan untuk Internet Explorer dapat menerima dua nilai:

  • clip
  • ellipsis

Atribut ini dapat digunakan untuk memotong teks di luar penampungnya, sambil tetap memberikan beberapa umpan balik kepada pengguna, seperti elipsis.

apa kamu tahu Sejak IE6, Internet Explorer telah memberikan dukungan untuk atribut ini. Mereka menciptakannya!

.box {
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
   border: 1px solid black;
   width: 400px;
   padding: 20px;
   cursor: pointer;
}

Pada tahap ini, Anda dapat mempertimbangkan untuk menampilkan seluruh teks saat pengguna mengarahkan kursor ke kotak.

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Agak aneh (kecuali saya salah), sepertinya tidak ada cara untuk mereset properti text overflow atau “matikan”. Untuk mensimulasikan fungsi “off” ini, silakan aktifkan: hover, kita dapat menyetel properti kosong kembali ke normal. Ini dimungkinkan karena luapan teks bergantung pada fitur ini agar berfungsi dengan baik.

8. Flexible Box Model

Model kotak fleksibel pada akhirnya akan membebaskan kita dari floats yang kikuk itu. Meskipun membutuhkan banyak upaya untuk fokus pada properti baru, setelah selesai, semua ini masuk akal.

Mari buat demo cepat dan buat tata letak dua kolom sederhana.

<div id="container">
 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>
</div>

Sekarang, untuk CSS: pertama-tama kita perlu menginstruksikan untuk memperlakukan container sebagai box fleksibel. Saya juga akan menerapkan lebar dan tinggi umum karena kami tidak memiliki konten aktual yang diputar.

#container {
   width: 600px;
   height: 450px; /* just for demo */
   background: #e3e3e3;
   margin: auto;
   display: flex;
}

Selanjutnya, mari terapkan div #main dan warna latar belakang unik di aside untuk demo.

#main {
   background: yellow;
}  
aside {
   background: red;
}

Pada titik ini, tidak ada yang perlu diperhatikan.

Amati apa yang terjadi ketika kita secara eksplisit mendeklarasikan lebar di area konten #main.

#main {
  background: yellow;
  width: 400px;
}

Yah, itu akan lebih baik, tetapi kami masih memiliki masalah, yaitu tidak menjaga semua ruang yang tersisa. Kita dapat menggunakan properti box-flex baru untuk menyelesaikan masalah ini.

Baca Juga : 11 Tools Prototipe Terbaik Untuk Desainer UI / UX

flex menunjukkan bahwa elemen tersebut menggunakan semua ruang yang tersedia.

aside {
   display: block; /* cause is HTML5 element */
   background: red;
  /* take up all available space */
   flex: 1;
}

Setelah menggunakan atribut ini, terlepas dari lebar area konten #main, ruang yang dicadangkan akan memenuhi semua spesifikasi dari ruang yang tersedia. Lebih baik lagi, Anda tidak perlu khawatir tentang masalah float yang mengganggu, seperti elemen yang ditempatkan di bawah area konten utama.

Kami hanya menggores permukaan di sini. Untuk mempelajari lebih lanjut tentang Flexbox, lihat panduan lengkap kami! Sekarang, semua browser utama mendukung fitur ini, dan diharapkan dapat bekerja secara normal di lebih dari 99% perangkat.

9. resize

Atribut resize (bagian dari modul CSS3 UI) memungkinkan Anda menentukan cara mengubah ukuran textarea. Sekarang, kecuali IE dan iOS Safari, semua browser utama mendukung fitur ini.

Harap dicatat bahwa secara default, browser webkit dan Firefox 4 memungkinkan pengubahan ukuran textareas secara vertikal dan horizontal.

textarea {
   resize: vertical;
}

Nilai yang memungkinkan

both : pengubahan ukuran vertikal dan horizontal
horizontal : Batasi ukuran menjadi horizontal
vertical : Batasi ukuran menjadi vertikal
none : Nonaktifkan pengubahan ukuran

10. Transitions

Mungkin fitur CSS3 yang paling menarik adalah kemampuannya untuk menerapkan animasi ke elemen tanpa menggunakan JavaScript.

Mari kita simulasikan efek umum, yaitu, setelah mengarahkan mouse ke link di sidebar, teks akan bergeser sedikit ke kanan.

The HTML

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

The CSS

ul a {
    border-left: 10px orange solid;
    transition: border-width 0.4s;
 }
a:hover {
  border-width: 20px;
}

transition akan menerima tiga parameter:

Atribut yang akan diubah. (Jika perlu, setel nilai ini ke all)
durasi
Tindakan lambat

Alasan mengapa kami tidak secara langsung menerapkan transisi ke status hover dari tag anchor adalah karena jika kami melakukan ini, animasi hanya akan berlaku selama gerakan mouse. Saat mouse dipindahkan, elemen akan segera kembali ke keadaan awalnya.

Tutorial Cara Kelola CSS Z-Index

12/02/2021

Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit

15/02/2021