I was coding a title with a background image with SASS as the code below:
& h1 {
font-size: clamp(24px,8vw,80px);
font-weight: 800;
display: inline-block;
color: transparent;
background-image: linear-gradient(to right, whitesmoke, #BD7F37FF);
background-clip: text;
}
But even though SASS put a lot of -webkit- when it compiles the code, I saw that it didn't handle the background-clip with:
-webkit-background-clip: text;
Do you know why it didn't handle background-clip?
And do you think that it is best to use an online autoprefixer?
Related
I am pretty new to programming and I imported a code snippet to my CSS to get a hovering effect over links. When I am pushing the code through W3C CSS Validator I get a single error which is from this imported code.
I do not understand what I can do to remove the error, because the hovering effect works perfectly.
Can anyone help me? Would be greatly appreciated!
The error:
Value Error : background 100% is not a color-stop value )
Code:
:root {
--mainColor: #ffc7c7;
}
.details-schedule {
align-items: center;
display: flex;
font-family: 'Libre Franklin', sans-serif;
font-size: 16px;
justify-content: center;
}
.details-schedule a {
background:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #000;
text-decoration: none;
transition: background-size .6s;
}
.details-schedule a:hover {
background-size: 4px 50px;
}
It seems that this is a quirk, well a bug, of the W3C CSS validator. Any value, e.g. 2%, produces the same error.
If you replace the second var(—mainColor) with an actual color, like blue, or with the hex value of —mainColor then the validator is happy so if passing validation is important to your project then perhaps do that for now.
Incidentally, the validator can’t cope with a color like rgba(0,0,0,1) either so it seems to be it has a problem parsing the brackets.
I know this is a simple thing, but I've tried everything (including googling and even hiring another programmer for an hour) and can't seem to make this work. The theme I'm working with has a specific color on the wordpress search box submit button, and I just need to change the color.
Looking at it with google development tools, the css looks like this:
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
screenshot of style from google dev tools
What I'd like to do is just turn off the background-image attributes with the gradient and have the background color just be red. I've tried using the above selector, and then tried the selector: .search-button sBn, and put the code into the additional CSS field for theme. Nothing's working. Thanks for any help
As you have identified, the linear gradient set in background-image is overriding the background-color style. To reset the background-image to allow the background-color property be used instead, do the following:
background-image: none;
This will then reset the background colour to the background-color set in the theme css (i.e. #ffa025).
Now to change the color, you can set the background-color to whatever you want, e.g.
background-color: #ffa025;
You could also just use the background property, but that could have knock-on effects for other rules you have set up, so I'd suggest overriding the existing properties.
Working snippet:
/* THEME CSS */
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
/* YOUR CSS TO OVERRIDE THEME */
.search-button, .submit_btn {
/* remove the gradient */
background-image: none;
/* change the background colour to red */
background-color: #ff0000;
}
<button type="submit" class="search-button">Search</button>
Finally, don't forget to make sure that either your custom CSS is loaded after the theme CSS, or it uses a more specific selector than the theme CSS e.g.
.search-button.sBn {background-color: #ffa025;}
(FYI, what you are trying to do is quite trivial so I'd be very concerned about the programmer you hired - this should have taken them no more than a couple of minutes)
It is possible to add gradient border to a text without SVG in CSS/Sass?
Thanks :)
This is a way to do it, you realize that it works with webkit and that kills the compatibility with browsers that are not modern.
body { padding: 50px; }
h1 {
font: 100px sans-serif;
font-weight: bold;
/* Warning: no fallback */
background: -webkit-linear-gradient(top, red, blue);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
color: white; /* same as background */
}
<h1>CSS</h1>
I'd like to have gradient'd text. This place says the following:
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I don't want to show the background part to browsers that do not support *-background-clip: text nor color: transparent;.
Is there any way to do this, short of PHP?
Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.
This should work:
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
text-shadow is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.
I found this
http://jsfiddle.net/NeqCC/
It supports white background and dark text
All credit goes to the creator
HTML
<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos
Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)
Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>
CSS
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10,60,150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
What you really need for that particular effect is inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed."
You can use the text-shadow style to set a shadow for the top left corner. It will look close to what you are looking for, but as far as I know there is no way to do exactly what you are looking for in CSS/CSS3
Yes you can achieve this effect with CSS and text, but it's a little insane. Basically you create a bunch of grey-zero css3 radial and linear gradients with a zero opacity and carefully position them over your text. But you'd be better off doing this in photoshop.
A slightly softer way of using the pseudo-elements Web_Designer mentioned:
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:after {
text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
content: attr(title);
padding: 50px;
color: transparent;
position: absolute;
top: 1px;
left: 1px;
}
It's a bit simpler - to get the soft rim of the depression you use the text-shadow of the :after pseudo and make it transparent, rather than using two pseudos. To my mind, it looks a lot cleaner too - it can work at much greater sizes. I've no idea how fast it is, though you'll probably be using text-shadow sparingly anyway.