<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