I wonder if it is possible in pure css to have a stencil effect:
A block with a background color, and color "transparent" that would reveal the background of the parent block.
For example, I have a parent block with a gradient or pattern as background, and I want to overlay a block with a black background where the text content would leave see the gradient of the parent block.
I haven't found a way to get this to work, but maybe someone has an idea or a tip?
EDIT
Sorry, I should not be precise enough.
Here is a picture of the desired result:
May be you can use CSS3 background-clip. write like this:
HTML
<p>T</p>
CSS
p{
font-size:50px;
font-family:impact;
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
position:relative;
width:80px;
height:80px;
text-align:center;
padding-top:10px;
}
p:after{
content:'';
position:absolute;
background:rgba(0,0,0,0.8);
width:80px;
height:80px;
border-radius:100%;
top:0;
left:0;
z-index:-1;
}
body{
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
}
Check this http://jsfiddle.net/rD6wq/6/
Something using an embedded font, such as http://www.google.com/webfonts/specimen/Allerta+Stencil may be close to what you want. By changing the background and text colours, you should get what you are looking for
#element_id {
opacity:0.4;
filter:alpha(opacity=40);
}
this will set the opacity of the div or whatever you apply it too 40% of its original opacity (which is usually 100% unless you apply this to .png or .gif images with reduced opacity already)
As far as I know, you can use SVG for that, but it won't be trivial.
This (and this) might be the closest implementation of what you need. The problem is that it doesn't work the same in every browser, though you may try deeper research.
Upd: Lea Verou has presented a simple and elegant solution in her article: Text masking — The standards way
You can play with the CSS3 text-shadow property.
p{ text-shadow:0px 0px 2px #000 }
See my example here.
Detailed info about the property here.
Related
Here is what I mean:
div {
background-color:rgb(240,160,100);
border-radius:4px;
font-family:arial;
font-size:15px;
width:150px;
text-align:center;
cursor:pointer;
}
div:active {
transform: scale(0.98, 0.95);
}
<div>Click Here!</div>
So when you click the button, depending on the browser, various things happen. Like the dot on the 'i' jumping around or some letters getting smushed together or sometimes the whole text moves by a pixel.
In case of small transforms like that, what happens to the text is disproportionate to what happens to the rest of the element. I think this might be caused by whatever resampling algorithm the browser is using that is designed to be quick and crisp? I'd be ok with slight blurring if there's an option for that.
So, short of transforming all the button text into bitmaps and scaling those, is there any way around these effects?
From what i understood I think you could try adding transition to smoothen the process. Or You can try using svg. if you only wanna scale the font than try changing font-size and add transition to it. I hope this helps
div {
background-color:rgb(240,160,100);
border-radius:4px;
font-family:arial;
font-size:15px;
width:150px;
text-align:center;
cursor:pointer;
transition: all 0.3s ease;
}
div:active {
font-size:14px;
}
<div>Click Here!</div>
Using symbols in SVG formats seems like a good idea to me, so you can only load a single SVG file, and use it as a sort of spritemap.
It feels wrong to me though, to directly include the <svg></svg> tags in my html for icons, since they are presentation only and should be added in my CSS.
Is there a way to add a symbol from an svg in an :after pseudo element in my CSS?
You can refer to fragments in CSS this way (fragments must have an ID to identified):
.element {
background-image: url('vector.svg#fragment');
}
You can also show a specific area by clipping it with viewBox:
.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}
Here you can read more about this methods:
http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
Another method could be to create all your symbols in a icon font.
As Blazemonger mentioned in comment you can give it inside the content of an afterelement.
But if you are setting it as a background of an after you would have more control over it regarding its size,position and any other properties a background image can have
html
<div id = "mydiv"><div>
css
#mydiv{
width:500px;
height:100px;
background:tomato;
}
#mydiv:after{
content:"After of #mydiv";
width:500px;
height:100px;
background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
position:absolute;
top:200px;
border:solid 1px tomato;
}
You can save the svg as a separate file and give it as url for background
DEMO
Read more on ways of adding SVG to page here
possible to use css to have zebra stripe as background without using image?
Yes you can, with something like
ul li {
background-color: #fff;
}
ul li:nth-child(even) {
background-color: #efefef;
}
See:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/understandingnthchildexpressions
Edit
You really should've stated clearly what you meant by zebra strips ;)
If you need gradient backgrounds without using images, see:
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
Basically, the syntax you'll be using will look something like:
background-image: -moz-linear-gradient(left, #fff, #999);
background-image: -webkit-gradient(linear, #fff, #999);
See:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://webkit.org/blog/175/introducing-css-gradients/
For more details
It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css
Base64 Encoding Image
or alternatively using canvas or the svg namespace to draw it yourself
Not really in the context I think you are referring to. You can use CSS3 selectors to target alternating items.
ul li {
background-color:#000;
}
ul li:nth-child(odd) {
background-color:#FFF;
}
Even though you stated no image, the best solution would be to use a 1 pixel wide image with 2 rows that you repeat across x and y axis.
I have a small thumbnail image that I wish to change when the mouse rolls over it. I was wondering if there was a way to do this without swapping images on the rollover. For example, through CSS could I have the opacity change on rollover? If you have any other ideas about how to manipulate the image with CSS on rollover for making a change I am open.
Thanx!
You could put both images in one bigger image, use it as a background image and change only the position on roll-over.
With CSS3, there is an opacity option. This way you wouldn't be forced to reload an image when they hover above something.
#div {
background-image: url('blah.png');
}
#div:hover {
opacity: 0.5;
}
I'm not exactly sure if that's the right way to use it so you should use google for more examples. However, you should be careful because not all browsers might be supporting CSS3 yet.
Try using the :hover style on a tag. It may not be supported very well in early IE editions. But you can do something like:
img {
border: 1px solid black;
}
img:hover {
border: 1px solid white;
}
I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?
Table css
table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
Happens in Chrome and FF, haven't tried IE but I expect the same.
html.....
<td><img alt="Add A job" src="images/add.png"/></td></tr><tr><td>joe bloggs</td>
try adding the following:
a{
background: transparent !important;
}
a img{
background: transparent !important;
}
This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.
If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.
http://entropymine.com/jason/tweakpng/