2
I don’t know how to explain this situation. I created a tooltip using both CSS3 and HTML5 only. In normal size (100% zoom), on the left, the elements are blurred and it appears that there is an edge around the tooltip (just below "Required!" even with border: 0px; border-color: transparent;). Already in enlarged size (zoom 200%), to the right, the elements present excellent sharpness.
My theory is that edge pixels are compressed, which causes this visual defect. Can anyone tell me why this happens? And how to solve this?
Is this little blue arrow below the tooltipe a svg? Or is the "whole balloon" a SVG where the arrow is part of it?
– hugocsl
Both the balloon and arrow are pure CSS3. Briefly, I used a class
.tooltip {position: relative;}on a tag<span class="tooltip">. For the balloon, I used.tooltip::before{position:absolute;border:0px;border-color:transparent;}. And for the arrow, I used.tooltip::after{position:absolute;border-color:transparent;border-top-color:transparent;}.– Paulo Dos Santos
Dude you noticed that the whole picture gets "blurry" up to the Administrator text? I think the problem is not related to Svgs etc... try to put the meta tag viewport right check the settings of your monitor and browser, if retina can have some variation... are just tips ok. I’m not sure what the problem might be...
– hugocsl
I’ll rephrase the question.
– Paulo Dos Santos
Amigo has a topic that has already been created referring to this subject, I will post the link here I think will solve your problem. https://answall.com/questions/9064/como-suavizar-a-fonte-com-css-no-chrome
– Rodolfo
I tested everything I had there, but it did not have good effects. It made everything worse, in fact. Mainly the
shadow, it makes the division even more evident. For now, I’m using a larger font size, which "solved" the problem.– Paulo Dos Santos