Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alohe/maker-tag
Maker tag is a customizable HTML and CSS based widget that displays a text tag on a web page. The widget is designed to be added to any website with minimal configuration.
https://github.com/alohe/maker-tag
css3 javascript madebyme maker makers widget
Last synced: 2 days ago
JSON representation
Maker tag is a customizable HTML and CSS based widget that displays a text tag on a web page. The widget is designed to be added to any website with minimal configuration.
- Host: GitHub
- URL: https://github.com/alohe/maker-tag
- Owner: alohe
- License: apache-2.0
- Created: 2023-04-15T12:49:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-12T11:54:58.000Z (over 1 year ago)
- Last Synced: 2024-11-06T11:45:26.248Z (7 days ago)
- Topics: css3, javascript, madebyme, maker, makers, widget
- Language: HTML
- Homepage:
- Size: 179 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Maker tag
Maker tag is a customizable HTML and CSS based widget that displays a text tag on a web page. The widget is designed to be added to any website with minimal configuration.
## Usage
To add the Maker tag widget to your website, simply add the following JavaScript code to your web page:
```html
```
The widget can be customized by passing an object to the MakerTag constructor. The following code shows the default configuration:
## Configuration
To add the Maker tag widget to your website, simply add the following JavaScript code to your web page:
```html
new MakerTag({
text: "Made with ❤️ by Alohe",
link: "https://twitter.com/alemalohe",
});
```
The widget can be customized by passing an object to the MakerTag constructor. The following code shows the default configuration:
```html
new MakerTag({
text: "Made with ❤️ by Alohe",
link: "https://alohe.github.io",
position: "bottom-left",
background: "radial-gradient(circle at left, #FFE2A3 0%, #fff 50%, #FFE2A3 100%)",
color: "#E59F0D",
animated: true,
padding: "10px 20px",
margin: "10px",
font: {
size: "13px",
weight: "700",
},
borderRadius: "13px",
hover: {
color: "",
background: "",
shadow: "",
},
shadow: "none",
});
```
| Attribute | Type | Description | Default |
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| text | string | The text to display in the tag. | "Made with ❤️" |
| link | string | The link that the tag points to. | "https://twitter.com/alemalohe" |
| color | string | The color of the text in the tag. | "white" |
| background | string | The background of the tag. Can be set to any valid CSS background value. Including gradients! | "black" |
| margin | string | The margin of the tag. | "20px" |
| padding | string | The padding of the tag. | "10px 20px" |
| font.size | string | The font size of the tag. | "0.8rem" |
| font.weight | string | The font weight of the tag. | "bold" |
| borderRadius | string | The border radius of the tag. | 0 |
| position | string | The position of the tag. Valid values are "bottom-left", "bottom-right", "top-left", and "top-right". | "bottom-left" |
| shadow | string | The box shadow of the tag. | "0 0 0 rgba(0, 0, 0, 0)" |
| hover.color | string | The text color of the tag on hover. | "white" |
| hover.background | string | The background color of the tag on hover. | "black" |
| hover.shadow | string | The box shadow of the tag on hover. | "0 0 0 rgba(0, 0, 0, 0)" |
| animated | boolean | Whether to enable the animated gradient background. Only works if the background attribute is set to a gradient value. | false |
## License
This project is licensed under the Apache License 2.0. See the [LICENSE](https://github.com/alohe/maker-tag/blob/master/LICENSE) file for more information.