How do I remove this ugly border created inset shadow?
Jon Ramvi
How do I remove this ugly border created by a background totally overlapped by a inset shadow? Well, that was the idea anyway.
circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: black;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:inset 0px 0px 0px 0px #ffd300;
transition: all 0.2s ease-out;
}
Chique
Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, Chrome
It is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing
Image 2, Firefox
In the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.
There is no solution to the actual rendering. (See below the solution for the explanation).
On the contrary, I've played and found a fix for you, which might do the exact thing, by placing an :after pseudo element to mimic the animation exactly as you want it to be.
Click on the "Run code snippet" button below to see if this is exactly what you want.
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:120px;
height: 120px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
font-size: 0;
z-index: -1;
}
.circle:before {
display:block;
content:'';
position:absolute;
background:black;
width:0px;
height:0px;
border-radius:50%;
top:68px;
left:68px;
transition: all 0.2s ease-out;
overflow:hidden;
z-index: 0;
}
.circle:hover:before {
width:100px;
height:100px;
top:18px;
left:18px;
font-size: 48px;
}
.circle:after {
display:block;
position:absolute;
font-size: 48px;
line-height: 90px;
color: black;
transition: color 0.2s ease-out;
content: "J";
z-index: 1;
top:18px;
left:58px;
}
.circle:hover:after {
color: white;
transition: color 0.1s ease-out;
}<a class="circle" href="#">Click</a>Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, Chrome
It is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing
border-radius:50%; to a 20%, 10% or 0%, you will slowly see those ugly marks disappearing. As pixels are square themselves, it renders perfectly in case of a rectangular shape / with straight line edges. Image 2, Firefox
In the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: EditText value is reversed
- Next: How to resolve error 413 Request Entity Too Large in Nginx and Amazon ElasticBeanstalk?
Related
Related Related
- 1
How do I remove the ugly border around CALayer with cornerradius?
- 2
How do I remove the ugly border around CALayer with cornerradius?
- 3
How to remove the outline when using inset box shadow and Border Radius
- 4
Adding border and inset box shadow?
- 5
How do I remove the double border on this table?
- 6
How do I remove the double border on this table?
- 7
How to remove border/shadow from lollipop buttons
- 8
How to remove top border shadow from ActionBar
- 9
How to remove navigation bar border/shadow?
- 10
How to create inset text shadow?
- 11
How do i remove a dynamically created div?
- 12
How do I use magrittr::inset()?
- 13
how do I speed up this ugly query?
- 14
How do I remove the 'double border' on the inside walls of this table? CSS
- 15
How do I remove newline symbols inside emacs vertical border
- 16
How do I remove the bottom border on a bootstrap 3.0 table thead?
- 17
How do I remove the border between rows in a table?
- 18
How do I remove the border of all <li> elements on the last row?
- 19
How do I remove the 'double border' on the inside walls of this table? CSS
- 20
How do I remove this "selected" border off my button?
- 21
How do i remove white border from my code for website?
- 22
How do I add and remove a border on image in javascript
- 23
How do I remove the scrollbar and display a solid border?
- 24
border-radius with box-shadow inset pixelized / rugged
- 25
Firefox not properly displaying inset box-shadow with border-radius
- 26
How do I make a border in css that has different color on top and bottom, and has some shadow at the bottom?
- 27
How do I remove a subdomain that I created on meteor.com
- 28
How to remove the blue box shadow border in button if clicked
- 29
How to make an inset drop shadow in SVG
Comments