Is it possible to have transparent text on top of a white background with an image behind it, so that the text appears to be the colour of the image behind it.
Here's a JSFiddle of what I started to give you a better understanding of what I mean:
http://jsfiddle.net/g3SfD/
Right now the text is black, but is there a way to make it transparent so that the colour of the text is that of the background image?
HTML:
<div class="image">
<div class="box">
<div class="text">Sample Text</div>
</div>
</div>
CSS:
.text {
color: black;
font-family: Arial;
font-size: 72px;
font-weight: bold;
}
.box {
display: inline-block;
background: white;
padding: 5px 10px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -219px;
margin-top: -47.5px;
}
.image {
background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
width: 960px;
height: 420px;
position: relative;
}
Demo
Ok thanks to this example provided by ralph.m, it seems possible using -webkit-background-clip which would only be supported by browsers that can use webkit.
.text {
font-family: Arial;
font-size: 72px;
font-weight: bold;
text-align: center;
background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
background-position: -200px -50px;
}
Your background size and position may need tweaking to suit.
I guess you're looking for the rgba() function.
It takes 4 parameters, 3 colors channels and one alpha that controls the opacity of the color.
Related
I am attempting to get a div, bar-grow to be width: 80%; of the header above it. Right now, it is taking 80% width of the parent container. I am unsure how I change this so that it is working how I want it.
Any suggestions?
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 12px;
display: inline;
}
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 80%;
}
<div class="header-wrap">
<p class="header">Structural Framing Solutions</p>
<div class="bar-grow"></div>
</div>
You need something to wrap both of those elements that isn't a full width element. I added a div and set it to display: inline-block. You could apply that style to the header-wrap div if you don't want an extra div (note it will shrink that div to be just wide enough to contain it's contents).
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 12px;
display: inline;
}
.header-width-constrainer {
display: inline-block;
}
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 80%;
}
<div class="header-wrap">
<div class="header-width-constrainer">
<p class="header">Structural Framing Solutions</p>
<div class="bar-grow"></div>
</div>
</div>
Why not simply move the gradient to the header element and control easily its size:
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 52px;
padding-bottom:7px;
display: inline-block;
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 80% 7px;
background-position:0 100%;
}
<div class="header-wrap">
<p class="header">Structural Framing Solutions</p>
</div>
I don't think there is an easy way to make a div like "bar-grow" 80% width of it's sibling (the text, "Structural Framing Solutions")... Technically, that text is sitting inside of a div that takes up the full width 100% of the screen, so your code is working as intended. An alternate approach, would be something like this:
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 300px;
}
Notice how I changed 80% width to 300px width?
300px, roughly, is 80% of the title's length. I used my eye ball to choose the 300px. Make that small adjustment and see if it can work for you.
With my edit, it could render like this:
Hopefully I am understanding the problem, correctly!
What I am looking to achieve is to display an image with a transparent background layer, this image would sit over a background which would have a white border and gray box centred in the image area.
Basically to give the image a partial gray background, then to leave the rest white, to give the appearance of the image to "float" over the gray background as well as allow me to make simple css changes to change the background verses having to redo the images to change the look.
this is the css I have tried:
.borderlist img {
text-align:center;
vertical-align:middle;
background:
linear-gradient
(255,255,255, 0.9),
url('../images/gray.png') no-repeat;
max-width: 100%;
height:auto;
}
And the html:
<span class="borderlist"><img src="images/bounty.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY
I removed the underline from the <a> because it creates a weird underline on the <br>. If you want the text to be underlined, you could throw it in a <span> with a class that tells it to have it. but this is what I got. Let me know if you're needing it to do something different.
.overflowing-img {
display: inline-block;
text-align: center;
text-decoration: none;
}
.undrline {
text-decoration: underline;
}
.borderlist {
text-align: center;
}
.borderlist img {
text-align:center;
vertical-align:middle;
background-image: linear-gradient(rgba(160,160,160, 0.5), rgba(160,160,160, 0.5));
background-repeat: no-repeat;
background-size: 80% auto;
background-position: center center;
}
<a href="http://www.domain.com/bounty.html" class="overflowing-img">
<span class="borderlist">
<img src="http://pngimg.com/upload/gift_PNG5950.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155">
</span>
<br>
<span class="undrline">BOUNTY<span>
</a>
I used a different image, but is this what you are attempting to achieve?
.borderlist img {
width: 200;
height: 100;
}
.borderlist {
width: 225px;
height: 125px;
text-align: center;
vertical-align: middle;
background: linear-gradient(to bottom, #c8c8c8, #ffffff);
margin: auto;
}
.whiteBorder {
width: 255px;
height: 155px;
background-color: #ffffff;
text-align: center;
}
<div class="whiteBorder">
<div class="borderlist">
<a href="http://www.domain.com/bounty.html">
<img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png" alt="BOUNTY" title="BOUNTY">
<br>BOUNTY</a>
</div>
</div>
Try doing using :before in your css to overlay the image on top of a div.
div{
width: 200px; height: 200px;
background-color: lightgray;
box-sizing: border-box;
border: 20px solid white;
position: relative;
}
div:before{
content: "";
display: block;
margin: -20px;
width: 200px;
height: 200px;
background-image: url('https://i.stack.imgur.com/eLzG5.png');
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
Lets go very simple first:
You can't move the image to left by changing css though
.borderlist {
background: grey;
border: 60px solid white;
box-sizing: border-box;
width: 260px;
}
<div class="borderlist">
<img src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>
You can do this too, create a container div, inside, create the grey div, then float the image above the grey div, like this (I think this is the best):
.borderlist {
padding: 5%;
background: white;
width: 160px;
height: 120px;
position: relative;
}
.grey {
position: absolute;
background: grey;
width: 130px;
height: 90px;
margin: 10px;
}
.float {
position: absolute;
}
<div class="borderlist">
<div class="grey">
</div>
<img class="float" src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>
Feel free to change and play around to understand it properly
If you're OK with using a mask (white colored background covering the edges), you could use multiple backgrounds coupled with a background color. (credit to user Dave Cripps for the demo image that I shamelessly stole from his demo for mine.)
a {
text-align:center;
display:inline-block;
}
.borderlist {
display:inline-block;
text-align:center;
vertical-align:middle;
background:
linear-gradient(to right, white 15%, transparent 15%, transparent 85%, white 85%), linear-gradient(to bottom, white 15%, transparent 15%, transparent 85%, white 85%);
background-color: #eee;
transition: background-color 0.4s;
}
a:hover .borderlist {
background-color: #5C5;
}
.borderlist img {
height:auto;
}
<span class="borderlist"><img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png " alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY
Currently i have a lot of back buttons on my page:
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
I need to add icon to it to look something like this:
First how do I add icon above text and aligne them centrally.
And second is it possible to do it using only CSS. ( if not with only a minor modifications to HTML )
Thx in advance.
I need to add icon to it to look something like this:
First how do I add icon above text and align them centrally.
You should use button element for that. It exists for this very purpose (custom styling and markup). However, you need not to use a background-image for that. To be able to control everything via CSS, just make sure you have same markup for all the buttons you have and then control using classes.
For example:
Markup:
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
CSS:
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
Use the after psuedo-element on i (or span whatever) and depending on the class use the content property to insert your icon as text (glyph) which you can style as you want.
And second is it possible to do it using only CSS. ( if not with only
a minor modifications to HTML )
This is very much possible, but cumbersome. I would not recommend this method, it is not worth the effort. You have been warned.
To use the existing input as-is without any change in the markup, you need to style the input itself and will have to use a background-image (in fact two background images). The input styling has a problem, that it loses its platform style as soon as you tinker with its style. So, you will lose the button like behaviour and Windows like button gradient and effects. You will have to replicate all that functionality via CSS.
For example:
Markup:
<input type="button" value="Cancel" data-value="Cancel" />
CSS:
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
The above code uses first background-image to show the icon, and second background-image to show the gradient (like Windows platform style). It uses padding-top to push the text down and :active state to set the behaviour of inverting the gradient when clicked. :focus state to remove the outline.
All this to mimic the behaviour of a button! It is much better to use button itself.
Here is a combined demo of both the techniques:
Fiddle: http://jsfiddle.net/abhitalks/yw7wmvwh/1/
Snippet:
button {
min-width: 72px; height: auto;
display: inline-block; vertical-align: top;
}
button.ok i::after {
content: '\2713'; display: block;
font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
<button class="ok">
<i></i>
<span>Ok</span>
</button>
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />
just add your class to css file
.backButton{
background: url(https://cdn3.iconfinder.com/data/icons/musthave/24/Delete.png) no-repeat;
background-position:center top;
height: 40px;
width: auto;
text-align: center;
padding:24px 10px 10px 10px;
border: 1px solid #555555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
I hope this will help
HTML
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#rock {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Crystal_button_cancel.svg) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
}
<button id="rock" onClick="choose(1)">Cancle</button>
HTML
<button id="btnCancel" onClick="choose(1)">Cancel</button>
CSS
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#btnCancel {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Crystal_button_cancel.png) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
border-radius : 20px;
}
I have a style that includes both a background and text. I want to align the text in the exact middle of the background.
Currently there is more space below the text than above.
How would I do that?
Check out my jsfiddle: http://jsfiddle.net/vc256tgL/10/
Here's my code:
<p class="form-title white">
Download White Paper</p>
Here's my css:
.form-title {
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.form-title {
vertical-align: middle;
height: 55px;
margin: 0 0 0 0;
background-image: url('http://www.hapadesign.com/assets/img/bkgd_form_top.png');
background-repeat: no-repeat;
}
.white { color: #ffffff !important;}
add these lines to form-title class please
line-height:40px;
text-align:center;
background-position:center;
Demo
UPDATE 1 :
Updated Demo
If you want a little bit more flexibility, you can emulate that style using just CSS:
CSS
.tooltip {
position: relative;
display: inline-block;
padding: 10px 25px;
color: #fff;
background: blue;
}
.tooltip:after {
content: '';
position: absolute;
top: 100%;
right: 0;
left: 0;
width: 0;
height: 0;
margin: 0 auto;
border-width: 10px;
border-style: solid;
border-color: blue transparent transparent;
}
HTML
<p class="tooltip">Here's Some Text</p>
The tooltip arrow is created using a border on an element with no height or width, so it makes the angle you're looking for.
Example: http://codepen.io/a_double/pen/XJjKRg
I need to find a way to view the image behind a div through the text in the div:
E.g.
I have the font as a web font. Is this possible without having to do image replacement?
One of the ways to accomplish your specification using only CSS is to overlap the two background images perfectly thereby creating a "transparent" effect that you've described. Here's a fiddle: http://jsfiddle.net/v780v1Ln/.
Note: paddings and such alter the dimensions of the element and affect the coordinates that must be set for background images.
HTML:
<div id = "wrapper">
<h1><span>DRD</span></h1>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
background: #e2e2e2;
}
#wrapper {
position: absolute;
width: 70%;
height: 50%;
top: 25%;
left: 15%;
background: url(http://i58.tinypic.com/2vdieso.jpg)
no-repeat
0 0/500px 362px;
}
#wrapper > h1 {
background-color: #fff;
text-align: center;
position: absolute;
padding: 0 55px 0 25px;
top: 25px;
left: 25px;
}
#wrapper > h1 > span {
font: bold 70px/1 Sans-Serif;
text-transform: uppercase;
background: url(http://i58.tinypic.com/2vdieso.jpg)
no-repeat
-45px -25px/500px 362px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
this worked for me and my project. by stacking the images on top of each other I was essentially able to mirror them even when the position of the box may change
background-image: url("background.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;