Install Web App

CSS

Belajar Mengenal Neon Text Pada CSS

profil-penulis

Nuzul Karomah

26 Februari 2024

Neon text dalam CSS adalah efek yang menciptakan tampilan teks yang menyerupai lampu neon yang berkedip atau bersinar.

Efek ini dapat dicapai dengan menggunakan properti CSS text-shadow untuk menambahkan bayangan teks dengan warna yang berbeda dan efek blur, menciptakan ilusi cahaya neon. Dengan mengatur properti text-shadow dengan nilai yang tepat, kita dapat menciptakan tampilan teks yang terang dan berkilau seperti neon.

1. Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="neon-text">
        Neon Text Example
    </div>
</body>
</html>
body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.neon-text {
    font-family: 'Arial', sans-serif;
    font-size: 48px;
    color: #fff;
    text-align: center;
    position: relative;
    text-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9;
}

 

Program di atas adalah sebuah halaman HTML yang menampilkan teks dengan efek neon. Pada halaman HTML memiliki fungsi <div> yang digunakan untuk membungkus class neon-text. Selanjutnya, pada halaman CSS mendefinisikan tata letak dan gaya estetika untuk elemen di halaman. body: Mengatur tampilan latar belakang dan penempatan konten. .neon-text: Mengatur gaya untuk elemen dengan kelas neon-text, termasuk font, ukuran, warna, bayangan teks, dan animasi.

font-family: 'Arial', sans-serif;: Menentukan jenis font yang digunakan untuk teks. Pada kasus ini, font Arial akan digunakan jika tersedia, jika tidak, font tanpa serif (sans-serif) akan digunakan sebagai cadangan. font-size: 48px;: Menentukan ukuran font teks, dalam contoh ini ukuran teks adalah 48 piksel. color: #fff;: Menentukan warna teks menjadi putih (#fff), yang akan bertindak sebagai latar belakang untuk efek neon yang akan ditambahkan menggunakan text-shadow.

text-align: center;: Mengatur teks agar berada di tengah secara horizontal di dalam elemen yang bersangkutan. position: relative;: Mengatur posisi elemen secara relatif terhadap posisi defaultnya dalam aliran dokumen HTML. Ini mungkin diperlukan jika Anda ingin menetapkan posisi absolut untuk elemen teks di dalam kontainer yang lebih besar.

text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc, 0 0 30px #ff00cc, 0 0 40px #ff00cc, 0 0 50px #ff00cc, 0 0 60px #ff00cc, 0 0 70px #ff00cc;: Properti ini menentukan bayangan teks yang akan ditambahkan ke teks. Dalam hal ini, serangkaian bayangan dengan warna #ff00cc (magenta) ditentukan dengan jarak yang berbeda untuk menciptakan efek neon. Setiap pasangan nilai x dan y menentukan posisi bayangan relatif terhadap teks, sedangkan nilai ketiga dalam setiap pasangan menentukan jarak blur dari bayangan. Seiring dengan penambahan jarak yang semakin besar, efek blur semakin kuat, menciptakan tampilan neon yang lebih tebal.

Efek ini akan menciptakan teks dengan tampilan yang menyerupai tulisan neon, di mana teks akan memiliki bayangan yang menyerupai cahaya yang bersinar dan berkilau.

2. Hasil

Artikel Lainnya Dengan Kategori Terkait :


1. 1 Menit Langsung Paham GAP Property CSS

2. 3 Trik Pada CSS

3. 4 Layout CSS Modern

4. 5 Tata Letak Modern di CSS

5. 5 Website Generator CSS

6. ALIGN ITEMS

7. ALIGN-SELF

8. Beberapa Cara Untuk Memusatkan Item Menggunakan CSS

9. Beberapa Contoh Gaya Powerfull Snippet

10. Beberapa Variasi Style CSS Button

11. Belajar CSS #01 | Apa Itu CSS?

12. Belajar CSS #02 | Inline CSS

13. Belajar CSS #03 | Internal CSS

14. Belajar CSS #04 | External CSS

15. Belajar CSS #05 | Syntax CSS

16. Belajar CSS #06 | Belajar lebih banyak cara menggunakan CSS Selector

17. Belajar CSS #07 | Pseudo-class

18. Belajar CSS #08 | Definisi Box Model

19. Belajar CSS #09 | Perhitungan Ukuran Lebar dan Tinggi Box Model

20. Belajar CSS #10 | box-sizing: border-box

21. Belajar CSS #11 | Display block

22. Belajar CSS #12 | Belajar display-inline

23. Belajar CSS #13 | Belajar Display Inline Block

24. Belajar CSS #14 | Position-static

25. Belajar CSS #15 | Position-relative

26. Belajar CSS #16 | position absolute

27. Belajar CSS #17 | position fixed

28. Belajar CSS #18 | Position Sticky

29. Belajar CSS #19 | Web Responsif - Viewport

30. Belajar CSS #20 | Menggunakan presentase untuk menentukan nilai lebar

31. Belajar CSS #21 | Properti Max width 100%

32. Belajar CSS #22 | Satuan "VW" Viewport Width

33. Belajar CSS #23 | Media query

34. Belajar CSS #24 | Belajar display-inline

