I recently added the following code to one of my text elements to add a cool underline to it:
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;
It looks like this on chrome and Android:
live picture here
However, on iOS devices the border completely surrounds the whole text and looks like this:
iOS live picture here
I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.
I hope someone can help with this problem and I appreciate your solutions!
Best regards!
In your border-image-slice, give it precision and it will be ok :)
I've tested it and it works on Safari v 13.1.2
Aurélie
p {
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}
<p>Biscuit cake sweet roll. Carrot cake caramels</p>
Related
I'm trying to achieve exactly this, using chrome on mobile ios device.
It looks perfect on desktop, just not on mobile.
CSS:
html {
background-color: black;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.95)), url("data:image/png;base64,my image b64");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.95)), url("data:image/png;base64,my image b64");
background-attachment: scroll;
background-size: 64px;
image-rendering: pixelated;
font-family: arial;
font-weight: bold;
text-shadow: 0 0 6px #000;
color: white;
}
The image is 16x16px. Here's what it looks like in browser first:
Here's what it looks like on chrome ios mobile:
The upscaling doesn't seem to be working, but also the gradient.
Any help is appreciated, thanks
I ended up adding an absolute positioned div with 100% width and height with z-index -1000 and applied the linear gradient to that. Looks great on firefox, chrome and their mobile counterparts.
For the upscaling I used image-rendering: crisp-edges and pixelated and the -webkit variants for all around support.
Hope that's useful for someone :)
I need to create gradient that will be in the bootom of element and look like this
I have tried like this
.div-with-shadow {
padding-bottom: 1.4285714286rem;
border-bottom: solid 0.0714285714rem rgba(0, 0, 143, 0.05);
box-shadow: inset 0 -3.5714285714rem 3.5714285714rem -3.5714285714rem #e9e9fd;
}
<div class="div-with-shadow"></div>
But it does not look the same, this has to be some kind of gradient and not border, anyone can help me, thanks
Caniuse.com says that Edge has full support for mask-image but the following code is working in all browsers for me except Edge.
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
This should produce a simple red box which is red a the top and transparent at the bottom. Tested in Chrome and Firefox with no problems.
So, is it just incompatible with linear-gradient? I have scoured the web but can't find an answer.
Here is my testing code.
#masked {
width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
<div id="masked"></div>
I've found that if I do not add -webkit-mask-image, when running on Chrome, there will be no transparent at the bottom.
But it always works well on Edge.
My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.
According to Can I Use, mask-image is supported in Edge 18, but is hidden behind a flag in lower versions.
Couple additional things:
If you're doing this on a picture element you need to add it on the img and not the containing picture.
Even in 2022 you still need -webkit-mask-image. Preprocessors should add this though.
If you have been using custom properties such as --theme-color: red make sure you only add a single dash for -webkit and not the double dash my stupid brain automatically entered for me today.
I've added the -webkit-tap-highlight-color: rgba(0, 0, 0, 0); to my CSS on the following website: http://www.aanzet.eu
Still on the iphone the problem occurs with a flashing pink color when I click on links.
Have search StackExchange but didn't find a solution for my problem. Could somebody help me please?
try both selectors:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.
The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.
.dark {
color:rgba(0, 0, 0, .6);
text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
color:rgba(200, 200, 200, 1);
text-shadow:2px 2px rgba(0, 0, 0, .2);
}
fiddle
Found an answer on IRC fiddle
the light is hitting from the top left so it looks darker where the tl z axis would be
You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.
I prefer just doing this for your light style:
text-shadow:1px -1px rgba(0, 0, 0, .2);
Position the dark text shadow on the opposite side of the light text shadow:
text-shadow: -2px -2px rgba(0, 0, 0, .2);