Water Glass Using HTML, CSS | Water Effect | #untoldcoding

Ever dreamed of drawing sparkling watermarks on your website without resorting to complicated JavaScript? Well, buckle up, web wizards, because we’re about to draw a refreshing glass of water using only HTML and CSS!

This is not your average flat model. We’ll add microwaves and reflections, creating dynamic water features that dance in front of your guests’ eyes. Ready to unleash your inner artist? Let’s get started!

Step 1 Html Code :

This is a document type declaration that specifies which HTML version to use. In this case, it’s HTML5.
The opening <html> tag displays the beginning of the HTML document. the lang attribute indicates the language of the document, which in this case is set to English.
The <head> section contains metadata about the document. The <meta> tag with the charset attribute sets the character encoding to UTF-8, which is the most widely used character encoding for text on the web.
Another <meta> tag is used to describe the viewport. This ensures that the width of the viewport is set to the width of the device, and that the initial zoom level is set to 1.0.
The <link> tag is used to link an external style document to an HTML document. the rel attribute indicates the relationship, and the href indicates the location of the stylesheet. In this case, the stylesheet is named "style.css".
The <body> tag contains the content of the HTML document. In this example, it is a <div> element with the function attribute set to "img" and the aria-label attribute set to "water glass". This means that the <div> is intended to represent an image with a color label. But the actual content (such as images or text) is not provided in a given piece of code and would normally be encapsulated in a <div> for display on a web page
Now, let’s use CSS borders to define the shape of the mirror:
Step 2 CSS Code:

body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 10px;
  background: linear-gradient(#e8e8e8 70vh, #fff 71vh);
  background-repeat: no-repeat;
  background-position: 50% -20%;
}
@media (max-width: 599px) {
  body {
    font-size: 6px;
  }
}

