Some pretty little makeup tools for website

Tram Ho

A perfect girl is indispensable to smart and interesting things, right? As a developer, you also want your girl to show attractive and useful things to the user, right? You only need to notice a few small details to make your website more interesting. The “tricks and tips” below are suitable makeup tools, let’s take a look!

1. The color picker

If you want the input field to contain some vivid color, just add a small element “color” (to get the color code through a visual tool).

Depending on the support of the browsers, a color picker may display in input fields.

Note: Color styles are not supported in Internet Explorer.

2. The document refresher

Automatically reloading a web page is a small feature in the web that is well known to apply it. Use to specify the length of time after which your Web page will refresh automatically (like when you press F5).

The following way of applying is very quick and easy to do, but due to the use of meta tags, it cannot be hidden when running on the browser or search bot. The syntax is that you enter HTML HEAD tag and write the following:

  • Automatically reload the current page:

  • Automatically refresh to the specified page:

The above example is you want to refresh the page after 30 seconds automatically.

Note: This code should not be used for web seo because google is very difficult, it is ok to use for other jobs.

3. Theme color changer

If you want to synchronize the interface, improve brand recognition and make users interesting, then change the theme color of your website using the name = ”theme-color” attribute. Insert the opening and closing <head> … </head> tags of the file with the meta tag like this:

The meta tag with name = “theme-color” will tell the browser how to change the browser color to match the desired color in the content attribute, in this case content = “# ff8800” with # ff8800, change the color code to match your brand or website theme.

Note: “theme-color” will only work on mobile devices. When a user device that is configuring dark-mode with a web browser will not comply with these color profiles.

4. Icon adder

Used to add icons in place of favicon. Favicon is understood to be an indispensable symbol in building a website. It is an icon image that is displayed in the top corner of the tab when accessing the browser. Users will see these icons as logos that represent their own website.

In terms of image files, ICO differs PNG in its ability to store multiple image sizes at the same time, when needed to use the right size, a web browser or reader will find the appropriate image size being stored. during the ICO will give better visibility.

5. Voice recognition

Used to add voice search in the input field. Like Google search, it searches with voice recognition.

Note: This will only work on mobile devices (Lolipop Google Chrome only).

Thank you everyone for taking the time to read the article!

Reference: https://www.geeksforgeeks.org/top-5-html-tricks-that-you-should-know/

Share the news now

Source : Viblo