"A cool-looking box" assessment

MDN Learn
#1

Okay. I think I got the CSS Boxes down.

https://jsfiddle.net/gu7v9qeb/

I also added some effects so I can read it better personally, and for learning purposes. I hope I am close :open_mouth:

edit I added absolute paths, hopefully the fiddle works out! edit

edit 8-18-17 - Here also is my Cool Box project. I know it may be off by a bit, but I think I got really close! https://jsfiddle.net/rxjug3kj/ edit 8-18-17

"Mozilla splash page" assessment
"Mozilla splash page" assessment
Learning web development: Marking guides and questions
#2

Hi Air3s,

I just looked at your fiddles, and they are looking really good. Well done. They are probably not exact, but they convey the effect I was after just fine. There is usually no one right answer!

#3

Hey!
I was working on ‘A cool looking box’ section. I wonder, if everything’s fine with my css-code? Have a look, please:

html {
font-family: sans-serif;
}

/* Your CSS below here */

/* computed size=16px(default)=1rem => font-size=18px(we need)/16px=1.125rem */

p {
width: 200px;
height: 50px;
font-size: 1.125rem;
line-height: 2.8;
text-align: center;
background: linear-gradient(to left top, rgba(0, 0, 0, 0.5) , rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
background-color: red;
color: red;
text-shadow: 2px 2px 2px black,
-2px -2px 2px black;
border: 1px solid rgb(201, 19, 19);
border-radius: 0.5rem;
box-shadow: 4px 4px 3px rgb(59, 59, 59),
inset 3px 3px 3px rgba(255, 255, 255, 0.75),
inset -3px -3px 3px rgba(0, 0, 0, 0.5);
}

Learning web development: Marking guides and questions
#4

Hi linika — congratulations, this looks pretty good. I tested your CSS, and it doesn’t look much different to our finished example.

I’d like to invite you to check out our finished code and marking guide, if you want to explore the differences more deeply:

Saying that, there is not one right answer here, and a lot of these things come down to a matter of personal style.

2 Likes
#5

Hi Chrismills

could you give me feedback on assesment cool loking box, please?
here is my css code… thanks in advance

  • {
    padding: 0;
    margin: 0;
    }
    html {
    font-family: sans-serif;
    font-size: 10px;
    }

/* Your CSS below here /
p {
width: 200px;
height: 50px;
text-align: center;
/ set 10px for whole html and than used rem formula 1rem = 10px, 2rem = 20px, so 15px is 1.5rem */
font-size: 1.8rem;
background-color: dodgerblue;
color: dodgerblue;
text-shadow: 2px 2px 1px black;
border-radius: 12px;
border: 1px solid blue;
box-shadow: 3px 3px 2px black,
inset 3px 3px 2px rgba(255, 255, 255, 0.3),
inset -3px -3px 2px rgba(0, 0, 0, 0.3);
margin: 0 auto;
vertical-align: middle;
padding-top: 22px;
margin-top: 100px;
background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.2) 30%, dodgerblue) ;
}

#6

These are my observations, @filip.sky :

  1. You assumed that 1rem = 10px, which is not right. It’s true that in practice many developers start setting the global font size as 10px for easiest manipulation, but in this example that wasn’t the case and the global font size is the default in your browser which is 16px.
  2. The assessment guidelines ask for vertical alignment in our button, that can be accomplished with line-height . You can remove the height declaration if you want and other declarations you added trying to get vertical alignment.

normal shadows and inset ones look okay for me, and the linear-gradient is not exactly as the one asked, but it looks cool :sunglasses:.

1 Like
#7

hey!!!
can someone up there provide me the marking guide ?

thanks in advance… :slight_smile:

#8

Sure thing, @sarth03:

#9 
html {
  font-family: sans-serif;
  font-size: 16px;
}

/* Your CSS below here */

