Questions tagged [css-mask]
The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.
css-mask
98
questions
2
votes
1
answer
3k
views
CSS3 inverted/reverse rounded corner for a tooltip
I'm trying to create a tooltip that looks like this using CSS:
This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/
So, basically i'm using css3 masking:
div:after {
width: 61px;
...
- 4,382
1
vote
2
answers
767
views
Clip-path/web-kit-mask works when SVG is seperate file, but not when inline
I am using the following implementation to mask an element using an SVG and some CSS.
//styles.css
.elementToBeMasked {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
...
- 537
0
votes
3
answers
5k
views
SVG not displaying properly on Android 4.x native browser
This what SVGs should look like
And this is what SVGs look like on Android 4 native browser on a Samsum Galaxy S3
This is how they are embedded in the page
.petal {
-webkit-mask-image:url(../...
- 12.9k
3
votes
1
answer
2k
views
Use a color for a webkit mask on a PNG
I know how to do it via using an image, but it needs to be dynamically changing. Are there any tricks to using a color in place of an image? There appears to be very little documentation on using ...
- 2,458
3
votes
1
answer
3k
views
Changing -webkit-mask-position through javascript
I'm working on an iPad webview project that requires a slider to move back and forth over two pictures, revealing one or the other when sliding to the left or right. Due to project restraints, I can't ...
- 53
0
votes
1
answer
776
views
How to detect when -webkit-mask-box-image has downloaded
I generate an mask image on a web server programmatically, then apply it to a HTML element with the following code:
imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch"...
- 6,610
0
votes
1
answer
850
views
CSS: automatic fallback/workaround for devices not supporting CSS3 image-mask and/or pseudo-elements
For my mobile-desktop nav-bar I have background buttons (default). On top I'm using :after to insert an element with background (plain grey) which on hover changes to (lt. blue) and content( url(image....
- 28.2k
5
votes
1
answer
5k
views
Can you use a CSS sprite for webkit-mask-box-image (or clip it?)
I'm playing with the -webkit-mask-box-image css property.
<div style="
background-color: red;
-webkit-mask-box-image: url('images/cards/set1.png');
"></div>
This works great. I ...
- 40.5k