https://github.com/noeldelgado/text-gradient

:lollipop: Apply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.
https://github.com/noeldelgado/text-gradient

javascript text-gradient text-gradients

Last synced: 2 months ago
JSON representation

:lollipop: Apply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.

• Host: GitHub
• URL: https://github.com/noeldelgado/text-gradient
• Owner: noeldelgado
• License: mit
• Created: 2015-09-13T12:28:21.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-26T01:45:08.000Z (over 7 years ago)
• Last Synced: 2024-10-12T09:29:46.825Z (3 months ago)
• Topics: javascript, text-gradient, text-gradients
• Language: JavaScript
• Homepage: https://noeldelgado.github.io/text-gradient/
• Size: 112 KB
• Stars: 32
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# text-gradient

[![npm-image](https://img.shields.io/npm/v/text-gradient.svg?style=flat-square)](https://www.npmjs.com/package/text-gradient)

*Vanilla js version of [javierbyte's][0] – [react-textgradient][1].*

Apply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.

**Note:** Not recommended for large amounts of text, most suitable for headings and the like.

[Demo](https://noeldelgado.github.io/text-gradient/)

[![text-gradient](screenshot.png)](http://noeldelgado.github.io/text-gradient/)

## Features

- Uses CSS text gradients when possible (Chrome, Safari, iOS, android).

- Fallbacks to SVG masking on Firefox `url(#gradient)`.

- The text remains controlled via CSS (font size, family, weight, text-align, line-height, etc...)

## Install

```sh

npm install text-gradient --save

```

## Usage

```

@argument element  [NodeElement] the element to apply the gradient

@argument options  [Object] Gradient color-stops, direction, text.

```

```js

const TextGradient = require('text-gradient');

const gradient = new TextGradient(document.getElementById('headline'), {

  from: '#B0E537',

  to: '#009DE9',

  direction: 'right'

});

```

## Options

| name | type | default | description |

|:--- |:--- |:---|:---|

| text | String | `element.textContent` | The text to display |

| from | String (valid color format) | `transparent` | Gradient's first color-stop |

| to | String (valid color format) | `transparent` | Gradient's last color-stop |

| direction | String | `right` | One of (top, right, bottom, left) |

## API

### updateText(String)

Changes the text contents.

```js

/*

 * @argument text  [String]

 * @return undefined

 */

gradient.updateText('Some other catchy headline');

```

### destroy()

Remove the text-gradient effect, references and elements created by the instance (svg container, defs, extra spans to wrap the content, etc).

```js

/*

 * @return null

 */

gradient = gradient.destroy();

```

## License

MIT © [Noel Delgado](http://pixelia.me/)

[0]: https://github.com/javierbyte

[1]: https://github.com/javierbyte/react-textgradient