CODEWITHSUNDEEP
htmlcss
r12
r12

Reputation: 1732

How do I get the border to be darker than the background color in a div?

I'm working my way though some css-grid examples, and I made a quick attempt to replicate the tetris blocks here.

One thing that's tricking up me up is that some of the borders are darker than the middle section, and I can't seem to create that effect. I know I can just hard-code color values in, but I'm trying to do it in a way that is more automatic.

Inside .wraper > *, I tried doing background-color:..., but that didn't seem to have an effect. The values I have inside those hsla() functions are mostly arbitrary. I just guessed-and-checked until something worked.

Here is my css and html, and a codepen:

.wraper{
    display: grid;
    /* grid-gap: 10px; */
    grid-template-rows: repeat(100px);
    grid-template-columns: repeat(7, 100px);
}

* {
    box-sizing: border-box;
  }
.wraper > * {
    /* background-color: red; */
    min-height: 100px;
    width: 100px;
    border-bottom: 10px solid hsla(2, 100%, 100%, 0.15);
    border-right: 10px solid hsla(2, 100%, 100%, .2);
    border-top: 10px solid hsla(2, 100%, 100%, .5);
    border-left: 10px solid hsla(2, 100%, 100%, 0.25);

    background-color: hsla(2, 100%, 100%, 0.25);
}

.b {
    background-color: blue;
}

.r {
    background-color: red;
}

.lb {
    background-color: lightblue;
}

.g {
    background-color: green;
}

.y {
    background-color: yellow;
}

html below:

<div class="wraper">
    <div class="b"></div>
    <div class="lb"></div>
    <div class="lb"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>
    <div class="y"></div>


    <div class="b"></div>
    <div class="lb"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="r"></div>
    <div class="r"></div>    
    <div class="g"></div>

    <div class="b"></div>
    <div class="lb"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="r"></div>
    <div class="r"></div>
    <div class="g"></div>

</div>

Upvotes: 0

Views: 991

Answers (1)

APerson
APerson

Reputation: 8422

I had some success with using 0% as the third argument in hsla.

In this snippet, the right and top borders use hsla(2, 100%, 0%, ...); and the left and bottom borders use hsla(2, 100%, 100%, ...);:

.wraper{
    display: grid;
    /* grid-gap: 10px; */
    grid-template-rows: repeat(100px);
    grid-template-columns: repeat(7, 100px);
}

* {
    box-sizing: border-box;
  }
.wraper > * {
    /* background-color: red; */
    min-height: 100px;
    width: 100px;
    border-bottom: 10px solid hsla(2, 100%, 100%, 0.25);
    border-right: 10px solid hsla(2, 100%, 0%, .25);
    border-top: 10px solid hsla(2, 100%, 0%, .15);
    border-left: 10px solid hsla(2, 100%, 100%, 0.5);

    background-color: hsla(2, 100%, 100%, 0.25);
}

.b {
    background-color: slateblue;
}

.r {
    background-color: red;
}

.lb {
    background-color: lightblue;
}

.g {
    background-color: green;
}

.y {
    background-color: yellowgreen;
}
<div class="wraper">
        <div class="b"></div>
        <div class="lb"></div>
        <div class="lb"></div>
        <div class="y"></div>
        <div class="y"></div>
        <div class="y"></div>
        <div class="y"></div>
    
        
        <div class="b"></div>
        <div class="lb"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="r"></div>
        <div class="r"></div>    
        <div class="g"></div>
    
        <div class="b"></div>
        <div class="lb"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="r"></div>
        <div class="r"></div>
        <div class="g"></div>

    </div>

Upvotes: 1

Related Questions