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>
Related
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.
The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is
.
I'm not sure how that gets that Tx symbol on the button, but there it is.
Thanks for any help.
In skin.min.css change
.mce-i-removeformat:before {
content: "\e01d";
}
to something like
.mce-i-removeformat:before {
background-image: url("http://i.stack.imgur.com/0rzf2.png");
background-size: 15px 15px;
background-repeat: no-repeat;
}
You can probably remove the background-size and background-repeat if you make your image the right size
If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon
These icons come from the tinymce font. for me in the tinymce source i have the fonts at
tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc
If you added your own font file withyour own icon it should allow you to change the icon
If you inspect the css you'll notice there are two parts that control the icons being used
On the ::before inside the tag
.mce-i-italic:before {
content: "\e02b";
}
on the i tag itself
.mce-ico {
font-family: tinymce, Arial
}
both comefrom skin.min.css
What do you say that instead of new image you use :after pseudo element and remove :before one.
This is how it would look
https://jsfiddle.net/nj6yn4bq/4/
And the code
<button><i></i></button>
i:before { display: none; }
i:after {
content: 'FMT';
text-decoration: line-through;
font-style: initial;
font-size: 15px;
}
button {
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
I've created (copied and edited from online tool) a little box with a text here on the botton right corner
I would like to change also the color of the text in the box. But there's the command a:link, a:visited.
How could I bypass these commands and giving the color I would like to to the text, maintaining the link?
Thanks
Pseudo-selectors as a:link and a:hover (and many more) change the default behavior of the browser. You may omit them, but I'm pretty sure you don't want to.
a:link sets style of the anchor so it is not the default blue underlined.
a:hover sets style of the anchor when you move your mouse over the link.
Use search engine of your choice to learn more, try 'css pseudo selector'
Read the code, the color settings are all there:
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #28A26B;
border-radius: 8px;
background: transparent
linear-gradient(to bottom, #FFF, #FFF)
repeat scroll 0% 0%;
// this is what you're probably
// looking for - the color of the button body.
// It's set to transparent.
font: bold 20px arial;
color: #28A26B; // Color of the content
text-decoration: none;
}
.button:hover, .button:focus {
// these pseudo classes just make the js events onmouseover
// and onclick obsolete...
color: #28A26B;
text-decoration: none;
}
Set background to the color of your choice, remove the gradient part and you're done. Do NOT copy blindly.
After rule on line 77 of styles.css file put this one:
#call-to-action a:link, #call-to-action a:visited {
color:yellow ;
}
I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.
Sample markup:
<a>Hello, <span>fooooo</span> bar</a>
Styles:
a {
font-weight: bold;
text-decoration: underline;
}
span {
font-weight: normal;
}
(right click on image and select view/open in new tab to get a better view)
In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?
Fiddle: http://jsfiddle.net/FfBGn/
Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:
border-bottom:1px solid #000;
demo
Alternatively, if you have to use text-decoration:underline,
you could just make bold bolder.
font-weight:800;
demo
Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?
border-bottom: 1px solid #000000;