button {
  width: 10rem;
  height: 3rem;
  text-align: center;
  font-size: 1.125rem;  /* I used this website to convert the units: https://www.ninjaunits.com/converters/pixels/pixels-rem/ */
  background-color: hsl(238, 60%, 61%);
  background-image: linear-gradient(to bottom right, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) 30%, hsl(0, 0%, 0%));
  color: hsl(238, 60%, 61%);
  text-shadow: 2px 0px 5px hsl(0, 0%, 0%),
               2px 0px 5px hsl(0, 0%, 0%);
  box-shadow: 3px 3px 1px hsl(0, 0%, 0%),
              inset 1px 1px 1px hsla(0, 0%, 100%, 0.5),
              inset 1px 1px 1px hsla(0, 0%, 0%, 0.5);
  border-radius: 10px;
  border: 1px solid hsl(238, 48%, 29%);
}

button:active {
  box-shadow: inset 2px 2px 1px hsl(0, 0%, 0%),
              inset 1px 1px 1px hsla(0, 0%, 100%, 0.5),
              inset 1px 1px 1px hsla(0, 0%, 0%, 0.5);
}

p {
  margin: auto 50%;
}

Question: Should I use rem for everything, or just for font sizing and other wide scales? My logic is to use rem for things that can affect the layout if confronted with different resolutions and leave pixels for cosmetic design only such as border-radius, text-shadow, etc etc.

1 Like
#10

Thanks for sharing @Rance, this looks pretty cool.

What did you use for your box markup? Was it <p><button>This is a cool box</button></p> ?

You can find our original at:

You could theoretically use rem for everything, but yes, it makes sense to use it for things that would make sense to adjust with the font size, such as line height, letter spacing, etc., and use pixels for stuff like border-radius/box-shadow — you wouldn’t want these to differ with resolution (probably).

#11

What did you use for your box markup? Was it <p><button>This is a cool box</button></p> ?

Yep. I think the tag “button” is more appropriate and it gives you a bit of a head start in markup.

#12

Hi, Chrismill, I had finished the assessment “A cool looking box”. Could you give me some feed back about my work? Here are the CSS code.

/* Your CSS below here */
html {
    font-size: 10px;
}
p {
    width: 200px;
    height: 51px;
    line-height: 3;
    text-align: center;
    /* set the font-size of <html> to 10px, then set the font-size of <p> */
    font-size: 1.7rem;
    background-color: rgb(20, 230, 255);
    color: rgb(20, 230, 255);
    text-shadow: 1px 1px 1px black;
    border-radius: 10px;
    border: 1px solid rgb(0,170,200);
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%);
    box-shadow: inset 3px 3px 3px rgba(255,255,255,0.5),
        inset -3px -3px 3px rgba(0,0,0,0.5),
        2px 2px 4px black;
}
#13

Another nice effort @Tom-Vanderboom. You’ve made some different design choices and used some slightly different syntax to us, but you’ve got the gist of this right.

Here’s our code so you can compare and contrast:

#14

Thank you for reply!

#15

Hi @chrisdavidmills ! It’s been a while, but I was busy working on a seasonal web dev project, so I had to put my CSS studies on pause. However, I am returning today with this.

Live version: https://a-cool-looking-box.hashbase.io/

Code:

#16

Hi @Pawper, nice to hear from you again!

I can see that you have a lot of fun with this one; This looks fine, although it is different looking to our original. But that doesn’t matter — creativity is encouraged.

1 Like
#17

html {

font-family: sans-serif;

}

.box{

width: 250px;

height: 200px;

background-color: rgb(134, 146, 215);

border-radius: 10%;

border: 1px solid;

box-shadow: 4px 4px 3px rgb(59, 59, 59),inset 3px 3px 3px rgba(255, 255, 255, 0.75),

inset -3px -3px 3px rgba(0, 0, 0, 0.5);

.p1 {

  height:100%;

  display:flex;

  color: rgb(255, 255, 255);

  justify-content: center;

  align-items: center;

  font-size: 1.7rem;

  text-shadow: 1px 1px 2px black;

  margin: 0px;

}

}