I was wondering if it's possible to achieve transparent text inside a container with a solid background color. The transparent text allows you to see the image behind the container.
Something like this
Found this with a google search. The image was created in photoshop. Can this effect be achieved with CSS? If so, how?
Just curious.
I hope this will be what you are looking for
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat;
margin: 10px;
}
h1 {
background-color: #fff;
overflow: hidden;
display: inline-block;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 200px;
}
span {
background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
}
.Container {
text-align: center;
}
</style>
</head>
<body>
<div class="Container">
<h1><span>LOS ANGELES</span></h1>
</div>
</body>
</html>
All you just want to do is setting -webkit-text-fill-color or color to transparent and -webkit-background-clip to text. Simple :)
Another approach is by using clip-path and by using an SVG image as the mask - the SVG image itself can contain text. This has support in WebKit and Gecko but not IE ( http://caniuse.com/#feat=css-masks )
https://css-tricks.com/clipping-masking-css/
Related
I have a button that I was to put on top of my background image, but whenever I put it down it fills the whole screen. Could someone show me how to put it at the top left of the page? https://www.codecademy.com/byteSurfer77914/codebits/cV0Szc/edit
I don't see your button anywhere, but look at a few of my comments in your code and you should get an idea of where to start modifying your code.
<!DOCTYPE html>
<html>
<p> <!--you can't have a p tag in the <head>-->
</p>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body><p2><!--No such thing as a p2 tag-->
</p2>
</body>
</html>
Now your CSS
body {
background-image: url('http://i.ytimg.com/vi/E_gnIn3IBdI/maxresdefault.jpg');
background-repeat: no-repeat;
background-size: cover;
}
//You have multiple body tags. So your css above is being overwritten by this next block. You probably want this to be assigned to an a tag or a button.
body {
display: inline-block;
padding: 8px 13px;
background: #073763 url('http://dabuttonfactory.com/button.png?w=1&h=42&bgt=gradient&bgc=f40808&ebgc=073763') repeat-x;
background: -moz-linear-gradient(#f40808, #073763);
background: -o-linear-gradient(#f40808, #073763);
background: -webkit-linear-gradient(#f40808, #073763);
background: linear-gradient(#f40808, #073763);
border-radius: 8px;
color: #fff;
font: normal 400 26px/1 "Pacifico", cursive;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
Hi am getting invalid property values for css h1 tag. here i want to display image inside h1 tag from css class.
header#header .logo {
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url('../../Style Library/images/logo.png') no-repeat 0 0 transparent;
max-width: 100%;
width: 100%;
height: 62px;
margin-top:-16px;
}
<a href="index.html">
<h1 class="logo">Canara Robeco</h1>
</a>
font: 0/0 a; is not valid. The validator thinks that you are trying to set the font-weight to 0 rather then the font-size and line-height. I haven't figured out exactly why (I suspect the CSS parsing rules are not designed to let you set the font size to 0).
The simplest work around to that would be to switch to using the long form properties instead of the font shorthand property.
The proper solution, since your image is a content image and not a background image, is to change your markup:
<a href="index.html">
<h1 class="logo"><img src="/Style%20Library/images/logo.png" alt="Canara Robeco"></h1>
</a>
Check this out
.logo { //changge
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url('../../Style Library/images/logo.png') no-repeat 0 0 transparent;
max-width: 100%;
width: 100%;
height: 62px;
margin-top:-16px;
}
This can be because of your no-repeat property in the same line of your path of your logo image in your css. Try this:
background-image: url('../images/yourlogo.png');
background-repeat: no-repeat;
source.
I am attempting to have an opacity effect on my div which has a background-image applied, and still keep the text "un-opacified".
My markup:
<div id="projects" class="feature">
Projects
</div>
My CSS:
.feature {
display: inline-block;
margin: 30px;
cursor: pointer;
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
font-family: 'Droid Sans', Helvetica Neue, sans-serif;
font-size: 2em;
color: #fff;
text-align: center;
line-height: 1.2em;
}
.feature:after {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.8);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.feature#projects {
background-image: url('img/hero.png');
}
I thought of using pseudo elements, but to no avail!
Any ideas?
I might use a semi-transparent png for the background image, then style the text accordingly.
You might also want to look into RGBa:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
This applies to background-color, although it may also work on your image (untested, though)
There is sort of a hack for it where you layout the div with the background underneath another div containing the text.
Check out the following link:
http://www.sumobaby.net/news/2011/03/04/change-background-opacity-without-affecting-text/
Also here's a quick working example:
http://jsfiddle.net/7pVGM/
Note: the markup and css isn't that great I just wrote it in like 5 min :)
I want to have a standard method of formatting "Show More" links in my HTML pages.
In HTML I use:
<span class="showMore">Show more details</span>
Then in the css, I have:
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
where add.png is a 16x16 famfamfam silk icon. I use JavaScript to expand some content section using an onclick event.
This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like <span/>. Adding a transparent border fixes the issue in IE7:
.showMore {
border: 1px solid transparent;
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. line-height doesn't work. Anyone know anything that may help?
I've solved the problem. I've no idea why but using no-repeat center left instead of no-repeat top left ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat center left;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
Does
display: block;
height: 16px;
Help fix the height of the span?
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}