Question 392937 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to brighten the colors in CSS?

I’m trying to have a box that’s got three light tubes around it in CSS. What I have right now looks like this:

Sidebar box

<div class="neon1" style="height:100%">
    <div class="neon2" style="height:100%">
        <div class="neon3" style="height:100%">
            <div class="neon4" style="height:100%">
                RenderSidebar
            </div>
        </div>
    </div>
</div>

.neon4 {
    outline: none;
    border-radius: 7px;
    border-color: red;
    box-shadow: 0 0 10px red;
    padding: 5px;
    border-bottom: none;
    border-width: 20px
}

.neon3 {
    outline: none;
    border-radius: 10px;
    border-color: darkorange;
    box-shadow: 0 0 10px darkorange;
    padding: 5px;
    border-bottom: none;
}

.neon2 {
    outline: none;
    border-radius: 13px;
    border-color: blue;
    box-shadow: 0 0 10px blue;
    padding: 5px;
    border-bottom: none;
}

.neon1 {
    outline: none;
    border-radius: 16px;
    border-color: blue;
    box-shadow: 0 0 2px blue;
    padding: 5px;
    background-color: white;
    border-bottom: none;
}

What I was trying to accomplish was much brighter and more vivid. This came out like it was done in pastels. I’ve tried fiddling with the values, but nothing seems to give the result I’m looking for.

Also, and this is more minor, is there a way to have the CSS do the job of creating and nesting the divs instead of having to do it in the HTML?

Thanks!
Lisa

Tags:

2

Answers


  1. 0

    By having no concept provided, it’s hard to answer but:
    You can use white color with low opacity like there be a parent e.g. blue, and childs have glass-like background
    what I mean is each child brightens the previous one.

    consider .container as main parent which has nested .masks like:

    container
|--mask
   |--mask
      |--mask
       ...

    .container {
   background-color: blue
}
.box{
   background-color: rgba(255, 255, 255, 0.3)
}
    Login or Signup to reply.
  2. 0

    You are after something like this? An element surrounded by three light tubes?

    enter image description here

    The secret to making a light tube is to have a border and two shadows, one outside and one inside.

    Here is a snippet which produces the effect you see above.

    body {
  margin: 4em 2em 2em;
  background: silver;
}

.neon3 {
  border-radius: 10px;
  border: 5px solid yellow;
  box-shadow: 0 0 10px yellow, inset 0 0 10px yellow;
  padding: 15px;
}

.neon2 {
  border-radius: 13px;
  border: 5px solid magenta;
  box-shadow: 0 0 10px magenta, inset 0 0 10px magenta;
  padding: 5px;
}

.neon1 {
  border-radius: 16px;
  border: 5px solid blue;
  box-shadow: 0 0 10px blue, inset 0 0 10px blue;
  padding: 5px;
}
    <div class="neon1">
  <div class="neon2">
    <div class="neon3">
      Render Sidebar
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search