CODEWITHSUNDEEP
javascriptcssangularjssassattr
Ben Taliadoros
Ben Taliadoros

Reputation: 9391

How can I set a variable linear gradient colour?

I am using a pure css version of 'clamping' as from this link inspired by Chris Coyier: http://codepen.io/bental/pen/JWEaJg

This means I have css (sass) such as:

.clamp:after {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Sometimes the background is not white, so what I want to do is set the second colour to a variable colour.

I can only think of two options which I don't think work. This is what I've tried:

Neither work for me. Does anyone know how I can set a linear gradient on a pseudo element (in this case :after)?

Upvotes: 2

Views: 4679

Answers (3)

Amal
Amal

Reputation: 3426

if you can replace pseudo element with span you can change color dynamically

var demo = angular.module('demo', []);
demo.controller("myColor",function($scope){
var background="linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)";
$(".cover").css("background",background);
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  padding: 20px;
  font: 1.2em/1.2em 'Open Sans', sans-serif;
}
.module {
  width: 250px;
  margin: 0 0 1em 0;
  overflow: hidden;
}
.module p {
  margin: 0;
}


.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.cover{
 text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app='demo'>
    <div class="module fade" ng-controller="myColor">
  <p >Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <span class="cover"></span>
    </div>
</div>

Upvotes: 0

blackmiaool
blackmiaool

Reputation: 5344

The inheriting way actually works. http://codepen.io/blackmiaool/pen/dvNqQM

Change the css as below:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  padding: 20px;
  font: 1.2em/1.2em 'Open Sans', sans-serif;
}
.module {
  width: 250px;
  margin: 0 0 1em 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), red 50%);
}
.module p {
  margin: 0;
  background:red;
}


.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background:inherit;
}

Upvotes: 2

gwcodes
gwcodes

Reputation: 5690

Since you're using Sass, you could stick the background colour in a variable? For example:

$background-color: #eee;

.special-div {
  background: $background-color;
  .clamp:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), $background-color 50%);
  }
}

Upvotes: 0

Related Questions