Jump to content
Please Use CODE Tags

HTML border-image, left/right gradients

79wjd
By 79wjd
in Programming
 Share
Posted

I have an image as the background of my body, and then a white background where all the contents of the page actually are. However, I want to add a left-right gradient border on the right and a right-left gradient border on the left in order to make the change from the background image to the white background more subtle. Obviously I could do this a different way, but I'd rather not have to rewrite a whole bunch of stuff in order to do that, and -- if it's possible -- I'd rather just apply a gradient to the right border (and the opposite gradient to the left). 

  


<body style="background: url ('image1.png');"> 

     <div id="container-body">

 

     </div>

</body> 

 

 

Right now I have this, which gives me the desired look on the right, but I don't know how to reverse/rotate it for the left side. I tried just doing another webkit border image with the parameters reversed (but of course that doesn't work since it then changes both sides and not just the left side).  


#container-body {
    max-width: 1100px; 
    margin: 150px auto;
    margin-bottom: 0;
    width: 100%;
    background-color: white;
    border-right: 30px solid white;

    border-left: 30px solid white; 
    -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fafafa), to(rgba(0,0,0,0)))1 100%;
}

PSU Tier List | CoC

Gaming Build | FreeNAS Server

Spoiler

i5-4690k || Seidon 240m || GTX780 ACX || MSI Z97s SLI Plus || 8GB 2400mhz || 250GB 840 Evo || 1TB WD Blue || H440 (Black/Blue) || Windows 10 Pro || Dell P2414H & BenQ XL2411Z || Ducky Shine Mini || Logitech G502 Proteus Core

Spoiler

FreeNAS 9.3 - Stable || Xeon E3 1230v2 || Supermicro X9SCM-F || 32GB Crucial ECC DDR3 || 3x4TB WD Red (JBOD) || SYBA SI-PEX40064 sata controller || Corsair CX500m || NZXT Source 210.

Link to comment
https://linustechtips.com/topic/612620-html-border-image-leftright-gradients/
Share on other sites
Link to post
Share on other sites
Posted

could you upload a screen shot?

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
Posted
  • Author
4 minutes ago, vorticalbox said:

could you upload a screen shot?

With the desired effect:

Vy3mmAe.png

 

Without: 

Bp70YsN.png

PSU Tier List | CoC

Gaming Build | FreeNAS Server

Spoiler

i5-4690k || Seidon 240m || GTX780 ACX || MSI Z97s SLI Plus || 8GB 2400mhz || 250GB 840 Evo || 1TB WD Blue || H440 (Black/Blue) || Windows 10 Pro || Dell P2414H & BenQ XL2411Z || Ducky Shine Mini || Logitech G502 Proteus Core

Spoiler

FreeNAS 9.3 - Stable || Xeon E3 1230v2 || Supermicro X9SCM-F || 32GB Crucial ECC DDR3 || 3x4TB WD Red (JBOD) || SYBA SI-PEX40064 sata controller || Corsair CX500m || NZXT Source 210.

Link to post
Share on other sites
Posted
  • Author
4 minutes ago, thekeemo said:

I dont see a difference..

look at the right 10% of the picture.

PSU Tier List | CoC

Gaming Build | FreeNAS Server

Spoiler

i5-4690k || Seidon 240m || GTX780 ACX || MSI Z97s SLI Plus || 8GB 2400mhz || 250GB 840 Evo || 1TB WD Blue || H440 (Black/Blue) || Windows 10 Pro || Dell P2414H & BenQ XL2411Z || Ducky Shine Mini || Logitech G502 Proteus Core

Spoiler

FreeNAS 9.3 - Stable || Xeon E3 1230v2 || Supermicro X9SCM-F || 32GB Crucial ECC DDR3 || 3x4TB WD Red (JBOD) || SYBA SI-PEX40064 sata controller || Corsair CX500m || NZXT Source 210.

Link to post
Share on other sites
Posted
6 minutes ago, djdwosk97 said:

look at the right 10% of the picture.

so you want a shadow on both sides? maybe use box-shadow?

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
Posted
  • Author
48 minutes ago, vorticalbox said:

so you want a shadow on both sides? maybe use box-shadow?

hmmmm, didn't think of that. What I be able to get a shadow to be as subtle as a light gray to white gradient? 

PSU Tier List | CoC

Gaming Build | FreeNAS Server

Spoiler

i5-4690k || Seidon 240m || GTX780 ACX || MSI Z97s SLI Plus || 8GB 2400mhz || 250GB 840 Evo || 1TB WD Blue || H440 (Black/Blue) || Windows 10 Pro || Dell P2414H & BenQ XL2411Z || Ducky Shine Mini || Logitech G502 Proteus Core

Spoiler

FreeNAS 9.3 - Stable || Xeon E3 1230v2 || Supermicro X9SCM-F || 32GB Crucial ECC DDR3 || 3x4TB WD Red (JBOD) || SYBA SI-PEX40064 sata controller || Corsair CX500m || NZXT Source 210.

Link to post
Share on other sites
Posted
1 hour ago, djdwosk97 said:

hmmmm, didn't think of that. What I be able to get a shadow to be as subtle as a light gray to white gradient? 

you can increase the is you set ot to 0px 0px 50px it will quite faint and be all the way around.

 

first moves it right and the second moves it down last is how far the shadow higher the number fainter it becomes.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×