<focal-point> web component built using the HTML Custom Element v1 spec
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE.md
README.md
demo.html
focal-point.js

README.md

<focal-point> Custom Element

The <focal-point> mimicks a highlighter and has six pre-defined colors. This component is built using the HTML Custom Elements v1 spec. This element takes one attribute:

  • color - {string} Valid CSS color code/hex/rgb/rgba/hsl/hsla value. Predefined values to mimick generic highlighters are yellow, green, blue, orange, pink, and purple.

Color names

<focal-point color="yellow">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

<focal-point color="blue">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

<focal-point color="green">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

<focal-point color="pink">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

<focal-point color="orange">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

Hex Code

<focal-point color="#ffcc67">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

RGB Code

<focal-point color="rgb(100,100,200)">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

RGBA Code

<focal-point color="rgba(100,100,200, 0.5)">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

HSL Code

<focal-point color="hsl(120, 100%, 75%)">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

HSLA Code

<focal-point color="hsla(120, 100%, 75%, 0.6)">
    Nullam ac ultricies justo, a tempor est. Aenean efficitur accumsan porttitor.
</focal-point>

Donate

  • BTC: 18o3S3rzdBqfUndc4pZm9dNUrNJ5zijDon
  • ETH: 0x9289E1B3a846061B14E81FD521a3ac910EC908A7