div {
  position: absolute;
  width: 22em;
  height: 40em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(255, 255, 255, 0.6),
        rgba(0, 0, 0, 0)
      )
      50% 99%/8em 1.5em,
    radial-gradient(
        100% 50% at 50% 100%,
        #c7d2db 45%,
        rgba(0, 0, 0, 0) 49%,
        rgba(0, 0, 0, 0) 53%
      )
      50% 14%/19.5em 1.8em,
    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(49, 59, 86, 0.2)) 74% 99%/6em
      1.5em,
    linear-gradient(rgba(49, 59, 86, 0.9) 78%, rgba(49, 59, 86, 0.4) 80%) 84%
      98%/0.9em 1.3em,
    linear-gradient(rgba(49, 59, 86, 0.9) 78%, rgba(49, 59, 86, 0.4) 80%) 18%
      98%/0.5em 1.3em,
    radial-gradient(
        150% 100% at 100% 0%,
        transparent 1em,
        rgba(43, 73, 97, 0.6) 1.4em,
        #fff 1.5em
      )
      16% 100%/1.5em 1.5em,
    radial-gradient(
        150% 100% at 0% 0%,
        rgba(0, 0, 0, 0) 1em,
        rgba(43, 73, 97, 0.6) 1.4em,
        #fff 1.5em
      )
      86% 100%/1.5em 1.5em,
    radial-gradient(
        100% 100% at 50% 0%,
        transparent 6em,
        #2b4961 49%,
        white 53%
      )
      50% 102%/15.5em 1.8em,
    radial-gradient(
        100% 100% at 50% 0%,
        transparent 6em,
        #2b4961 49%,
        black 53%
      )
      50% 104%/15.5em 1.8em,
    linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(255, 255, 255, 0.8),
        rgba(0, 0, 0, 0)
      )
      50% 95%/64% 80%,
    radial-gradient(
        100% 100% at 50% 100%,
        transparent 45%,
        #313b56 49%,
        rgba(0, 0, 0, 0) 53%
      )
      50% -0.8%/20.5em 1.8em,
    radial-gradient(
        100% 100% at 50% 50%,
        #e8e8e8 45%,
        rgba(176, 190, 201, 0.7) 49%,
        rgba(0, 0, 0, 0) 53%
      )
      50% 1.5%/20.5em 1.8em,
    radial-gradient(
        100% 20% at 50% 0%,
        transparent 0.4em,
        #313b56 6em,
        rgba(0, 0, 0, 0) 11em
      )
      24% 101%/30% 1.8em,
    radial-gradient(
        100% 40% at 50% 0%,
        transparent 45%,
        #4f6c80 49%,
        rgba(0, 0, 0, 0) 90%
      )
      50% 98%/71% 1.8em,
    radial-gradient(
        100% 40% at 50% 0%,
        rgba(0, 0, 0, 0) 45%,
        #646f7c 70%,
        rgba(89, 115, 131, 0.3) 80%
      )
      50% 99.5%/71% 2em,
    linear-gradient(
        -93.8deg,
        rgba(0, 0, 0, 0) 76.5%,
        rgba(49, 59, 86, 0.8) 78%,
        #e8e8e8 80%
      ) -1em 4%/10.45em 6.2em,
    linear-gradient(
        -93.8deg,
        rgba(212, 221, 227, 0.5) 40%,
        rgba(153, 169, 184, 0.8) 73%,
        #0a2d49 78%,
        rgba(0, 0, 0, 0) 80%
      )
      6.8% 91%/10.45em 79%,
    linear-gradient(
        93.8deg,
        rgba(0, 0, 0, 0) 76.5%,
        rgba(49, 59, 86, 0.8) 78%,
        #e8e8e8 80%
      )
      110% 4%/10.45em 6.2em,
    linear-gradient(
        93.5deg,
        rgba(212, 221, 227, 0.5) 10%,
        rgba(130, 147, 163, 0.7),
        #8293a3 73%,
        #0a2d49 78%,
        rgba(0, 0, 0, 0) 80%
      )
      96% 91%/10.45em 79%,
    linear-gradient(#313b56 78%, #313b56 80%) 52% 18%/89.3% 0.8em,
    linear-gradient(
        -93.8deg,
        transparent,
        rgba(121, 142, 159, 0.2) 78%,
        #e8e8e8 80%
      ) -1em 4%/11em 6.2em,
    linear-gradient(
        93.8deg,
        rgba(0, 0, 0, 0) 76.5%,
        rgba(121, 142, 159, 0.8) 78%,
        #e8e8e8 80%
      )
      110% 4%/11em 6.2em,
    rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
}
@media (max-width: 599px) {
  div {
    top: 65%;
  }
}
div:after {
  content: "";
  position: absolute;
  width: 40em;
  height: 20em;
  top: 103%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(93.8deg, rgba(0, 0, 0, 0) 50%, white 52%) 23em 39%/10.45em
      1em,
    linear-gradient(93.8deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 52%) 23em
      11.6%/10.45em 6.2em,
    linear-gradient(-93.8deg, rgba(0, 0, 0, 0) 50%, white 52%) 7.1em 39%/10.45em
      1em,
    linear-gradient(-93.8deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 52%) 7.1em
      11.6%/10.45em 6.2em,
    linear-gradient(
        95.6deg,
        white 13%,
        rgba(10, 45, 73, 0.2) 15%,
        rgba(130, 147, 163, 0.1) 38%,
        rgba(212, 221, 227, 0.1) 60%
      )
      33.4% 100%/6em 11.3em,
    linear-gradient(
        -95.6deg,
        white 13%,
        rgba(10, 45, 73, 0.2) 15%,
        rgba(130, 147, 163, 0.1) 38%,
        rgba(212, 221, 227, 0.1) 60%
      )
      68% 100%/6em 11.3em,
    rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
}
div:before {
  content: "";
  position: absolute;
  width: 25em;
  height: 40em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(-93.8deg, rgba(0, 0, 0, 0) 50%, #e8e8e8 51%)
    0.45em 20%/5em 6.2em;
  background-repeat: no-repeat;
}

position: absolute;: div Position an element absolutely.Width: 22em; height: 40em;: Set the width and height of the div to create the size of the mirror.

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Final Thoughts

By combining HTML and CSS you can create visually stunning looks like this waterfall. Experiment with code, tweak gradients, and add them to your projects. This is a great way to add some creativity and realism to your web design. Happy coding!

FAQ: Creating a Water Glass Effect with HTML and CSS

Q1: What does a given HTML framework represent?

A: HTML layout and basic document layout. The <div> element of the <body> tag represents the water glass container in our visual perspective.

Q2: How do the CSS rules contribute to the water crystal effect?

A: The CSS code applies styles to both body and div element. Different mounts, shapes and positions are used to create the impression of a water-filled glass. Pseudo-elements add additional visual effects such as :after and :befo reflections and highlights.

Q3: What is the purpose of overflow: hidden; The legacy of prosthetics?

A: Overflow: hidden; The property prevents any overflow from being visible, ensuring that the water crystal effect remains within the specified dimensions.

Question 4: How does a media query (@media (max-width: 599px)) affect styling?

A: The media query changes the styling for screens that are 599 pixels wide or smaller. It is used to standardize the design, ensuring that the water crystal effect looks good on smaller devices.

Water Glass Using HTML, CSS | Water Effect | #untoldcoding

Step 1 Html Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ: Creating a Water Glass Effect with HTML and CSS

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts

Water Glass Using HTML, CSS | Water Effect | #untoldcoding

Step 1 Html Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ: Creating a Water Glass Effect with HTML and CSS

Related Posts

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts