I'm trying to frame my web page, and I want divs with just the corners defined. Essentially, I want the top-right and bottom-left corner to have gradient borders. I hope my "ASCII art" makes sense to you.
- - - - - - - ----.
|
|
'
|
'
'
'
I want the corresponding effect for the bottom-left corner as well.
My incorrect code thus far does not give the desired effect:
-webkit-border-image:
-webkit-gradient(linear, 0 0, 100% 0, from(#666), to(#fff)) 1 100%;
As far as I can tell, you'd like a gradient from top right to bottom left, only showing on the border. As far as I know, you'd either need to create a background image for the whole thing, or at least for the border. Also, only two of five major browsers support gradients like that. Sorry I couldn't offer more help.
Related
I'm trying to achieve rounded corner borders in a document with three divs. The top div will contain the top corner, the middle div a straight section, and the third the bottom corner. I'm applying border-top-left-radius and border-bottom-left-radius to the first and third divs respectively.
You can see what this looks like here: https://codepen.io/thomasjm/pen/zYNgzXv
The trouble is, in Chrome there's some anti-aliasing issue (I think) that causes it to look jagged where the divs meet. (You may need to zoom the browser in to see it clearly.)
I've noticed I can make it look okay by increasing the width of the corner pieces slightly, to 4.1px or so instead of 4px. But I'm hoping to find a real solution.
EDIT: I'm using Chrome 90.0.4430.72 on Ubuntu 20.04.2.
EDIT 2: it looks strange in a totally different way on Firefox, where there seems to be some antialiasing near the top and bottom only:
I found a way to fix it. It seems to only happen when an alpha channel is present in the color. So if I change the color from rgb(66, 133, 244, 0.5) to rgb(66, 133, 244), the boundary between the divs becomes perfectly smooth.
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
I know there are a lot of topics covering blur caused by CSS animations, but I seem to have come across a rather unique use case where every solution I've come across simply doesn't work.
I made a codepen showing a minimalist setup of my exact issue:
Codepen
Basically, I have a div with opacity 0.95 that is skewed by 10 degrees, and whose inner content is skewed by -10 degrees (so that it appears upright). Within this content there is a paragraph at the bottom. When you hover over it, it triggers an animation of the paragraph being shifted to the right. Unfortunately this makes all the text on the page blur.
Note that removing either both skew transformations or the opacity setting make the text not blur anymore.
This is probably caused by the skew and the reverse skew that force the browser to accelerate the process. But you don't have to apply two skews to get this result, you can also use a gradient background
background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);
I would like to make an arrow like so:
Is this possible with just CSS3, Notice how it's a black arrow with an inner white arrow slightly -1px from the black. Ideas? Thanks
It can be done with just a singular div and CSS3 transformations. Here is an example: http://jsfiddle.net/yVTr3/5/
It could easily be modified to adapt to the size and exact colors you would need.
Sure you can do that, even with css 2.1 - http://css-tricks.com/snippets/css/css-triangle/
However you'll need to create 3 arrows one on top of each other - black + white + black - and position them accordingly (1px from right for the middle one, 2px from right for the topmost)