I want to add an image inside the text
so in the section, I add the "heading element" and edit its color to transparent then
add an image inside the "heading element" background from the advance tab and also edit
CSS snippet
selector .elementor-widget-container{
-webkit-background-clip:text;
background-clip: text;
}
but not working, the text didn't appear
I even tried using HTML&CSS code but not working, cleans up the whole section & redo but not working
You can use the background-clip property to achieve what I believe you are going for. Browser support is pretty decent. Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
EDIT: I see you tried that. You need to have a background property on the same element that you clip.
p {
margin: 1em 0;
padding: 1.4em;
background: url(https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
font: 900 2.2em sans-serif;
text-decoration: underline;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
<p class="text">THE IMAGE SHOULD SHOW CLIPPED BY THE TEXT</p>
I want to make my font have a vertical color gradient without using Javascript, such as this one.
Text to be applied:
<p>
aaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbb<br>
cccccccccccccccc<br>
</p>
After some research, I have:
[data-component="text-box"] p {
font-size:20px;
font-weight:700;
background-image:-webkit-linear-gradient(bottom,#9E9F9E,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
However, as I applied the style on <p>, the color gradient effect is applied on the whole paragraph, instead of single characters/lines. (screenshot)
Is there any way to make it apply on single characters/lines, for each of them to have vertical color-gradient? (example)
Edit: Applying on either single character or single line will be fine, since I want vertical gradient. Vertical gradient for chars/lines are the same.
Here is the solution of the effect you want:
HTML
<p class="text-gradient">
TaihouKai
</p>
CSS
.text-gradient {
font-size: 20px;
font-weight: 700;
background-image: linear-gradient(to bottom, #9E9F9E, #ffffff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Explanation of background-clip CSS property (from MDN):
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
This property allows the background gradient, image or colour to be "cast" onto the characters themselves.
JS Fiddle Demo
UPDATE If you want to deal with multiple lines which are separated with line break <br />, you can use JavaScript to achieve:
revised JSFiddle demo
The most important part of your CSS gradient text is the actual CSS itself. Check out the basic form of the CSS.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
You can pick any html DOM element and use color gradient font.
I'm not really sure why my italic text has a black bg, but p { } is not getting it done and Google just tells me how to make italic text. full css // full html *Edit: You'll see I had to specify background-color for the headers, or they would have #000; bg's as well.
screenshot
The reason you have black background for all the elements even when you don’t specify anything is
{
background-color: #000;
color: #C3CCD3;
font-family: 'Roboto', sans-serif;
box-sizing: border-box; }
Essentially this means that any element in the HTML should have the above properties.
Also remove any #0b0b0b background color from your css. Since this too is almost like black color.
Making text is possible using the tag. And the css should then be written for it as
i {
background-color: red; }
Your question isn't clair at all please provide html with your css not just a screenshot.
All I can see is the * { background-color: #000;} the * stands for Select all elements. So you are basically making eveything with black background.
Also : p { background-color: #0b0b0b; you are making your p elements with black backgrounds since #0b0b0b is also black.
Is it possible to make dotted text with css?
I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having the user to download a whole font might be overdoing it.
The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background.
Some thing like this:
<div class="dottedText">Some dotted text</div>
FIDDLE
CSS
.dottedText:after
{
content: '';
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%),
radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size:4px 4px;
}
I think I might be close, but the above solution won't work properly if you change the font-size.
I'm looking for a solution where
1) The dots will increase in size as font-size increase, and
2) preferably each letter should only be shown with only one single line of dots - not the double line as it is now.
Edit: When I say one single line of dots - I mean that each stroke should be made up of only one dot. For example: In the above picture notice that the 'm' char has 2 columns of dots....well I would prefer only one.
Ideally something like this (taken from here):
(I'm not sure, but possibly the radial gradient needs to be tweaked to do this)
Edit:
1) I don't mind which font is used - so long as it's a built-in font. (Even a monospace font is ok)
2) The solution need not work in every browser. (So a webkit only solution will be fine)
To be honest, this answer may sound funny or weird, but am not sure whether its possible with CSS ONLY (As you haven't tagged any other languages), even if its, it would be an overkill to do so, and hence it makes sense in using a dotted font instead of writing too many lines of CSS.
Even if you rule out IE, you will have only single .woff file which I think is very much normal, as it will increase your http request by one, and surely it won't be over bloated much as you think.
List of cool dotted fonts can be found over here. Convert the ttf,using Font Squirrel Service.
Make sure you have permission to do so.
Demo Fonts used : Dotline
(Files are hosted on my own server, enabled CORS because the demo failed on Firefox)
If you are not looking to support crappy IE, only file you will need is woff and that's merely 23kb
Even if it relies on SVG inline styles , here's what I came with:
<svg xmlns="http://www.w3.org/2000/svg"
width="1450px" height="300px" viewBox="0 0 800 300">
<text x="2" y="155"
font-family="'Lucida Grande', sans-serif"
font-size="222"
stroke="red"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="5,5"
fill="none">
Some dotted text
</text>
although for some reasons the stroke-linecap isn't working..
If you want to play with a working fiddle check this .
EDIT-1 (moving svg-styles to CSS)
svg{
width:1450px;
height:300;
viewBox:0 0 1500 300;
}
text{
font-family:'Lucida Grande', sans-serif;
font-size:152px;
stroke:#000ece;
stroke-width:3px;
stroke-linecap:round;
stroke-dasharray:1,1;
fill:none;
}
<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">
<text x="2" y="155" >
Some dotted text
</text></div>
With a few minor adjustments we can get pretty close:
1) Change font-family to courier new
2) Add a text-shadow with a horizontal and vertical offset on the div
3) Changed units to ems - (like #BDawg suggested)
FIDDLE
div {
font-size: 40px;
font-family: courier new;
position: relative;
text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size: .1em .1em;
}
div + div {
font-size: 60px;
}
div + div + div {
font-size: 80px;
}
div + div + div + div {
font-size: 100px;
}
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
Couldn't you just use the webfont Kit for this font?
http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y
You would simply link your CSS like so for the font-type you would like:
#font-face {
font-family: 'bpdotsbold';
src: url('BPdotsBold-webfont.eot');
src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
url('BPdotsBold-webfont.woff') format('woff'),
url('BPdotsBold-webfont.ttf') format('truetype'),
url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
font-weight: normal;
font-style: normal;
}
Then just link whatever element you would to use this font:
h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}
Just be sure to upload the webfonts' path to your server and update each url('LINKTOFONT') in your CSS.
There were several other Dot like fonts that font-squirrel has to offer:
http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y
Change the background-size to use ems.
For example:
background-size: 0.1em 0.1em;
NOTE: The above change sizes your first example with the font, but does not produce your second example. I would use inline SVG rather than a pure CSS approach if that exact effect is an absolute must. (Or the more obvious approach: change to a dotted font)
Short Answer:
No. Not possible.
tl;dr;
I'm looking for a solution where
1) The dots will increase in size as font-size increase, and
2) preferably each letter should only be shown with only one single
line of dots - not the double line as it is now.
Edit: When I say one single line of dots - I mean that each stroke
should be made up of only one dot. For example: In the above picture
notice that the 'm' char has 2 columns of dots....well I would prefer
only one.
This cannot be done without a custom font.
There are two inherent problems with other workarounds:
There is no text-fill-pattern in CSS. Not even in SVG. There is text-fill-color in both CSS and SVG. However, it is limited to browser-specific implementation and non-standard vendor-prefixes in CSS. Then there is stroke style. It has the same limitations in CSS (as that of fill) of being non-standard, and also is limited only to width and color. Although, SVG adds stroke-linecap and stroke-dasharray, but that is all there is.
text-outline could have helped. If it worked like a border, then we could have done a text-outline: Npx dotted red;. And increase the Npx to virtually eliminate the text-fill. But, there are other problems with that: (1) The specs says, it will work as shadow i.e. with no style. As in text-outline: 2px 2px #f00;. There is no solid / dotted / dashed style option. (2) W3C says that the feature is at risk and may be cut from the spec. (3) As of now, it is still not implemented by any browser as yet. Ref: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline
The only way left out, is to use a background pattern and then make it clip to the text. This is very much what you have already tried in your question.
The problem with the last approach (background) is that the fonts are not same. Not even similar. The glyphs are different. The ascenders and descenders are different. Even strokes on the same character are different.
This can be understood by this illustration:
If you notice the characters in the above sample (Times New Roman font), while the vertical lines have nearly same width, the horizontal lines (the horizontal bar in "e") are narrower. Further, the serifs are also of differing widths and taper towards the end. When a background with a pattern is applied (any mechanism, image or SVG or radials), it will not line-up neatly with the font lines. Because of whitespaces and proportional fonts have varying distances.
Notice the two ts in the above illustration marked in red. Even though the glyphs are same, but depending on the distance from the origin, the background pattern cannot line-up neatly. Thus while the second t has the dots lined up, the first t does not. The pattern visible is shifted partly and hence white space is prominent. The same pattern-shift occurs randomly across the characters.
Notice the taper of the serifs and that of e, as marked in red circle in the above illustration. In the middle, the font is fatter and accommodates more dots from the pattern (some full, some partial). At the serifs and tapers, it gets narrower and the pattern cannot fit. With curves, the dots in the pattern cannot bend, it is after all a grid pattern.
We cannot reduce or increase the individual dots in the pattern to fit with the fonts. And we cannot shift background to line-up across all characters. When you use mono-space fonts, then the proportional distance problem is mitigated to some extent, but the curves still remain and the pattern cannot be lined-up with that.
So, the background technique for this is inherently flawed. The only solution is to use a custom font.
However, if approximations are good enough for you, then your own technique of radial background works well. At least apart from Firefox, your own technique works across other browsers.
I will also attempt to provide one more similar solution. Combining SVG pattern with the background-image and keeping the background-size in percent may work to some extent on monospace fonts at larger sizes.
Disclaimer: This snippet will work only with webkit based browsers (Chrome / Safari), because other browsers don't seem to support SVG as background-image and also -webkit-background-clip: text; is, well webkit dependent.
Snippet:
.dotted {
padding: 0px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
font-family: sans-serif;
font-weight: 300;
font-size: 32px; background-size: 0.9%;
-webkit-font-smoothing: antialiased;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px; }
div:nth-of-type(3) { font-size: 80px; }
<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>
This font looks similar to what you are expecting
http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y
and it has 4 extensions[TTF,EOT,WOFF,SVG) fonts which is supported in all the browsers
hope this will help you
How can I get the Microsoft.AlphaImageLoader to work??
I am trying the following:
.navHeader
{
/*Alpha Loader*/
background-image: none;
background:transparent url('../../../../commondata/sharedimages/summary/NavBox_topMiddle.png');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../commondata/sharedimages/summary/NavBox_topMiddle.png',sizingMethod='scale');
text-align: center;
font-family: Arial, Helvetica, san-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
line-height: 16px;
}
This has no effect on the PNGs (they are not transparent).
I think what you're doing is specifying the background image and then applying the filter over the top of that. You need to NOT specify the background image for IE6, and only apply the filter.
Otherwise you get the background image (without PNG transparency) and then you apply the filter over the top of that - effectively showing two PNGs but only the top one is transparent.
Also, double check your src path for the filter - I believe it works it out differently than CSS url paths (i.e the path is relative to the location of the page, not the CSS file)
I've had so much headache trying to get IE6 PNG support, until I found this: http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's a simple fix, and works well for everything I need. Hopefully it works as well for you!