How can I ensure that the gradient coordinates remain constant even if the screen size is adjusted?

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.sky{
    width: 100%;
    height: 400px;
    background-color: rgb(92, 217, 255);
    background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%),
                      radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%),
                      radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%), 
                      radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%), 
                      radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%) , 
                      radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%),
                      radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%), 
                      radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), 
                      radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%),
                      radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
                      radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%),
                      radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%),
                      radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sky"></div>
</body>
</html>

hi there

I'm grappling with the CSS gradients implementation issue.

I am striving to maintain the original shape of clouds when resizing the page.

  • CSS gradients need to be utilized for this task
  • Restrict usage only to HTML and CSS (preferably)

I'm excited to see what solution you come up with :)

[enter image description here](https://i.sstatic.net/pCt35.jpg)

htmlcssfrontendweb-frontendcss-gradients

Answer №1

To keep the appearance consistent, it's important to maintain the aspect ratio.

After examining the provided image, it seems that the clouds are well represented with a height of 400px and a width (obtained from the browser's information) of 1884px.

Therefore, this code snippet utilizes the following aspect ratio:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.sky {
  width: 100%;
  /*height: 400px;*/
  aspect-ratio: 1884 / 400;
  background-color: rgb(92, 217, 255);
  background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%), radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%), radial-gradient(circle at ...
}
<div class="sky"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to remove filters from image links but still apply filters to links within the same div?

Is there a way to use hue-rotate to change the colors of my text links without affecting my image links? I have tried removing the effect from images only, but haven't been successful. Any suggestions on how to achieve this? I created a JavaScript but ...

javascripthtmlcss

What is the reason for this only functioning with the "!important" declaration?

Can anyone help me troubleshoot this code? It seems to only work with the !important rule, which I prefer not to use. I believe there must be a way to achieve the desired outcome without relying on it. What's intriguing is that the CSS line in questi ...

htmlcss

Locked content and inactive link in the browser toolbar

I've encountered a challenge with my page where the content is not scrollable beyond the bar. Additionally, I'm looking to adjust the size of the image to fit the page perfectly without any gaps on the sides, and ensure that the text following th ...

htmlcssheaderpositionfooter

Tips for clearing the browser cache when working with AngularJS in HTML code

Does anyone know how to clear the browser cache in HTML when using AngularJS? I've tried adding the following code to my index.html file and also used $templateCache in my app.js without success. <meta http-equiv="Cache-Control" content="no-cache, ...

htmlangularjsbrowser-cache

What is the best way to extract the first heading tags from a post and showcase the outcome?

Can someone help me with changing the_title() function to a heading tag that I manually input in posts? I have created a post loop list using table code but I am stuck at this point... Desired Title Format: <h3 style="text-align: center;">Title Here ...

phphtmlregexwordpress

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions? input[type="submit"] { font-family: made, mirage; text-decoration: none; backg ...

htmlcss

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

javascripthtmlcss

Displaying PHP Code for Webpage Login System

Looking for some assistance with my PHP login system. After hours of testing, I've encountered an issue where all code from ($errors as $error) is displaying on the webpage instead of functioning properly. I noticed that changing > to < in if(c ...

phpmysqlhtmlcss

Creating an HTML SELECT element without a default blank option in the dropdown list using Angular

Issue: I am encountering a problem with setting a blank item to appear in the dropdown list of my form in Angular and JavaScript. As someone who is new to both languages, I have not been able to find a solution yet. Currently, my code looks like this: $ ...

javascriptjqueryhtmlangularjs

Is it possible to set a foreign key in Django as read-only and still successfully submit the form without encountering any errors?

I have been attempting to set a foreign key as read-only in my Django forms. I am developing a web application with system management capabilities and I need to prevent specific users from altering a certain field after it has been submitted. class Approv ...

htmlpython-3.xdjangoautomationweb-applications

Automatically log out user upon closing the browser window or tab

Currently in the process of creating a chat web application, I encountered an issue. It seems that if a user closes the tab or browser without clicking the 'logout' button, the state in the database will still show them as "online". I am using CO ...

phphtmlcsscookies

The Bootstrap mixin for customizing button variants could not be located

While attempting to alter the color of a bootstrap-info button in bootstrap 4, I wrote the following: $mynewcolor:#77cccc; .btn-info { @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten ...

htmlsassbootstrap-4

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

javascriptphpjqueryhtmlajax

What is the reason behind the escape key not functioning in the Ace editor?

While using the Ace JavaScript editor with vim keybindings, I encountered an issue. Whenever I press the escape key to exit insert mode, the editor loses focus instead of exiting the mode. How can I capture this keypress in all modern browsers so that Ace ...

javascripthtmlcssace-editor

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Recently, I've been attempting to make adjustments to a responsive website that utilizes media queries. Despite my efforts, whenever the site is viewed on a mobile-sized screen, it consistently requires horizontal scrolling regardless of the screen&a ...

csshtmlscale

Is there a way to establish the starting content/value for this tinymce editor?

I have integrated tinymce editor from this repository into my application: https://github.com/dyonir/vue-tinymce-editor. My goal is to pre-populate the editor with content upon initialization. Although I attempted using v-model, it did not work as expect ...

javascripthtmlvue.jstinymcevuetify.js

The page becomes unresponsive and is unable to be scrolled after the modal is closed

Whenever I click a button, two modal boxes pop up simultaneously. Closing these modal boxes by clicking outside of them causes an issue where the page darkens and becomes unscrollable afterwards. var modalA = document.getElementById('projectModalSe ...

javascripthtmlcss

Adjusting Chart.js line graph alignment to the left

I'm curious about why my chart is not aligned to the left and how I can fix this issue. Here is the code snippet I am working with: var data = { labels: ["ID"] , datasets: [ { label: "Sensor 1" , data: [{ ...

javascripthtmlcsschart.js