Skip to content

therocco/focal-point

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

<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

About

<focal-point> web component built using the HTML Custom Element v1 spec

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published