Let's say I have an image like this:
I would like to display transparent letters and fill everything to look something like this:
UPDATE: I would like to display a text with an image one it, that would look like this:
How can I accomplish that using CSS? Thank you in advance!
Use css background-clip property.
Example code:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url('https://i.stack.imgur.com/QqRWG.jpg') no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 200px;
}
<h1>404</h1>
Hope it helps !
you should experiment with css "mix-blend-mode"
In your case css will look like:
background-color: #fff;
color: #000;
mix-blend-mode: screen;
You can check the demo:
body{
background: url('https://i.stack.imgur.com/QqRWG.jpg')
}
p{
background-color: #fff;
color: #000;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: arial;
font-size: 10em;
margin: 0;
line-height: 100vh;
text-align: center;
}
<p>404</p>
CSS has background-clip for this kind of styling:
text
The background is painted within (clipped to) the foreground text.
background-clip among flex and calc can do a simple 404 error page:
h1 {
background:url(https://i.stack.imgur.com/QqRWG.jpg) center;
color:transparent;
background-clip:text;
/* makup for a basic 404 page */
font-size:calc(15vh + 15vw);
display:flex;
height:100vh;
align-items:center;
justify-content:center;
}
* {
margin:0;
}
<h1>404</h1>
Related
Is it possible to create a fancy text in HTML with the help of CSS only?
I am putting a link where you can see a better example of fancy text. https://www.ultimatebeaver.com/modules/fancy-text/
This is one neat CSS style that forces a background image to show through letters on the page.
You can simply put any background in the .knockout class in css given in fiddle, also set different font and style as required.
See the fiddle
.knockout {
background: url(https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
<div class="knockout">gaurav</div>
How can I add an underline to an inline-element in CSS, that is (1.) "stylable" and (2.) at the baseline (unlike solutions using only border-bottom or box-shadow)?
This is for a responsive layout, so the underline has to be able to reach over multiple lines. Also, it cannot displace any other (not underlines) text that might be inline with the link.
This is a mock-up to demonstrate the desired effect.
Thanks in advance!
I think you'd want to use a pseudo element to style your underline. I threw a simple animation too on hover to showcase its flexibility.
h1 {
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
background: aqua;
height: 2px;
width: 200px;
transition: width 0.3s;
}
h1:hover::before {
width: 300px;
}
<h1>This is a styleable baseline</h1>
I don't know why you aren't able to use border-bottom but try this:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br>
<a><span style="border-bottom: blue solid 3px;">LINK OVER
<br>MULTIPLE</span> LINES</a><br><br>
<a><span style="text-decoration: underline; text-decoration-color:
blue;">LINK OVER<br>MULTIPLE </span> LINES</a>
</body>
</html>
For everyone interested, this is the solution I came up with. It only works on a solid background.
background: linear-gradient(white, white), linear-gradient(blue, blue);
background-position: 0px calc(1em + 5px), 0px 1em;
background-repeat: repeat-x;
color: black;
background-color: white;
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I have the following HTML code which simply shows an image with a transparent black overlay containing text.
I don't wan't my text to be transparent. I tried with z-index, but my text is still transparent:
What's wrong with my code?
This is my HTML:
<div class="leftContainer">
<div class = "promo">
<img src="images/soon.png" width="415" height="200" alt="soon event" />
<div class="hilight">
<h2>Hockey</h2>
<p>Sample text</p>
</div>
</div>
...
</div>
and this is my css:
.hilight h2{
font-family: Helvetica, Verdana;
color: #FFF;
z-index: 200;
}
.promo {
position: relative;
}
.promo img {
z-index: 1;
}
.hilight {
background-color: #000;
position: absolute;
height: 85px;
width: 415px;
opacity: 0.65;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.
.hilight {
background-color: rgba(0,0,0,0.65);
position: absolute;
height: 85px;
width: 415px;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
You need to set the opacity to the background only, not the entire div and it's contents. You can do this with rgba color selection eg
div {
background: rgba(0,0,0,0.50);
}
The other way of doing it would be to use a semi-transparent png image with some background-position. This would then be multibrowser compatible
For cross browser support use transparent 1x1 pixel png image to do this.
You can generate the image on this site: http://www.1x1px.me/
Then just remove background-color and opacity and simply use background:url(bg.png);
jsFiddle Live Demo
Everything inside will have the opacity of 0.65. Move the text outside the overlay div.