CODEWITHSUNDEEP
cssborderlinear-gradientsdisplay
Scopo
Scopo

Reputation: 301

Gradient rounded borders and display:block

EDIT: It seems the snippet works fine if I remove z-index from the parent, but it's most certainly not doing that on my forum. Take a look: http://pjonline.tk/index.php?act=idx

So, I have something a little complicated set up. Basically, I'm making a forum, right? And each forum has a description. Since some go on to multiple lines, I have it set as display:block so there's no trouble with wrapping.

Now, I want a kind of fancy look for these. Specifically, this: enter image description here

Except, uh, y'know. Properly made. My first attempt was with percentage border-radius, but it was squished in too much. So I decided to create a div around it that'd have normal borders, and with both borders having a transparency fade so it'd look seamlessly like the display above.

I wandered around Google for a while and eventually found the idea to use ::after to get a gradient rounded border. Unfortunately, due to the display:block, the ::after's background is appearing on top of the actual background. ::before didn't help either.

So um, lil bit stuck on what to do ^^; I'd really like a border to what I've set, but nothing's working out and you of course just can't set the colour of top-left/bottom-right >>

Is there a way I could do this?

Current codes:

body { /* only here to set font size/family */
  font-size: 11px;
  font-family: arial;
}

#wrapper { /* a container these are held in with a specific z-index */
  position:relative;
  z-index:7;
}

.forum-desc {
  background: #EFEFEF;
  border: 1px solid transparent;
  display: block;
  border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
  margin-left: 40px;
  width: 335px;
  height: 24px;
  padding: 5px;
  font-style: italic;
  text-align: justify;
  -moz-text-align-last: enter;
  text-align-last: center;
  background-clip: padding-box;
  position: relative;
  z-index: 2;
}

.forum-desc::after {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: linear-gradient(red, blue);
  content: '';
  border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
  z-index: -2;
}
<div id="wrapper">
    <span class="forum-desc">Various information pertaining to rules and the proper way to act on the forum and game.</span>
</div>

Upvotes: 0

Views: 308

Answers (2)

Scopo
Scopo

Reputation: 301

... Apparently it was my .row4's background-color that was blocking it all from layering properly... Bizarre, but an issue resolved by assigning .row4 a z-index, I guess. I did everything right, just had conflicting code x:

Upvotes: 0

Logeshwaran
Logeshwaran

Reputation: 461

Here u go my frnd...

css:-

body { /*only here to set font size/family */
  font-size: 11px;
  font-family: arial;
}

.forum-desc {
  background: #EFEFEF;
  border: 1px solid transparent;
  display: block;
  border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
  margin-left: 40px;
  width: 335px;
  height: 24px;
  padding: 5px;
  font-style: italic;
  text-align: justify;
  -moz-text-align-last: enter;
  text-align-last: center;
  background-clip: padding-box;
  position: relative;
}

.forum-desc::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: linear-gradient(red, blue);
  content: '';
  border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
  z-index: -2;
}

Output:-

enter image description here

Upvotes: 1

Related Questions