All geek questions in one place

Background gradient and rotation create a weird overlay

I am using a rotating square panel as a separator on my site.

The background color is a gradient and fixed, so it creates a good scroll effect, but when the rotated div reaches the top of the view port, a strange gradient overlay appears.

Just look at it (you need to scroll slowly until the delimiter reaches the top of the viewport): http://jsfiddle.net/nff2fjf7/4/

body { height:800px; } .seperator { margin:100px 0 0 0; background-attachment: fixed; background-color: rgba(0, 157, 197, 1); background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); width:100%; height:40px; text-align: center; } .triangle { width:40px; height:40px; display: inline-block; margin: 10px 0; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-attachment: fixed; background-color: rgba(0, 157, 197, 1); background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); } 
 <body> <div class="seperator"> <div class="triangle"></div> </div> </body>
+6
source share
2 answers

 body { height:800px; } .seperator { margin:100px 0 0 0; background-attachment: fixed; background-color: rgba(0, 157, 197, 1); background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); width:100%; height:40px; text-align: center; } .triangle { width:40px; height:40px; display: inline-block; margin: 10px 0; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-attachment: fixed; background-color: rgba(0, 157, 197, 1); background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-repeat:no-repeat; } 
 <body> <div class="seperator"> <div class="triangle"></div> </div> </body>

setting background-repeat:no-repeat to .triangle seems to cure it at the top of the page, but the problem is still present at the bottom: /

Fiddle

+1
source

I am not a professional who has nothing to do with web designs, and I have little idea what each particular operator does, however, here, what can I tell you.

  • Your shapes are NOT displayed with a gradient. The colors you use for the gradient are red / blue, and only blue is displayed.

  • comment on the next line from the triangle, and you will notice that your square, which you use for the triangle, actually gets a gradient! (blue to red gradient)

    background-attachment: fixed;

Also, if you set the background snap mode to scroll everywhere, you will notice that the square you use for the gradient of the triangle does not display the way you want.

  1. If you're fine with the colors, you really don't need a gradient.

Edit: I messed up your code, and if you want to keep the gradient (top to bottom), you can use this code , which is your code with an attached background and a modified triangle:

 body { height:800px; } .seperator { margin:100px 0 0 0; background-attachment: scroll; background-color: rgba(0, 157, 197, 1); background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); width:100%; height:40px; text-align: center; } .triangle{ width: 0; height: 0; display: inline-block; margin: 40px 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid rgba(231, 52, 76, 1); }
0
source

Source: https://habr.com/ru/post/976602/

More articles:


All Articles