I'm working on a text editor with a custom spell checker. It adds a css class around misspelled words to show a red zigzag under the word.
I also use a class to style selections in the editor with a custom background color.
.spell-error {
background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw==");
background-position: bottom;
background-repeat: repeat-x;
}
::selection {
background-color: #99def7;
}
::-moz-selection {
background-color: #99def7;
}
<p>There is a <span class="spell-error">misstake</span> in this sentence</p>
The issue is when I highlight over a word with .spell-error the red zigzag disappears. I've tried creating a .spell-error::selection class but the issue persists. How can I make both classes appear at the same time?
The background-image will have a white background which overlays the background colour.You need to have a specific background-image for the .spell-error::selection, which has the correct background colour in the actual image.
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.
Essentially the footer on many pages of my websites, is 3 buttons. In style.css I've styled them with a background svg. This is problematic because I have multiple images at the top paused by class="lazyload" using <script src="../lazysizes.min.js" async=""></script>, so the browser is now prioritising loading 3 unimportant SVG images at the very bottom.
.button {
background-repeat: no-repeat;background-position: center;background-size: contain}
.button{background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, silver, darkgrey)}
.button:hover {background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, #648DA2, #215c7a)}
I want to inline the svg code in style.css however you can see I use each svg twice, I use it again for the button:hover state. I don't want to bloat out my styles.css with duplicate svg code. Further I read that svgs aren't cached, so whenever the users goes to a new page it loads them again, and it may even load the svgs twice if the user hovers on any page - Good Lord!
I've tried Google, it has information on <use xlink=""/> but that's if you want to reuse an svg in the HTML body, there doesn't appear to be a way to inline SVG for reuse within style.css, or is there?
Thanks to G-Cyrillus comment on css vars I used this:
.buttonLeft{
background-repeat: no-repeat;background-position: center;background-size: contain;
--gem: url("data:image/svg+xml;base64,.....BLOB....");
background-image:var(--gem), linear-gradient(to bottom right, silver, darkgrey)}
.buttonLeft:hover {background-image:var(--gem), linear-gradient(to bottom right, #648DA2, #215c7a)}
It switches the background gradient on a button on hover, but doesn't bloat up the CSS with another background images for the hover state. PERFECT!
(from earlier comment)
You may use the css var() function to avoid repeating the same value and shorten the code .
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
https://developer.mozilla.org/en-US/docs/Web/CSS/var()
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
example for a background :
html {
--svg: url(https://upload.wikimedia.org/wikipedia/commons/d/db/Green_circle.svg) no-repeat center;
background: var(--svg) / 50%;
filter : drop-shadow(0 0 5px);
}
body {
margin: 0;
height: 100vh;
background: var(--svg) / 25%;
}
p {
background: var(--svg) / 60%;
padding: 6em 3em;
width:max-content
}
<p>
some more bg here
</p>
I'm actually building a website in nuxt.js using Vuetify. I have created a menu based on one v-overflow-btn, one v-text-field and one v-btn.
Here is what my menu looks like actually.
Cause I'm a little bit maniac, I would like to change the bottom border color of my v-overflow-btn to match all the different dividers color bar of my menu. By default, the color is black.
I already tried to define my own CSS in the style section as below:
<style>
v-overflow-btn {
border-color:grey !important;
}
</style>
But nothing changes...
Could someone behelp me to change this border color? Thanks in advance :)
Try this
<style>
.v-overflow-btn .v-input__slot::before {
border-color: grey !important;
}
</style>
I had to add the deep selector in case someone else is having this issue.
.nbb >>> .v-input__slot:before {
border-color: white !important;
}
I'm trying to remove the gradient background color of the caption on my Vaadin panel.
My custom theme extends Valo and I want a flat background (for the CAPTION) and a white font. I've tried the following but it doesn't work.
.v-panel-caption {
background-color: #157FCC;
color: #FFFFFF;
}
On my panel, the font is white like I want but the background is still the grey gradient background.
How do I remove that gradient? Thanks!
CSS background gradient works similarly to background image, to reset that you'll need to set background: none #color;.
Example:
.v-panel-caption {
background: none #157FCC;
color: #FFFFFF;
}
gradient is the same thing as an image
.v-panel-caption {
background-image: none;
}
I'm currently using a content management system that is automatically stripping any style="color:white;" inline css, but I need to change the font color of a certain element to white. Is there any trick I can use that can make it appear as if the font is white, without using color:white? (note the white here could have been #fff, rgb(0,0,0) ect)
Note:
I cannot define a css class because <style> tags are deleted completely, and any inline color definition is changed to "color: ;". I was hoping for a solution where I can use something like webkit stroke to make something with black font appear white, or something tricky like that
color: #ffffff; is the hex of white, also if they check against that try color: rgb(0, 0, 0); or rgba(0,0,0,1);
or better yet use CSS classes:
HTML
<div class="white"></div>
CSS
.white {
color: #ffffff;
}
If the CMS actually removes a style attribute (though this may be a misinterpretation), then set class=white on the element and add the following CSS code to an external style sheet being used or in a style element:
.white { color: white }
If this is not possible, then use font markup, e.g. instead of <span style="color:white;">foo</span> use
<span color=white>foo</font>