"A cool-looking box" assessment


(Adeseyeair3s) #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


Learning web development: Marking guides and questions
"Mozilla splash page" assessment
"Mozilla splash page" assessment
(Chris Mills) #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!


(Linika) #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
(Chris Mills) #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.


(Filip sky) #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) ;
}