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.
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.
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.
Got it, thanks!!!
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.!!!
yes you do…
Without it it floats to the top.
That must be what you want, then .
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 */
}
has an extra curly brace “}” beneath the margin property. the box-shadows are missing.
fixed here
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.
Can I add a border-radius to it?