Can someone show me how to make this in either html or css please

How do you make something like this in html or css?

Why don’t you try to duplicate it using nested divs, padding and borders. See what you can come up with.

1 Like

I don’t understand any of what you just said.

Can you get me started?

Can you show me this code working in jsfiddle?

How came black and hex colors don’t work with that code?

I put black in and it gave me white.

That code won’t work with other colors.

Now what?

Go to school? Take an HTML/CSS course?

Do the letters in the red rectangle mean anything to you?

Those letters mean that the code is not CSS therefore browsers will not recognize it.

The second comment offers a super simple explanation with examples. begins with "birjolaxew 34 points 2 months ago ".

https://www.reddit.com/r/webdev/comments/5hqk6o/css_scss_sass/

 

If you were to click the downward pointing V in the right corner and select “View Compiled CSS” the code would be transformed into CSS that browsers can read. You could change the colors in the CSS code.

You can Google for more in depth information about SCSS or SASS. But if you have no programming background, it’s probably not for you.

2 Likes

Who wants to teach me SCSS or SASS? Any takers?

Just a quick follow-up. You do not need to use SCSS or SASS to create that box of boxes. The author whose code you found happened to use SCSS. All you have to do is compile that code as CSS and use that.

1 Like

Got it, thanks!!!

1 Like

Mesmerizing colors

I just removed half the code and it works fine like this.

html {
  width: 100%;
  height: 100%;
}

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.box {
  box-shadow: 
0 0 0 5px blue,
0 0 0 10px purple,
0 0 0 15px blue,
0 0 0 20px purple,
0 0 0 25px blue,
0 0 0 30px purple,
0 0 0 35px blue,
0 0 0 40px purple,
0 0 0 45px  blue,
0 0 0 50px  purple,
0 0 0 55px  blue,
0 0 0 60px  purple,
0 0 0 65px  blue,
0 0 0 70px  purple,
0 0 0 75px  blue,
0 0 0 80px  purple,
0 0 0 85px  blue;
}

<div class="box"></div>

You probably do not need

body, html {width:100%;height:100%;}

That only serves to center it in the browser window; unless of course that is what you want.!!!

1 Like

yes you do…

Without it it floats to the top.

That must be what you want, then :slight_smile: .

 

However, see if this prevents the box from overflowing the top of the page when those 100% widths and heights are removed?

.box {
    margin:85px;  /* add me */
}
1 Like

has an extra curly brace “}” beneath the margin property. the box-shadows are missing.

fixed here

https://jsfiddle.net/Lqu7rgqk/6/

I like it centered, but it’s ok. Only using it for screen image purposes.

Go with what you like. It will probably have to be changed anyway when you use it on a real web page.

That margin:85px should be included whether it is vertically centered or not. Otherwise the box has no dimensions.

1 Like

Can I add a border-radius to it?