• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Issues With Using Gradient Fill CSS Combined With Variables

Explorer ,
May 27, 2022 May 27, 2022

Copy link to clipboard

Copied

Hi Guys,

 

I'm having some issues with using variables as part of a gradient fill CSS statement.   I have basically created variables for each part of a gradient fill statement.   The objective being to be able to change any aspect of a gradient fill statement by chainging the specific variable to a valid value.  Everything seems to work until I try to plug in the orientation as a variable then the whole statement "breaks" and the colors get messed up.  What are the limits to using variables in this situation?  Thanks in advance for any help you can provide.

TOPICS
Code , Error , How to

Views

158

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 28, 2022 May 28, 2022

Your second gradient works as expected for the header.

 

I think your issue with the first gradient is youre trying to use a css variable to set 'linear-gradient'

 

Votes

Translate

Translate
LEGEND ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

You're not providing much in the way of code to help us unravel the problem.

 

You mention 'gradient fill' (I don't know what that is?). Do you mean linear-gradient applied to a background-image selector?

 

:root {
--orange: #ff8a00;
--red: #e52e71;
--direction: top right;
}

 

 

.gradient {
background-image: linear-gradient(to var(--direction), var(--orange) , var(--red));
height: 300px;
}

 

<div class="gradient"></div>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

Yes I should have posted example code.  That's  my fault.  When I try to substitute a variable in place of linear-gradient everything gets messed up.  I am able to use variables for all other parts of the statement.  My HTML is using IDs not classes but the idea is the same.  The first one uses the variable and does not appear to produce any problems.  If I try to do the same to the secomd ome the colors get messed up.

:root {
  --default-page-background-color: #dddddd;	
  --default-page-background-padding: 20px;	
  --default-border-color: #666666;
  --default-border-width: 1px;
  --default-border-radius: 5px;
  --default-border-style: solid;
  --default-background-color: #ffffff;
  --default-gradient-orientation: linear-gradient;
  --default-gradient-position: to top;
  --default-gradient-start-color: #3E6EB6;
  --default-gradient-start-position: 0%;
  --default-gradient-end-color: #E0E8F5;	
  --default-gradient-end-position: 100%;
  --default-font-family: Helvetica, Verdana, Arial , sans-serif;
  --default-font-size: 2em;
  --default-font-color: #666666;

#headernavigation {
  border: var(--default-border-color);
  background: var(--default-background-color);
  background: var(--default-gradient-orientation)(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));		
  }

#header {
  background: var(--default-background-color);
  background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

Your second gradient works as expected for the header.

 

I think your issue with the first gradient is youre trying to use a css variable to set 'linear-gradient'

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 28, 2022 May 28, 2022

Copy link to clipboard

Copied

LATEST

I am assuming that using a variable won't work.  I haven't found anything online clariifying when you can or can't use variables.   The idea was to make the gradient fully configurable using variables.  Guess that not gonna happen now.  Thanks for the clarificatio

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines