Create a login form with html and css, html css tutorial for beginners, html css full course, html css, #css #html

post

@# Create a Login Form with HTML and CSS #@

Creating a Login Form using HTML and CSS is a great way. Here's a step-by-step guide on how to make a Login Form.

HTML Code

<div id="login-lable">Login</div>

<button>Continue</button>

</form>

<svg

fill="none"

viewBox="0 0 299 152"

height="9em"

width="18em"

xmlns="http://www.w3.org/2000/svg"

<path

fill="url(#paint0_linear_8_3)"

d="M149.5 152H133.42L9.53674e-07 4.70132e-06H149.5L299 4.70132e-06L165.58 152H149.5Z"

></path>

<defs>

<linearGradient

gradientUnits="userSpaceOnUse"

y2="12.1981"

x2="150.12"

y1="152"

x1="149.5"

id="paint0_linear_8_3"

</linearGradient>

</defs>

</svg>

</div>

<svg

fill="none"

viewBox="0 0 160 61"

height="61"

width="160"

xmlns="http://www.w3.org/2000/svg"

<path

fill="#2B2B2B"

d="M80 27.9997C121.974 27.9997 156 22.4032 156 15.4996L156 40.4998C156 47.4034 121.974 52.9998 80 52.9998C38.0265 52.9998 4.00028 47.4034 4 40.4998V40.4998V15.51C4.0342 22.4089 38.0474 27.9997 80 27.9997Z"

clip-rule="evenodd"

fill-rule="evenodd"

></path>

</g>

<ellipse

fill="url(#paint0_radial_1_38)"

ry="4.80773"

rx="28.3956"

cy="17.4236"

cx="80"

></ellipse>

<path

fill="#323232"

d="M80 28.0002C121.974 28.0002 156 22.4037 156 15.5001C156 8.59648 121.974 3 80 3C38.0264 3 4 8.59648 4 15.5001C4 22.4037 38.0264 28.0002 80 28.0002ZM80.0001 20.308C96.1438 20.308 109.231 18.1555 109.231 15.5002C109.231 12.845 96.1438 10.6925 80.0001 10.6925C63.8564 10.6925 50.7693 12.845 50.7693 15.5002C50.7693 18.1555 63.8564 20.308 80.0001 20.308Z"

clip-rule="evenodd"

fill-rule="evenodd"

></path>

</g>

<path

fill="#378BA6"

d="M106.725 17.4505C108.336 16.8543 109.231 16.1943 109.231 15.4999C109.231 12.8446 96.1438 10.6921 80.0001 10.6921C63.8564 10.6921 50.7693 12.8446 50.7693 15.4999C50.7693 16.1943 51.6645 16.8543 53.2752 17.4504C53.275 17.4414 53.2748 17.4323 53.2748 17.4232C53.2748 14.768 65.2401 12.6155 80.0001 12.6155C94.7601 12.6155 106.725 14.768 106.725 17.4232C106.725 17.4323 106.725 17.4414 106.725 17.4505Z"

clip-rule="evenodd"

fill-rule="evenodd"

></path>

</g>

<defs>

<filter

color-interpolation-filters="sRGB"

filterUnits="userSpaceOnUse"

height="45.5002"

width="160"

y="15.4996"

x="0"

id="filter0_di_1_38"

<feColorMatrix

result="hardAlpha"

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"

type="matrix"

in="SourceAlpha"

></feColorMatrix>

<feColorMatrix

values="0 0 0 0 0.620833 0 0 0 0 0.620833 0 0 0 0 0.620833 0 0 0 0.25 0"

type="matrix"

></feColorMatrix>

<feBlend

result="effect1_dropShadow_1_38"

in2="BackgroundImageFix"

mode="normal"

></feBlend>

<feBlend

result="shape"

in2="effect1_dropShadow_1_38"

in="SourceGraphic"

mode="normal"

></feBlend>

<feColorMatrix

result="hardAlpha"

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"

type="matrix"

in="SourceAlpha"

></feColorMatrix>

<feComposite

k3="1"

k2="-1"

operator="arithmetic"

in2="hardAlpha"

></feComposite>

<feColorMatrix

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"

type="matrix"

></feColorMatrix>

<feBlend

result="effect2_innerShadow_1_38"

in2="shape"

mode="normal"

></feBlend>

</filter>

<filter

color-interpolation-filters="sRGB"

filterUnits="userSpaceOnUse"

height="25.0002"

width="152"

y="3"

x="4"

id="filter1_i_1_38"

<feBlend

result="shape"

in2="BackgroundImageFix"

in="SourceGraphic"

mode="normal"

></feBlend>

<feColorMatrix

result="hardAlpha"

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"

type="matrix"

in="SourceAlpha"

></feColorMatrix>

<feMorphology

result="effect1_innerShadow_1_38"

in="SourceAlpha"

operator="erode"

radius="3"

></feMorphology>

<feComposite

k3="1"

k2="-1"

operator="arithmetic"

in2="hardAlpha"

></feComposite>

<feColorMatrix

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"

type="matrix"

></feColorMatrix>

<feBlend

result="effect1_innerShadow_1_38"

in2="shape"

mode="normal"

></feBlend>

</filter>

<filter

color-interpolation-filters="sRGB"

filterUnits="userSpaceOnUse"

height="26.7583"

width="78.4615"

y="0.692139"

x="40.7693"

id="filter2_di_1_38"

<feColorMatrix

result="hardAlpha"

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"

type="matrix"

in="SourceAlpha"

></feColorMatrix>

<feMorphology

result="effect1_dropShadow_1_38"

in="SourceAlpha"

operator="dilate"

radius="2"

></feMorphology>

<feColorMatrix

values="0 0 0 0 0 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0"

type="matrix"

></feColorMatrix>

<feBlend

result="effect1_dropShadow_1_38"

in2="BackgroundImageFix"

mode="color-dodge"

></feBlend>

<feBlend

result="shape"

in2="effect1_dropShadow_1_38"

in="SourceGraphic"

mode="normal"

></feBlend>

<feColorMatrix

result="hardAlpha"

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"

type="matrix"

in="SourceAlpha"

></feColorMatrix>

<feMorphology

result="effect2_innerShadow_1_38"

in="SourceAlpha"

operator="erode"

radius="1"

></feMorphology>

<feComposite

k3="1"

k2="-1"

operator="arithmetic"

in2="hardAlpha"

></feComposite>

<feColorMatrix

values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0"

type="matrix"

></feColorMatrix>

<feBlend

result="effect2_innerShadow_1_38"

in2="shape"

mode="normal"

></feBlend>

</filter>

<radialGradient

gradientTransform="translate(80 17.4236) rotate(90) scale(6.25004 36.9143)"

gradientUnits="userSpaceOnUse"

r="1"

cy="0"

cx="0"

id="paint0_radial_1_38"

</radialGradient>

</defs>

</svg>

</div>

यह HTML कोड एक लॉगिन फॉर्म और दो SVG ग्राफिक्स (रेज और एमिटर) प्रदर्शित करता है। नीचे इसका विवरण हिंदी में दिया गया है:

HTML संरचना: Container (मुख्य डिव): यह पूरा HTML कोड एक div टैग के अंदर आता है जिसकी आईडी "Container" है।

Form (फॉर्म):
एक form टैग है जिसकी क्लास "form" है। फॉर्म के अंदर एक div टैग है जिसकी आईडी "login-lable" है और इसमें "Login" लिखा है। दो input टैग हैं जिनकी क्लास "form-content" है। पहला input उपयोगकर्ता नाम (UserName) के लिए है और दूसरा पासवर्ड (PassWord) के लिए है। एक button टैग है जिसमें "Continue" लिखा है। Rays (रेज):

"rays" आईडी वाला एक div टैग है। इसके अंदर एक SVG (स्केलेबल वेक्टर ग्राफिक्स) है, जिसमें एक पथ (path) तत्व शामिल है। इस पथ के अंदर एक रैखिक ग्रेडिएंट (linearGradient) डिफाइन किया गया है।

Emiter (एमिटर):
"emiter" आईडी वाला एक और div टैग है। इसके अंदर भी एक SVG है, जिसमें कई तत्व शामिल हैं: g तत्व: इसमें filter नामक इफेक्ट का उपयोग किया गया है।
ellipse तत्व: एक दीर्घवृत्त बनाता है। defs तत्व: इसमें विभिन्न फिल्टर और ग्रेडिएंट डिफाइन किए गए हैं।

CSS Code

#Container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: flex-end;

height: 100%;

}

#rays {

z-index: 2;

position: relative;

bottom: -1.5em;

animation: rays 2s ease-in-out infinite;

}

.form {

position: relative;

top: 5em;

padding: 4%;

z-index: 3;

display: flex;

flex-direction: column;

border-radius: 0.5rem;

border: 4px solid #fff;

background: rgba(0, 255, 240, 0.52);

box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6;

backdrop-filter: blur(3.5px);

gap: 1em;

animation: float 2s ease-in-out infinite;

}

#login-lable {

text-align: center;

color: white;

font-size: 2rem;

font-weight: 600;

letter-spacing: 8px;

text-shadow: 0px 0px 16px rgb(243, 243, 243);

}

