Cara Membuat Lampu Bohlam dengan CSS3

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada Kesempatan kali ini saya akan memberikan tutorial tentang Cara Membuat Lampu Bohlam dengan CSS3. Seperti yang sebelum-sebelumnya saya akan memberikan script HTML serta CSS nya yang nantinya akan teman-teman copy-paste atau diketik ulang ke dalam text-editor teman-teman. Dan untuk pengembangannya silahkan teman-teman modifikasi sendiri sesuai selera.

Oke langsung saja kita mulai, pertama-tama jalankan/run text-editor yang teman-teman gunakan dan ketik atau copy script HTML dibawah ini :

<div class='wrapper'>
  <div class='lightbulb'>
    <div class='head'>
      <div class='wire'></div>
    </div>
    <div class='body'>
      <div class='a'>
        <div class='a_b'></div>
        <div class='a_c'></div>
        <div class='a_d'></div>
        <div class='a_e'></div>
        <div class='a_f'></div>
        <div class='a_g'></div>
      </div>
    </div>
  </div>
</div>

</div>

</div>

Jika HTML nya sudah silahkan teman-teman tambahkan lagi script CSS nya seperti dibawah ini dan letakan diantara tag head, karena disini kita menggunakan CSS internal.

html, body {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  background: grey;
}

.wrapper {
  height: 600px;
  width: 320px;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  filter: drop-shadow(0 0 54px #FFC524);
}
.wrapper .lightbulb {
  height: 300px;
  position: relative;
}
.wrapper .lightbulb .head {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100%;
  background: #FFC524;
  perspective: 150px;
  perspective-origin: 100px 600px;
}
.wrapper .lightbulb .head::after {
  content: "";
  height: 100px;
  width: 133.33333px;
  position: absolute;
  bottom: -28.57143px;
  left: 0;
  right: 0;
  margin: auto;
  background: #FFC524;
  transform: rotateX(25deg);
  z-index: 4;
}
.wrapper .lightbulb .head::before {
  content: "";
  height: 100px;
  width: 114.28571px;
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  margin: auto;
  background: #FFC524;
  transform: rotateX(45deg);
  border-radius: 32px;
  z-index: 4;
}
.wrapper .lightbulb .head .wire {
  height: 10px;
  width: 66.66667px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  border-bottom: 2px #333 solid;
}
.wrapper .lightbulb .head .wire::before, .wrapper .lightbulb .head .wire::after {
  content: "";
  height: 150px;
  width: 10px;
  position: absolute;
  top: 10px;
  border-radius: 50%;
  z-index: 12;
}
.wrapper .lightbulb .head .wire::before {
  border-right: 2px #333 solid;
}
.wrapper .lightbulb .head .wire::after {
  border-left: 2px #333 solid;
  right: 0;
}
.wrapper .lightbulb .body {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.wrapper .lightbulb .body .a {
  z-index: 2;
}
.wrapper .lightbulb .body .a * {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom: 2px #333 solid;
}
.wrapper .lightbulb .body .a_b {
  height: 40px;
  width: 108px;
  bottom: 10px;
  background: #FFC524;
  z-index: 6;
}
.wrapper .lightbulb .body .a_c {
  height: 40px;
  width: 108px;
  bottom: 0;
  background: #BBBBBB;
  z-index: 5;
}
.wrapper .lightbulb .body .a_d {
  height: 40px;
  width: 106px;
  bottom: -10px;
  background: #BBBBBB;
  z-index: 4;
}
.wrapper .lightbulb .body .a_e {
  height: 40px;
  width: 104px;
  bottom: -20px;
  background: #BBBBBB;
  z-index: 3;
}
.wrapper .lightbulb .body .a_f {
  height: 40px;
  width: 102px;
  bottom: -30px;
  background: #BBBBBB;
  z-index: 2;
}
.wrapper .lightbulb .body .a_g {
  height: 40px;
  width: 80px;
  bottom: -40px;
  background: #a2a2a2;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

html, body {

height: 100%;

width: 100%;

position: absolute;

margin: 0;

background: grey;

}

.wrapper {

height: 600px;

width: 320px;

position: absolute;

top: 60px;

left: 0;

right: 0;

bottom: 0;

margin: auto;

filter: drop-shadow(0 0 54px #FFC524);

}

.wrapper .lightbulb {

height: 300px;

position: relative;

}

.wrapper .lightbulb .head {

height: 200px;

width: 200px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border-radius: 100%;

background: #FFC524;

perspective: 150px;

perspective-origin: 100px 600px;

}

.wrapper .lightbulb .head::after {

content: "";

height: 100px;

width: 133.33333px;

position: absolute;

bottom: -28.57143px;

left: 0;

right: 0;

margin: auto;

background: #FFC524;

transform: rotateX(25deg);

z-index: 4;

}

.wrapper .lightbulb .head::before {

content: "";

height: 100px;

width: 114.28571px;

position: absolute;

bottom: -50px;

left: 0;

right: 0;

margin: auto;

background: #FFC524;

transform: rotateX(45deg);

border-radius: 32px;

z-index: 4;

}

.wrapper .lightbulb .head .wire {

height: 10px;

width: 66.66667px;

position: absolute;

top: 50%;

left: 0;

right: 0;

margin: auto;

border-radius: 50%;

border-bottom: 2px #333 solid;

}

.wrapper .lightbulb .head .wire::before, .wrapper .lightbulb .head .wire::after {

content: "";

height: 150px;

width: 10px;

position: absolute;

top: 10px;

border-radius: 50%;

z-index: 12;

}

.wrapper .lightbulb .head .wire::before {

border-right: 2px #333 solid;

}

.wrapper .lightbulb .head .wire::after {

border-left: 2px #333 solid;

right: 0;

}

.wrapper .lightbulb .body {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

}

.wrapper .lightbulb .body .a {

z-index: 2;

}

.wrapper .lightbulb .body .a * {

position: absolute;

left: 0;

right: 0;

margin: auto;

border-bottom-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom: 2px #333 solid;

}

.wrapper .lightbulb .body .a_b {

height: 40px;

width: 108px;

bottom: 10px;

background: #FFC524;

z-index: 6;

}

.wrapper .lightbulb .body .a_c {

height: 40px;

width: 108px;

bottom: 0;

background: #BBBBBB;

z-index: 5;

}

.wrapper .lightbulb .body .a_d {

height: 40px;

width: 106px;

bottom: -10px;

background: #BBBBBB;

z-index: 4;

}

.wrapper .lightbulb .body .a_e {

height: 40px;

width: 104px;

bottom: -20px;

background: #BBBBBB;

z-index: 3;

}

.wrapper .lightbulb .body .a_f {

height: 40px;

width: 102px;

bottom: -30px;

background: #BBBBBB;

z-index: 2;

}

.wrapper .lightbulb .body .a_g {

height: 40px;

width: 80px;

bottom: -40px;

background: #a2a2a2;

}

Cara Membuat Lampu Bohlam dengan CSS3

Jika sudah dengan code atau script HTML dan CSSnya coba silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan sama seperti pada gambar dibawah ini :

Bagaimana teman-teman ? cukup mudah bukan, dan untuk pengembangannya silahkan teman-teman berkreasi sendiri, dan ingat bahwa property pada css banyak sekali yang luar biasa jika kita mempunyai imajinasi dan kreasi yang tinggi. Oke selamat mencoba ya teman-teman.

Sekian pembahasan kali ini tentang Cara Membuat Lampu Bohlam dengan CSS3. Semoga dapat bermanfaat buat teman-teman.

Terimakasih

Facebook DUMET School

Categories