I created a div that continue img, around img I should include same grid pixel in top-left, and right-bottom. I am sharing my code below:

 <style>
        .pixel {
            width: 10px;
            height: 10px;
            box-shadow: 10px 10px #C7B273;
            /* position: absolute;
            top: -20px;
            right: -25px;
            z-index: -1; */
        }
        
        html,
        body {
            height: 100%;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        img {
            width: 400px;
            /* height: 350px; */
        }
    </style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid images px</title>

   
</head>

<body>
    <div>
        <img src="./images/Festa piscina.png" alt="festa picina">
    </div>
    <div ></div>
    <div>


    </div>


</body>

</html>

After this my result is like in the picture:

But my finally results should be exactly by the UI/UX as in the picture. Any idea how I can create this with css. Thanks in advanced.

CodePudding user response：

<style>
        
        
        html,
        body {
            height: 100vh;
            box-sizing:border-box;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .img {
          position:relative;
          width: 100px;
          padding:10px;
        }
        .img img {
            width:100%;
            
            height:auto;
        }
        .img::before {
            content:' ';
            width: 80px;
            height: 30px;
           
            background:#C7B273;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index:-1;
        }
        .img::after {
            content:' ';
            width: 80px;
            height: 30px;
            
            background:#C7B273;
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index:-1;
        }
    </style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid images px</title>

   
</head>

<body>
    <div >
        <img src="https://picsum.photos/200/300" alt="festa picina">
    </div>
    <div ></div>
    <div>


    </div>


</body>

</html>

I hope this snippet help you, this is not should be exactly by the UI/UX as in the picture. you need to modify before and after with background-image from your UI/UX image

CodePudding user response：

I think this is what you need:

Use repeating-radial-gradient to make the dots.
Use background-size to fix the ratio as a square (in this case 10x10).

The transform: translateX(0) is used to trigger a separate layer for the image, so it keeps on top (not overlapped by the dots as they are position: absolute). Feel free to play with sizes and positioning as you need, I just wanted to keep a high fidelity from the example.

body {
  display: flex;
  place-content: center;
}

.container {
  position: relative;
  margin: 30px; /* to ensure the dots are visible */
}

.top-left,
.bottom-right {
  position: absolute;
  background-image: repeating-radial-gradient(#C7B273, #C7B273 1px, transparent 1px, transparent 10px);
  background-size: 10px 10px;
  width: 200px;
  height: 80px;
}

.top-left {
  top: -30px;
  left: -30px;
}

.bottom-right {
  bottom: -30px;
  right: -30px;
}

.content {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  transform: translateX(0);
}

<body>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</body>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid images px</title>
    <style>
        html,
        body {
            height: 100vh;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img {
            position: relative;
            width: 100px;
            padding: 10px;
        }

        .img img {
            width: 100%;

            height: auto;
        }

        .img::before {
            content: '';
            width: 80px;
            height: 30px;
            background-image: radial-gradient(circle, rgba(223,198,30,1) 10%, rgba(255,255,255,1) 15%);
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -1;
            background-size: 5px 5px;
        }

        .img::after {
            content: ' ';
            width: 80px;
            height: 30px;
            background-image: radial-gradient(circle, rgba(223,198,30,1) 10%, rgba(255,255,255,1) 15%);
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index: -1;
            background-size: 5px 5px;
        }
    </style>

</head>

<body>
    <div >
        <img src="https://picsum.photos/200/300" alt="festa picina">
    </div>
    <div ></div>
    <div>


    </div>


</body>

</html>

Maybe this should do the trick. I have taken over the answer of "Hery Kurniawan"

CodePudding user response：

I use Javascript, css Grid for this... the runnable Jfiddle is in the end of the explation.

JavaScript Explanation

for this, I used JavaScript for creating pixel elements using a for loop

so now all the JavaScript generated elements will have the same style (CSS)

the generated element is now is child of the parent .pixel-container because of using .innerHTML

the trick here is using = that get the already written html and put your code (.pixel div child)

...

this code is inside a function named createPixel(); ,

every time you will write it, it will create a pixel! so i looped it (code below)

let pixelContainer = document.querySelectorAll('.pixel-container');

let numPixel = 100 - 1; // is because one pixel is already created

function createPixel() {
    /* create a pixel in your top left corner */
    pixelContainer[0].innerHTML  = '<div ></div>';

    /* create a pixel in your top right corner */
    pixelContainer[1].innerHTML  = '<div ></div>';
}

/* lopping the createPixel() */
for (let index = 0; index < numPixel; index  ) {
    createPixel();
}

css Explanation

I used grid for creating a repeated 10 times horizontally the .pixel div

grid-template-columns: repeat(10, auto);

and some gap gap: 0.5em; in the parent element so all child now have something similar to margins :)

the idea

the idea is creating a parent div with position: relative

and with the parent of pixel child put position: absolute

now position them with top, bottom, left, right (code below)

* {
    /* css variable, easy to change (one time for all) */
    --outside-value: -2em;
}

#content {
    position: relative;
}

.pixel-container.pixel-bottom {
    position: absolute;
    top: var(--outside-value);
    left: var(--outside-value);
}

.pixel-container.pixel-top {
    position: absolute;
    bottom: var(--outside-value);
    right: var(--outside-value);
}

html Explanation

I created a parent element #content, so <body> won't be the parent (now you can work quiet on your html, without affecting the image and the pixels)

<body>
    <div id="content">
        
        ...

    </div>
</body>

the .pixel divs are inside their parent

 <div >
     <div ></div>
 </div>

there is 2 parent (.pixel-container) that have inside the pixel div childs,

the first I assegned the class pixel-top and the second pixel-bottom

    <div id="content">
        <div >
            <div ></div>
        </div>

        <img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="festa picina">

        <div >
            <div ></div>
        </div>
    </div>

runnable Jffidle

let pixelContainer = document.querySelectorAll('.pixel-container');

let numPixel = 100 - 1; // is because one pixel is already created

function createPixel() {
    /* create a pixel in your top left corner */
    pixelContainer[0].innerHTML  = '<div ></div>';

    /* create a pixel in your top right corner */
    pixelContainer[1].innerHTML  = '<div ></div>';
}

/* lopping the createPixel() */
for (let index = 0; index < numPixel; index  ) {
    createPixel();
}

/* easy to change a value 
   one time of all your css  
*/

* {
    --gold-color: #C7B273;
    --pixel-size: 0.2em;
    --outside-value: -2em;
}

html,
body {
    height: 100%;
}


/* centering */

body,
#content {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* pixel css */

.pixel {
    height: var(--pixel-size);
    width: var(--pixel-size);
    background-color: var(--gold-color);
    border-radius: 50%;
}

img {
    width: 400px;
    z-index: 2;
}


/* repeating */

.pixel-container {
    display: grid;
    grid-template-columns: repeat(10, auto);
    gap: 0.5em;
}


/* positioning */

#content {
    position: relative;
}

.pixel-container.pixel-bottom {
    position: absolute;
    top: var(--outside-value);
    left: var(--outside-value);
}

.pixel-container.pixel-top {
    position: absolute;
    bottom: var(--outside-value);
    right: var(--outside-value);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>
    <div id="content">
        <div >
            <div ></div>
        </div>

        <img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="festa picina">

        <div >
            <div ></div>
        </div>
    </div>
</body>

</html>