I was trying to draw a small triangle (as the tail of a rectangular chat-bubble) in CSS. I managed to do that, but then I wanted to apply a box-shadow to the tail and the box. So, I have the following CSS for the tail:
#bubble::after {
content: "";
display: block;
position: absolute;
bottom: -22px;
left: 10px;
border-width: 22px 0 0 20px;
border-style: solid;
border-color: #fff transparent;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
}
Which renders this (Sorry; background is a bit blurry because of the zoom):
Notice how the box-shadow doesn't render alongside the diagonal part of the bubble's tail.
The desired effect I would like to achieve is:
This is a screenshot from inside Photoshop, so it might looks a bit different than the partial screenshot of the browser's portview (the shadow is supposed to be larger, I forgot to update the layer style after scaling the path).
How would I achieve that?
Thanks!
P.S: I am open to the thought of using a raster image or a SVG, although I'd prefer if I didn't have to.
I think that what you're trying to do is relevant to this previous post on SA: CSS Drop Shadow for CSS drawn arrow
I'm afraid that's not possible with CSS only. box-shadow applies to the element's box, with an image that's still a rectangle :)
See http://lineandpixel.com/blog/png-shadow for a write-up from another frustrated user.
You'll have to bite the bullet and use a raster image or SVG.
Related
Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.
I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.
{
width: auto;
border: none;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
Shadows should appear on the left-side as well in MSEdge.
The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.
Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.
It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?
Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page
probably this is not needed anymore but maybe someone else wants to do the same :D
this should put a background-color on the overscroll-area of any ios device
body:after {
content: '';
position: fixed;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
z-index: -1;
background: #000000;
}
here is the link to my gist
Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.
Set the body colour body {background-color: white} should work.
More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:
body {
background-color: rgba(0, 0, 0, 0.4);
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
background-size: 100% 100%;
}
FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.
FYI 2: I recall that really old versions of Safari needed the colour set on the html element.
You can now do this with a meta tag:
<meta name="theme-color" content="#923941">
I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images).
The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following CSS:
button {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
button:hover {
background-position: bottom;
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
So is this just an IE flaw, or can I actually do something about it ?
Thanks in advance.
EDIT:
I might just add, that if I just insert the same image as <img src="lala.png"> the text is NOT blurry. It only applies to backgrounds :/
It is a normal IE bug.
http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035
i Haven't found any solutions to this subject yet.
I'd recommend not having that button as a sprite at all for the following reasons-
It is not accessible or SEO efficient - neither screen readers nor search engine crawlers can read the text in the image.
It requires an additional HTTP request to download the sprite image, which will make your site load more slowly - especially on mobile devices
Unless you make the button much larger than it needs to be rendered on the page and scale down, then you will have issues of blurring when scaling up on high density devices, such as newer full size iPads and premium Android tablets, recent Macs and premium windows laptops. Clearly making the image larger than it needs to be means it is larger and exacerbates the speed penalty from point two.
If you want to change the colour scheme at any point in the future, you only need to change your CSS color properties, not re-generate new images.
It is trivial to make this button appear like your screenshot in CSS.
If you use markup something like this-
<button class="text-button" type="button">Send Besked</button>
And CSS like this-
.text-button {
background: #b32e01;
border: none;
border-radius: 8px 8px 8px 0;
color: #ffffff;
cursor: pointer;
height: 3em;
outline: none;
padding: 1em 0;
text-transform: uppercase;
width: 12.5em;
}
.text-button:hover {
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
It ends up looking like this (see JSFiddle for source)-
Although only a rough mockup (you may want to change proportions, add a gradient or change the background on hover - I can't see the original sprite to know the transformations you make in the hover state sprite) it already looks much like the original, and with all the advantages above - in particular that it should solve the text problem you originally posted.
I've just come across this issue.
I just placed the background image inside a span to keep the border radius and background image on different elements, seems to have done the trick.
.item {
border-radius: 8px 8px 8px 0;
}
.item span {
background-image:url('imagepath.png');
}
I found success in eliminating the blur effect by using :not(:hover). It seems to force the background-image into not blurring.
Try adding
button:not(:hover) {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
Here's the CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
There also a Webkit only style declaration -webkit-font-smoothing which takes the values
none
subpixel-antialiased
antialiased
where subpixel-antialiased is the default value.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
See here http://maxvoltar.com/archive/-webkit-font-smoothing
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.
After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.
Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)
To reproduce the undesirable effect, try something like the following
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
(source: friendlygp.com)
You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.
Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.
I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.
However, if anyone can suggest an alternative I would be very much appreciative!
Finally, after an awfully long time, someone much cleverer than I has a solution to this:
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
is your friend :)
From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.