I have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture.
Can I do this in CSS or do I have to open up Photoshop?
Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)
Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)
Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css
As CSS-Tricks shows in this article, 'image behind text' can be done as such:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat; /* Set the backround image */
-webkit-background-clip: text; /* clip the background to the text inside the tag*/
-webkit-text-fill-color: transparent; /* make the text transparent so
* the background shows through*/
}
But it isn't guaranteed to work on all browsers, so they suggest a few work arounds, like modernizr.
Here's what it looks like when it works:
There is a background-clip: text property in CSS3, although it doesn't work in every browser. See here for more details.
To extend #sgress454's answer. Nowadays, background-clip: text works in Firefox and Edge, but its browser compatibility is still not full. Safari does not and Chrome partially (It is supported with the prefixed version of the property only. According to the WebKit blog, text decorations or shadows are not included in the clipping.). background-clip: text is still what you are looking for:
background-clip: text;
The background is painted within (clipped to) the foreground text.
MDN
Demo:
body {background: black;}
div {
background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
background-clip: text;
color: transparent;
}
<div>This background clips to the text.</div>
Related
I want my input element had different colors for text and for caret.
I'm already found a solution for webkit browsers:
input {
color: black;
-webkit-text-fill-color: red;
}
But still, I wonder how can I make it for other browsers.
Eventually, I want to have transparent text color and black caret, if it matters.
I've encountered some problems regarding the use of an svg. I have the following html and css codes
<i id="iconApp" class="icon_approved icon_lg pull-right"></i>
.icon_approved {
background-color: #fab700;
display: block;
mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
-webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
background: url(../Tick-Solid.svg) no-repeat 50% 50%;
}
The mask does not work on firefox, that's why I added the background property instead and it works the way I wanted it to be. However, the color does not work as expected. Instead of having a color of #fab700, it is instead being interpreted as a background color.
The orange should be the color of the Icon, not a background color.
Additional info:
I can't find a search term to look for this kind of problem but I did find something similar to my problem.
Link : http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Upon looking at the first example, it renders properly on chrome. But if you opened the link on firefox, it appears as boxes (which I assume is background color of the element).
You can't change the colour of the contents of an SVG referenced via background-image. All setting background-color does is set the fallback colour of the background. Which is what you are seeing here.
If you want to change the icon colour, you have to change the SVG file. Or you could inline the SVG in the HTML, It is also possible to do it via an <object> element.
Try
.icon_approved {
fill: #fab700;
}
Here's an example of the image I'm using to give a div on my website a radial gradient 'white glow' effect.
Currently that image is set as the div background - it's about 338KB big and that's unacceptable in web terms. It's incredibly large!
Assuming my div has something like:
.my-div {
background-color: darkblue;
}
Can I apply a radial background to overlay this white color on top of that to achieve a similar effect?
I do not intend to support IE9 and lower, so anything that works on modern browsers and modern mobile browsers is A-OK for my use cases.
Try colorzilla. Here is an example of radial gradient made with CSS3
http://jsfiddle.net/JRUnr/73/
You can create CSS gradients in a simple manner as shown below, if you are designing only for modern browsers.
.block {
width: 400px;
height: 300px;
}
.gradient {
background: rgb(56,68,75);
background: radial-gradient(circle, rgba(56,68,75,1) 0%, rgba(35,43,48,1) 100%);
}
<div class="gradient block"></div>
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.
I'm using the <body> tag as a wrapper for three divs on a site where every single background color is white.
I've set the background color to #fff for the html and body in the css, and the site is rendering correctly in every browser (including IE 6 and 7) except IE8:
I've even tried setting the style for html directly inline like so: <html style="background-color: #fff"> but that doesn't seem to change anything.
Not even sure what might be causing the bug.
The problem is the following property in your CSS:
:focus{
outline:0;
background-color:#f2f3f6;
border-color:#996
}
Apparently, on loading IE8 decides that the html element has focus, whereas other browsers don't do this. Remove the background-color property here and it'll all stay white.
What happens when you insert this code into your HTML?
body div
{
background-color: white !important;
}
Normally, browsers interpret and apply the last line of CSS that they read to an element, so background-color: red; background-color: blue; would result in a blue background color.
!important tell the browser to ignore all other property re-decelerations, so background-color: red !important; background-color: blue; would make the background color red, even though you told it to be blue.
I think background:#FFFFFF; will fix it. It worked for me.
internet explorer support 6digit color code i.e. instead of #fff .. use #ffffff
I hope you may understand this