I'm trying to create a text gradient in WordPress (I'm using SiteOrigin pagebuilder), but it doesn't work in Edge or Safari; the text has no color in either browser.
I've tried these suggestions:
CSS3 Text Gradients not working?
Gradient not working in Safari
But both solutions just gave me a linear background gradient, not a text gradient.
Here's the code I'm currently using:
<style>
.flip-up {
/*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
The text animations have been tested on their own (I'm using the Scroll Triggered Animations plugin); they work just fine in every major browser, so I know that's not the problem. My website is https://douxdolci.com/ (headers like "Affordable and Effective" are the problem). Any help would be appreciated!
Also: If there's no way to accomplish this, is there a way to use solid-color text in just Edge and Safari, but a gradient in all other browsers?
What you have to do is display: block; the element(s) containing the text you want color-gradiented.
Be aware that this means that you may now have to vertically center text with the line-height attribute and align text horizontally with text-align . . .
Safari and Edge need it this way - don't go figure, just go do it !
The logotype in this pen shows a simple example.
Please advise if it breaks in Safari - I shudder to imagine how Lambda Test may render it.
HTML
<body>
<header>
<div class="logodiv">
<div class="logo">
<img src='https://images.unsplash.com/photo-1593003520833-5c874a3cef28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='My Logo'/>
</div>
<div class="logotext">
<div class="logotext1">Coca-Cola</div>
<div class="logotext2">The Real Thing</div>
</div>
</div>
<nav>
<ul class="navbar">
<li id="redlink" onclick="PAGE.switchPage('redlink')" class="link on">
RED
</li>
<li id="whitelink" onclick="PAGE.switchPage('whitelink')" class="link">
WHITE
</li>
<li id="bluelink" onclick="PAGE.switchPage('bluelink')" class="link">
BLUE
</li>
</ul>
</nav>
</header>
<article>
<section id="redpage" class="redpage band">
THIS IS RED PAGE FULL OF STUFF
</section>
<section id="whitepage" class="whitepage band hidden">
THIS IS WHITE PAGE FULL OF STUFF
</section>
<section id="bluepage" class="bluepage band hidden">
THIS IS BLUE PAGE FULL OF STUFF
</section>
</article>
<footer>
<div class="foot-cont">Oh . . . What An Awful Footer !
</div>
</footer>
</body>
CSS
html {
writing-mode: horizontal-tb;
box-sizing: border-box; /* Keeps borders inside the element bounds. */
font-size: 62.5%; /* Allows 1 rem = 10px in child and nested elements */
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
text-align: center;
margin: 0 auto;
height: auto;
font-family: Open Sans, sans-serif;
font-size: 1.4rem;
color: #000;
background-color: orange;
}
header{
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
width: 95%;
height: 150px;
font-weight: bold;
text-align: left;
}
.logodiv {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
width: 45%;
height: auto;
}
.logo {
width: 30%;
height: auto;
}
.logo img {
width: 70%;
height: 100px;
}
.logotext {
display: flex;
flex-flow: row wrap;
justify-cintent: center;
align-content: center;
align-items: center;
width: 70%;
height: auto;
font-size: 5.0rem;
}
.logotext1 {
display: block; /* VITAL for Safari & Edge */
width: 100%;
height: 80px;
line-height: 1.0;
font: Lora;
color: red;
background-image: -webkit-linear-gradient(45deg, purple, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logotext2 {
display: block; /* VITAL for Safari/Edge */
width: 100%;
height: 35px;
line-height: 1.0;
font-size: 3.0rem;
font-style: italic;
letter-spacing: 0.3rem;
background-image: -webkit-linear-gradient(45deg, #111B61, #C8A2C8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav{
display: block;
width: 55%;
}
.navbar{
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;
align-content: center;
width: 100%;
height: 40px;
list-style-type: none;
text-align: justify;
font-size: 14px;
margin: 0;
padding: 0;
font-weight: bold;
color: #FFFFFF;
}
nav li {
position: relative;
width: auto;
height: 40px;
margin-left: 15%;
cursor: pointer;
}
nav li::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
content: '';
height: 2px;
width: 0;
background-color: #00FFFF;
opacity: 1;
transition: height 1300ms, opacity 1300ms, width 1300ms;
}
nav li:not(.on):hover::after {
width: 100%;
height: 2px;
opacity: 1;
}
.on::after {
text-decoration: none !important;
cursor: none;
}
.on::after{
width: 100%;
height: 2px;
opacity: 1;
}
.on {
cursor: none;
pointer-effects: none;
}
article{
width: 95%;
margin: 0 auto;
}
.band{
height: 800px;
font-weight: 600;
font-size: 4rem;
color: gold;
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.hidden{
display: none;
}
.redpage{
background-color: #FF0000;
}
.whitepage{
background-color: #FFFFFF;
}
.bluepage{
background-color: #0000FF;
}
footer{
margin: 0 auto;
width: 95%;
text-align: center;
height: auto;
background: #000;
}
.foot-cont{
height: 100px;
font-size: 1.4rem;
font-style: italic;
color: #FFF;
display: flex; /* Important here, heh-heh */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
JS
const PAGE = ( () =>
{
const switchPage = (pagelink) =>
{
const onLink = document.getElementsByClassName("on")[0]; // Find current nav link element
const oldPageId = (onLink.id).substring(0, // Get id of corresponding page ...
(onLink.id).length - 4) + "page"; // ... by replace "link" with "page"
const newPageLink = document.getElementById(pagelink); // Find new nav link, i.e. link clicked on
const newPageId = (newPageLink.id).substring(0,
(newPageLink.id).length - 4) + "page"; // Deduce id of corresponding page
if (oldPageId != newPageId) // Only reload when clicking on different page
{
onLink.classList.remove("on"); // Remove active status from old nav link
newPageLink.classList.add("on"); // Show new nav link as active page
document.getElementById(oldPageId).classList.add("hidden"); // Hide old page content
document.getElementById(newPageId).classList.remove("hidden"); // Display current page content
}
}
return { switchPage: switchPage };
}) ();
flex or inline-flex are the problems.
Text gradient is not working when you are using flex elements.
Instead: using block or inline-block.
Sorry, I am using TailwindCSS for a long time.
Related
I am trying to fix an svg icon in the bottom right corner of my hero banner (using flexbox). I am struggling to pin it into the correct position and also need to be able to adjust its position relative to the text and button (its a responsive website and I need to adjust based on screen size). I tried to adjust with the css margin property (left and right), but it does not work well.
.hero {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
padding: 1em;
box-sizing: border-box;
color: #333333;
background: url(https://images.unsplash.com/photo-1500417148159-68083bd7333a) center center no-repeat;
background-size: cover;
}
.hero-title {
max-width: 17em;
margin: 0;
font-size: 8vh;
font-weight: 100;
line-height: .9;
padding-left: 93px;
padding-top: 150px;
text-transform: none;
color: white;
}
.hero-subtitle {
max-width: 23em;
margin: 0;
font-size: 2vh;
font-weight: 100;
line-height: 1.3;
padding-left: 100px;
padding-bottom: 100px;
padding-top: 60px;
color: white;
}
.hero-footer {
display: flex;
margin-bottom: 2.5em;
}
/* button */
.button-primary {
color: red;
background-color: transparent;
padding: 8px 25px;
margin-left: 100px;
margin-bottom: 350px;
text-decoration: none;
border: .1em solid red;
font-size: 12px;
}
.button-primary:hover {
color: #ffffff;
background-color: #333333;
border: .1em solid #ffffff;
}
#iconheader {
display: flex;
flex-direction: column;
align-items: flex-end;
}
#myicon {
text-decoration: none;
font-size: 5vh;
font-weight: bold;
background: url(../images/test_icon.svg) 50% 50% no-repeat;
color: white;
}
<section class="hero">
<header id="header">
</header>
<header class="hero-header">
<h1 class="hero-title">Wonderful Day<br>Amazing Forum<br>Great Friends</h1>
</header>
<header class="hero-header">
<h2 class="hero-subtitle">Stackoverflow is the #1 forum among developers. Just ask anyone. </h2>
</header>
<footer class="hero-footer">
<a class="button-primary" href="#">Learn More</a>
<div id="iconheader">
<a id="myicon" href="#">Icon</a>
</div>
</footer>
</section>
Any help or suggestions would be greatly, greatly appreciated! Thank you.
Set position absolute and zindex high
.hero {
position: relative;
}
#iconheader {
position: absolute;
right: 0;
bottom: 0;
z-index:99999
}
for set a svg icon bottom in right corner use this css rules instead of yours:
#iconheader {
position: absolute;
right: 0;
bottom: 0;
}
in this way, the svg is always there
[![
Document
LesShop
The most popular book shop for IT
</body>
</html>][1]][1]
* {
margin: 0;
padding: 0;
}
.context {
color: white;
background-color: #201dd6;
width: 60%;
height: 900px;
top: 60px;
text-align: center;
}
I want to align the text down and in the middle like in the photo.
However, I couldn't make it. I also wrote my CSS codes. I'm really bad
at CSS. Can you help me?
Use this :
.context {
color: white;
background-color: #201dd6;
width: 60%;
height: 900px;
top: 60px; /* Not used without the position property */
text-align: center;
display: flex; /* add this */
align-items: center; /* add this */
justify-content: center; /* add this */
}
Ctrl + Shift + i on chrome and use the developing tools :
* {
margin: 0;
padding: 0;
}
.context {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
background-color: #201dd6;
height: 100vh;
width: 60%;
margin: 0 auto;
}
<div class='context'>
<h2>LesShop</h2>
The most popular book shop for IT
</div>
I have two problems :
How to make the text container rotated in front of background and cut its top like this example. My current approach make it overflow the bottom of the background :
https://codepen.io/fadhilradh/pen/wvdZPEE
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 12px;
border: 20px solid white;
height: 80%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
<div class="wrapper">
<div class="banner"/>
</div>
How to make the inside border rounded like the example.
I really appreciate if you can help me
Possibly something like this?
body {
overflow: hidden;
}
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
color: #35C222;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 50px;
border: 30px solid white;
height: 70%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
.frontend {
font-size: 70px;
margin-bottom: 0;
margin-left: 100px;
}
.time {
transform-origin: bottom left;
transform: rotate(90deg) translate(-80%);
}
<div class="wrapper">
<div class="banner">
<p class="time">{time.format("MMMM Do YYYY, h:mm:ss")}</p>
<p class="frontend"> < SPE / Frontend > </p>
</div>
</div>
Add following lines to the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Just make sure that the border is smaller than the border-radius.
I am building a navigation bar that has a lot of options and special sections.
I worked with Twitter Bootstrap, but it is difficult to develop.
The nav html tag has 3 sections grouped in 3 divs (left, center, right).
I am having difficulty in centring horizontally the text and logo of the company in left div, anchors with navigation items in the right div.
I need the height of navigation bar to be set in the CSS and not the calculate the height based of the child elements.
This is the html:
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
}
.left-navbar {
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
}
.right-navbar {
float: right;
background: maroon;
height: 100%;
/* float: right;
position: absolute;
top: 50%; right: 0%;
transform: translate(-50%,-50%);
background: gold;
padding: 1.5rem; */
}
.center-navbar {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: gold;
padding: 1rem;
}
.left-navbar strong {
color: red;
padding: 10px 10px;
display:inline-block;
text-align: center;
vertical-align: center;
}
.left-navbar img {
width: 32px;
height: 32px;
padding: 10px 10px;
}
.navbar a {
float: right; /* Orientation of the element in the parent element */
display: block; /* All over top left right bottom it is a block - element has block/padding all over the embedded element */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 14px top and bottom, 16px right and left */
text-decoration: none; /* Could be underline, overline, line-through */
font-size: 17px;
}
/* Apply only for anchors inside the navbar class */
.navbar a:hover {
background: #ddd;
color: black;
}
input[type="text"]{ padding: 5px 5px; line-height: 28px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar">
<div class="left-navbar">
<strong>Company</strong>
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/newsvine-512.png"></p>
</div>
<div class="center-navbar">
<input type="text" id="name" name="name" required height="45px;"
minlength="4" maxlength="40" size="40">
</div>
<div class="right-navbar">
Home
News
Contact
</div>
</nav>
Any working fiddle with best practices is ideal for me.
Thank you!
You can use flexbox to achieve this
.right-navbar, .left-navbar{
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen, let me know if that help!
Give .left-navbar - horizontal and vertical centering with display:flex;
.left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
Also, how do you want the right part of the navbar?
Flex-box is what you'll want to use here. Add display: flex to the .navbar and then add flex-grow: 1; to the center piece. This essentially says 'make this element span the remaining space in the flex container. Also, your height: 100% were unnecessary, so I removed them.
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
display: flex;
}
.left-navbar {
background: cadetblue;
width: 230px;
text-align: center;
}
.right-navbar {
background: maroon;
}
.center-navbar {
background: gold;
padding: 1rem;
flex-grow: 1;
}
input[type="text"]{
padding: 5px 5px;
line-height: 28px;
width: 100%;
box-sizing: border-box;
}
Have a div (really a header element) and I've seen many sites these days display text content perfectly centered within the container. So I'm trying it out, but so far, it's too far to the top of the div than the center. The example is here: http://jsfiddle.net/nuoxpmrk/
HTML:
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<h1 class="entry-title">Title Goes Here</h1><p class="entry-subtitle">This is a Subtitle</p> <p class="entry-credits">Written by: JS Fiddle</p>
</section>
</header>
CSS:
.entry-header { position: relative; width: 100%; height: 640px; color: #FFF; }
.entry-caption { margin: 15% auto 0; padding: 32px; text-align: center; width: 100%; }
.entry-caption p.entry-subtitle { font-size: 18px; line-height: 1.25; text-transform: none; }
.entry-caption h1.entry-title { font-size: 38px; line-height: 1.25; }
.entry-caption p.entry-credits { font-size: 14px; line-height: 1; margin-bottom: 1em; text-transform: uppercase; }
Your margin: 15% auto 0; is what is making it top. You need to wrap everything inside a <div> and give the following styles to this:
.entry-header {
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
padding: 32px;
text-align: center;
width: 100%;
}
.entry-caption p.entry-subtitle {
font-size: 18px;
line-height: 1.25;
text-transform: none;
}
.entry-caption h1.entry-title {
font-size: 38px;
line-height: 1.25;
}
.entry-caption p.entry-credits {
font-size: 14px;
line-height: 1;
margin-bottom: 1em;
text-transform: uppercase;
}
.center {
width: 100%;
height: 180px;
position: absolute;
top: 50%;
left: 0;
margin-top: -90px;
overflow: hidden;
}
<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="entry-caption">
<div class="center">
<h1 class="entry-title">Title Goes Here</h1>
<p class="entry-subtitle">This is a Subtitle</p>
<p class="entry-credits">Written by: JS Fiddle</p>
</div>
</section>
</header>
You can keep this very simple with CSS Flexbox. You just need to add three lines of code, and you can get rid of a bunch of code, as well.
Regardless of screen re-sizing vertically or horizontally, the centered items will remain centered.
HTML (no changes)
CSS
.entry-header {
display: flex; /* establish flex container */
justify-content: center; /* center child element (<section>) horizontally */
align-items: center; /* center child element (<section>) vertically */
/* No further changes */
position: relative;
width: 100%;
height: 640px;
color: #FFF;
}
.entry-caption {
/* margin: 15% auto 0; don't need this */
/* padding: 32px; don't need this */
text-align: center;
/* width: 100%; don't need this */
}
DEMO: http://jsfiddle.net/nuoxpmrk/2/
Note that flexbox is supported by all major browsers, except IE < 10.