javierbyte / React Textgradient
Text gradients with CSS with SVG fallback. [unmaintained]
Stars: ✭ 110
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Textgradient
Guides
An organized list of guides and tutorials for design, development, and system administration.
Stars: ✭ 166 (+50.91%)
Mutual labels: design, frontend
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (+101.82%)
Mutual labels: design, frontend
Bootstrap Italia
Bootstrap Italia è un tema Bootstrap 4 conforme alle linee guida di design per i servizi web della PA
Stars: ✭ 193 (+75.45%)
Mutual labels: design, frontend
Img2css
Convert any image to pure CSS. Recreates images using only box-shadows.
Stars: ✭ 2,344 (+2030.91%)
Mutual labels: frontend, design
Ui Challenges
UI challenges by Semicolon, we accept challenges on twitter on #SemicolonChallenge
Stars: ✭ 69 (-37.27%)
Mutual labels: design, frontend
Topluluk Rehberi
Geliştiriciler için topluluk rehberi
Stars: ✭ 219 (+99.09%)
Mutual labels: design, frontend
Components
Fully responsive and beautiful HTML components made with VueJS and TailwindCSS.
Stars: ✭ 121 (+10%)
Mutual labels: design, frontend
Vue Bootstrap With Material Design
Vue Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 803 (+630%)
Mutual labels: design, frontend
Cohesive Colors
Tool that may help you to create cohesive color schemes.
Stars: ✭ 492 (+347.27%)
Mutual labels: design, frontend
Resources
This repo is a one stop destination to find resources for learning various domains. You can find the roadmap for any domain here.
Stars: ✭ 198 (+80%)
Mutual labels: design, frontend
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+8502.73%)
Mutual labels: design, frontend
Uix Kit
A free UI toolkit based on some common libraries for building beautiful responsive website, compatible with Bootstrap v4.
Stars: ✭ 318 (+189.09%)
Mutual labels: design, frontend
Visual Center
Proposed tool to better align logos in the center of a container.
Stars: ✭ 1,338 (+1116.36%)
Mutual labels: design, frontend
Tachyons Verbose
Functional CSS for humans. Verbose edition.
Stars: ✭ 102 (-7.27%)
Mutual labels: design, frontend
Vue Relay
🖖 🔛 🗂 A framework for building GraphQL-driven Vue.js applications.
Stars: ✭ 105 (-4.55%)
Mutual labels: frontend
Dva Boot Admin
🍰 react admin dashboard ui LANIF-ADMIN --- react 16 + react-router 4 + dva 2 + antd 4 后台管理 脚手架
Stars: ✭ 1,553 (+1311.82%)
Mutual labels: design
React Text Gradient.
UNMAINTAINED
Unmantained for now.
It seems that there are modern ways to do this, see https://css-tricks.com/snippets/css/gradient-text/
A React component that creates text gradients with CSS, including a SVG fallback.
Features.
- Uses CSS gradients when possible (Chrome, Safari, iOS, Android).
- Uses SVG as fallback on Firefox.
- The text remains as fluid text (never replaced with svg).
- Font size, family, weight, etc... controlled by CSS as normal.
Installation.
npm install react-textgradient --save
Usage.
First, require the component
var TextGradient = require('react-textgradient');
And then use it like this:
<TextGradient
text='React Text Gradient'
fromColor='#FFFF00'
toColor='#FF8008'
direction='right' />
And you will get the example of the start of the page.
Props.
-
text
: The content. -
fromColor
: The initial color for the gradient. Can be any valid color for CSS and SVG (HEX, RGBA, RGB, etc...). -
toColor
The final color of the gradient. -
fallbackColor
: The color to display on unsupported browsers. Optional, defaults totoColor
. -
direction
: One from 'top', 'left', 'bottom', 'right'. Optional, defaults to 'right'.
Roadmap.
- Support for radial gradients.
- Arbitrary gradient direction.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].