.form-content {

height: 3em;

padding: 1px 8px;

color: white;

text-decoration: none;

letter-spacing: 1px;

font-weight: bold;

border-radius: 6px;

border: 2px solid #fff;

background: rgba(139, 255, 247, 0.486);

box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040;

text-shadow: 0px 1px 4px rgb(243, 243, 243);

}

.form-content:focus-visible {

outline: none;

text-decoration: none;

background: rgba(139, 189, 255, 0.59);

box-shadow: 0px 0px 1px 4px #9ee5e3;

}

.form-content:hover {

background: rgba(139, 189, 255, 0.59);

}

::placeholder {

font-weight: 300;

color: white;

letter-spacing: 0.1rem;

text-shadow: 0px 1px 5px rgb(66, 66, 66);

}

.form button {

cursor: pointer;

height: 3.5rem;

padding: 0%;

color: white;

font-size: 1.5em;

letter-spacing: 0.3rem;

border: 2px solid white;

background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb);

}

.form button:hover {

position: relative;

bottom: 4px;

background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3);

box-shadow: 0px 0px 2px 2px #ffffff;

}

@keyframes float {

0% {

position: relative;

}

50% {

top: 50px;

}

100% {

position: relative;

}

@keyframes rays {

0% {

opacity: 0.6;

}

50% {

opacity: 1;

}

100% {

opacity: 0.6;

}

यह CSS कोड एक कंटेनर, फॉर्म, और उनके संबंधित तत्वों की स्टाइलिंग के लिए है।

- `#Container`: - यह `flex` डिस्प्ले का उपयोग करता है, जिसमें तत्वों को केंद्रित किया गया है और नीचे की ओर संरेखित किया गया है। - ऊँचाई 100% है।

- `#rays`: - इसका `z-index` 2 है, जो इसे अन्य तत्वों से ऊपर रखता है।
- यह रिलेटिव पोजिशन में है और `bottom` से -1.5em की दूरी पर है।
- इसमें एक एनीमेशन `rays` लागू किया गया है जो 2 सेकंड में अंतहीन लूप में चलता है।

- `.form`: - यह रिलेटिव पोजिशन में है और ऊपर से 5em की दूरी पर है।
- फॉर्म को 4% पेडिंग दी गई है और `z-index` 3 है।
- इसमें `flex` डिस्प्ले का उपयोग किया गया है और कॉलम दिशा में तत्वों को रखा गया है।
- बॉर्डर 4px सफेद रंग का है और बैकग्राउंड थोड़ा पारदर्शी (rgba) है।
- बॉक्स शैडो और बैकड्रॉप फिल्टर का उपयोग किया गया है।
- `gap` 1em है और इसमें एक फ्लोट एनीमेशन लागू किया गया है।

- `#login-lable`: - टेक्स्ट को केंद्रित किया गया है, रंग सफेद है, और फ़ॉन्ट साइज 2rem है।
- इसमें फ़ॉन्ट वेट 600 है और लेटर स्पेसिंग 8px है।
- टेक्स्ट शैडो का उपयोग किया गया है।

- `.form-content`: - इनपुट फ़ील्ड की ऊँचाई 3em है और इसमें 1px 8px की पेडिंग है।
- रंग सफेद है, और बैकग्राउंड थोड़ा पारदर्शी (rgba) है। - बॉक्स शैडो और टेक्स्ट शैडो का उपयोग किया गया है।
- फोकस और होवर स्टेट में बैकग्राउंड और बॉक्स शैडो बदलते हैं।

- `::placeholder`: - प्लेसहोल्डर टेक्स्ट का फ़ॉन्ट वेट 300 है, रंग सफेद है, और लेटर स्पेसिंग 0.1rem है।
- टेक्स्ट शैडो का उपयोग किया गया है।

- `.form button`: - बटन की ऊँचाई 3.5rem है और पेडिंग 0% है। - रंग सफेद है, फ़ॉन्ट साइज 1.5em है, और लेटर स्पेसिंग 0.3rem है। - बॉर्डर 2px सफेद है और बैकग्राउंड में ग्रेडिएंट का उपयोग किया गया है। - होवर स्टेट में बटन का बैकग्राउंड और बॉक्स शैडो बदलते हैं।

- `@keyframes float`: - यह एनीमेशन 0%, 50%, और 100% पर चलता है, जहां 50% पर टॉप से 50px की दूरी पर आता है।
- `@keyframes rays`: - यह एनीमेशन 0%, 50%, और 100% पर चलता है, जिसमें ओपेसिटी बदलती है।

JS Code

Output

Youtube whatsapp Facebook

Search This Blog

CSS PROJECTs FOR YOU