Home
About
Contact

Home
blogs
_kodagaon
_aapka apna vichar
_cg-writer
_halba samaj
_aaryan chiram
_job-alart
_Video Documentation
Download
About
privacy-policy
Disclaimer
Sitemap
News
Page
Contect
inqury

मुख्यपृष्ठस्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

Aaryan_Chiram मई 09, 2023

उदाहरण के लिए यदि

  <html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

body {
  padding: 0;
  margin: 0; 
  height: 100vh;
  background: #18191f;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  position: relative;
  display: flex;
}

li {
  list-style: none;
}

label {
  position: relative;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 80px;
  width: 80px;
  z-index: 100;
}

div {
  position: relative;
  height: 80px;
  width: 80px;
  background: #18191f;
  color: #555;
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 46px;
  cursor: pointer;
  margin: 0 4px;
  border-radius: 20px;
  box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.05),
    4px 4px 6px rgba(0, 0, 0, 0.2),
    inset -1px -1px 4px rgba(255, 255, 255, 0.05),
    inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* div:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 75px;
  height: 38px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
} */

input[type="checkbox"]:checked ~ div {
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.05),
    inset 4px 4px 6px rgba(0, 0, 0, 0.2);
  color: yellow;
  text-shadow: 0 0 15px yellow, 0 0 25px yellow;
  animation: glow 1.5s linear infinite;
}

@keyframes glow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
</style>
<ul>
  <li>
    <input type="checkbox" />
    <div>A</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>A</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>R</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>Y</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>A</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>N</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>.</div>
  </li>
 <li>
    <input type="checkbox" />
    <div>C</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>H</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>I</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>R</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>A</div>
  </li>
  <li>
    <input type="checkbox" />
    <div>M</div>
  </li>
</ul>
</html>

Copy

रिजल्ट

A
A
R
Y
A
N
.

C
H
I
R
A
M

और नया
स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS
पुराने

प्रस्तुतकर्ता Aaryan_Chiram

हेल्लो मैं आर्यन चिराम हूँ मेरे बारे में अधिक जानकारी के लिए यंहा क्लीक करें

एक टिप्पणी भेजें

0 टिप्पणियाँ

loading...

Video

News

Post Top Ad

यह ब्लॉग खोजें

Comments

Amazon.in Widgets

Recent in Sports

Amazon.in Widgets

Header Ads

Amazon.in Widgets

Music

News

Apps

Technology

मेरे बारे में

Aaryan_Chiram: हेल्लो मैं आर्यन चिराम हूँ मेरे बारे में अधिक जानकारी के लिए यंहा क्लीक करें

मेरा पूरा प्रोफ़ाइल देखें

Tags

एप मेकिंग सॉफ्टवेयर 1
चैट एप 1
व्हाट्सअप 1

Gallery

Amazon.in Widgets

Amazon.in Widgets

Home
About
Contact
aaryan chiram
halba samaj
kodagaon
aapka apna vichar
job-alart
cg-writer.
apps and tecnical support

About

Top Ad 728x90

Top Ad 728x90

aaryan chiram

Featured Posts Via Labels

More on

Featured post

स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

मई 09, 2023

Apps

Site Links

Amazon.in Widgets

Recent

Blogroll

aaryan chiram

Templateism?

Follow on Facebook

Social Plugin

Popular Posts

ब्लॉगर में एरर 404 नॉट फाउंड सेटिंग कैसे करें //blogger me error 404 not found setting kaise kare // how to set in error 404 not found setting form blogger

ब्लॉगर में एरर 404 नॉट फाउंड सेटिंग कैसे करें //blogger me error 404 not found setting kaise kare // how to set in error 404 not found setting form blogger

जून 22, 2020

अपने टेक्स्ट फ़ाइल को पीडीएफ में कैसे बदले apne word file ko pdf me badle //how to convert text to pdf

अपने टेक्स्ट फ़ाइल को पीडीएफ में कैसे बदले apne word file ko pdf me badle //how to convert text to pdf

जून 19, 2020

अपने लेख को चोरी होने से बचाए Protect your articles from being stolen, no copy paste your post

अपने लेख को चोरी होने से बचाए Protect your articles from being stolen, no copy paste your post

जुलाई 19, 2019

Subscribe Us

संपर्क फ़ॉर्म

नाम

ईमेल *

संदेश *

Tags

एप
एप मेकिंग सॉफ्टवेयर
काईन मास्टर
चैट एप
मन के सुवा
मार्कशीट कोड डाउनलोड
व्हाट्सअप
blogger
tips
trick

Categories

Most Popular

ब्लॉगर में एरर 404 नॉट फाउंड सेटिंग कैसे करें //blogger me error 404 not found setting kaise kare // how to set in error 404 not found setting form blogger

ब्लॉगर में एरर 404 नॉट फाउंड सेटिंग कैसे करें //blogger me error 404 not found setting kaise kare // how to set in error 404 not found setting form blogger

जून 22, 2020

अपने टेक्स्ट फ़ाइल को पीडीएफ में कैसे बदले apne word file ko pdf me badle //how to convert text to pdf

अपने टेक्स्ट फ़ाइल को पीडीएफ में कैसे बदले apne word file ko pdf me badle //how to convert text to pdf

जून 19, 2020

स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

स्टाइलिश नाम एच टी एम एल सी एस एस stylish name with HTML CSS

मई 09, 2023

Labels

Created By SoraTemplates | Distributed By Blogger Templates

कुल पेज दृश्य

Home
Contact
About