35. Belajar CSS #25 | Display-none

36. Belajar Membuat Fitur Interaktif Efek Flipping Card Menggunakan CSS

37. Belajar Mengenal Neon Text Pada CSS

38. Buat Desain Web Responsif CSS

39. Cara Membuat Badges Dengan HTML & CSS

40. Cara Membuat Balon Obrolan dengan CSS

41. Cara Membuat Efek Teks Berisi Gambar Pakai CSS

42. Cara Membuat Pemisah Antar Elemen di CSS

43. Cara Membuat Underline Tabs CSS

44. Cara Mengatur Proporsi Sebuah Teks di CSS

45. Contoh Penggunaan Grid Shorthand Area

46. CSS Media Queries

47. CSS MODERN LAYOUT

48. CSS Positioning

49. CSS SHORTHAND

50. Explorasi CSS Pulse Loader: Cara Efektif Membuat Animasi Form dengan CSS

51. Faded Background in CSS

52. GAP IN CSS FLEXBOX

53. Gaya Kartu Retro dalam Desain Web dengan CSS

54. Hover Effect Menggunakan CSS

55. How to Make Border Radius in CSS

56. How to make Card-Profile

57. Implementasi Aminasi Label Menggunakan CSSS

58. Implementasi Aspect - ratio CSS

59. Implementasi Jam Analog Sederhana

60. Input HTML Yang Perlu Diketahui

61. Insert Properti dalam CSS: Kunci Mengatur Jarak dalam Elemen HTML

62. Kembangkan Tampilanmu: 10 Trik Keren dengan CSS Filter 😎

63. Macam-Macam Properti Di CSS

64. Mask Text With Image In CSS

65. Memahami Anatomi CSS: Gaya yang Tepat untuk Elemen HTML

66. Memahami Efek Vignette dalam Desain Grafis dan Implementasinya dalam Kode HTML/CSS

67. Memahami Konsep Stretch Background dalam Desain Web : Membuat Gambar Latar Belakang Sesuai dengan Ukuran Elemen

68. Memahami Persingkatan CSS untuk Font: Penggunaan Singkat yang Efisien

69. Memahami Responsivitas Web dengan CSS :hover

70. Membuat Bentuk Organik yang Unik Menggunkan Simple Blob Shape

71. Membuat Button Menggunakan Tag Button

72. Membuat Latar Belakang "Faded" yang Elegan dengan CSS

73. Membuat Layout Yang Responsif Dengan CSS

74. Membuat Tampilan yang lebih Teratur menggunakan Elemen Opgroup dalam Select HTML

75. Membuat Tata Letak Secara Vertikal dan Horizontal dengan CSS Grid

76. Membuat Teks Lebih Menarik dengan CSS: Menggunakan Properti text-decoration

77. Mempelajari Border Pada CSS dan Trik Penulisan Singkat

78. Mempelajari Button Menggunakan Tag Button

79. Mempelajari Filter Blur Pada CSS

80. Mempelajari Penggunaan Margin dalam CSS

81. Mempelajari Selector :active Pada CSS

82. Mempercantik Pengalaman Pengguna dengan Efek Hover Menggunakan Selector CSS :has()

83. Mengatasi Teks Panjang dengan Efek Elipsis Long Text

84. Mengenal 3 Trik Pemusatan div

85. Mengenal CSS Clip-Path: Memotong Elemen dengan Berbagai Bentuk

86. Mengenal CSS Shapes: Membuat Bentuk-Bentuk Kreatif di Halaman Web

87. Mengenal Efek Kaca Glassmorphism Pada CSS

88. Mengenal Flex Wrap Pada CSS

89. Mengenal Flexbox - Flex Direction CSS

90. Mengenal Macam-macam Border Pada CSS

91. Mengenal Nilai Selector :nth-child() dalam CSS

92. Mengenal Properti CSS accent-color dan Penggunaannya

93. Mengenal Sematik Pada HTML

94. Menggunakan :is() untuk Menyederhanakan Selektor yang Rumit dalam CSS

95. Menggunakan Pseudo-Class :is() untuk Menjadikan Tombol Lebih Interaktif

96. Mengoptimalkan Tampilan Halaman Web dengan Media Query Orientation

97. Perbedaan Antara 'box-shadow' dan 'drop-shadow' dalam CSS untuk Efek Bayangan🌟

98. Perbedaan Antara content-box dan border-box dalam CSS:

99. Perbedaan Box Shadow vs Drop Shadow

100. Properti Justify-Content dalam CSS Flexbox

101. Pseudo-Class :has() dalam CSS

102. Responsive Button

103. Retro Card In CSS

104. Sebuah Trik Script Singkat Menggunakan CSS

105. Snippet

106. Stlanted Section

107. Syntax Baru Rentang Media Query pada CSS

108. TABULAR NUMBERS

109. Tampilan Modern dan Fungsional: Memahami Keunggulan Blur Sticky Navbar dalam Desain Situs Web

110. Tips Dasar CSS Yang Perlu Diketahui

111. Tips untuk Menggunakan Border Radius dalam Desain 🌟

112. Unveiling Hidden CSS Tricks

113. Zoom on hover

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya