Menu
I have the color of text and border-bottom in gradient color and not working as expected on:
Safari (Desktop)
iPhone (Safari)
Screenshots:
CSS code written with styled components:
export const Tabs = styled.ul`
display: flex;
width: 100%;
margin-top: 2em;
`;
export const Tab = styled.li`
display: flex;
${fontStyles[fontSizes.eighteen]};
border-bottom: 3px solid transparent;
background-image: linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
${colors.gradientGreen};
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
cursor: pointer;
outline: none;
`;
export const Span = styled.span`
font-weight: 800;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image-source: ${colors.gradient};
background-image: ${colors.gradientGreen};
`;
Any help / comment / advice is welcome :)
314
try to implement this logic in your code :
https://codepen.io/KnightOfInfinity/pen/jOBQPxz
code:: html -
<html>
<body>
<p>Biometrics</p>
</body>
</html>
css -
/* gradient variable */
:root{
--gradient: linear-gradient(to right, yellow, green);
}
/*
align items to center inside the body
*/
body{
display: flex;
justify-content: center;
align-items:center;
background: #121212;
}
/* real useful code */
/* text */
p{
display:block;
height: contain;
max-width: max-content !important;
font-size: 63px;
font-weight: 900;
background: var(--gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: red;
}
/* underline */
p:after {
content: '\00a0';
background-image:
var(--gradient);
background-size: 100% 12px;
background-repeat: no-repeat;
float:left;
width:100%;
}
Try This :
export const Tab = styled.li`
display: flex;
${fontStyles[fontSizes.eighteen]};
border-bottom: 3px solid transparent;
background-image: -webkit-linear-gradient(rgba(0, 145, 148, 1), rgba(72, 71, 112, 1)),
${colors.gradientGreen};
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px ${colors.offWhite} inset;
cursor: pointer;
outline: none;`;
I added -webkit- before linear-gardient
40
I have faced this problem earlier and done a lot of research and development after that I fond a solution which is really helpful. Please Add all font face locally, download .eot, .woff, .woff2, .ttf and .svg files of your font and add it to your css file for example:
@font-face {
font-family: Gotham_Book;
font-display: swap;
src: url(../Fonts/GothamBook.eot);
src: url(../Fonts/GothamBook.eot?#iefix) format("embedded-opentype"), url(../Fonts/Gotham-Book.woff2) format("woff2"), url(../Fonts/GothamBook.woff) format("woff"), url(../Fonts/GothamBook.ttf) format("truetype"),
url(../Fonts/GothamBook.svg#svgFontName) format("svg");
}
probably the issue isn't connected with the text/border gradient, I guess Tab height is wrong and the text just cropped/hidden
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
