Without JS, teach you only make a few practical effect with pure HTML pages

Please indicate the source: Grape City’s official website, Grape City to provide professional development tools for developers, solutions and services, enabling developers. Original Source: https: //

In the past, we see page effects, the effect is a lot of need to use with JS, and today in this article, I’ll show you how to use pure HTML to create practical effect of their own.

1. folded accordion

Use Details and Summary tab to create a collapsible accordion no JavaScript code.




<summary>Languages Usedsummary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSSp>

<summary>How it Workssummary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. p>


* {
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;

details[open] {
    padding: .5em;

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;

Browser support:


2. progress bar

The basic elements of the label and Progress Meter on, you can adjust the properties presented on screen progress bar. Progress has two properties: max value and calibration progress bar while the Meter labels provide more custom attributes.






<label for="upload">Upload progress:label>

<meter id="upload" name="upload"
       min="0" max="100"
       low="33" high="66" optimum="80"
    at 50/100


<label for="file">File progress:label>

<progress id="file" max="100" value="70"> 70% progress>


body {
  margin: 50px;

label {
    padding-right: 10px;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

Browser support:




3. More Input Type

When defining input elements, you have to know that modern browsers allow you to specify the type of input enough. You should already know that in addition to text, email, password, number of these types, there are those below.

    The machine will display the date date selector

    datetime-local richer date and time picker

    month-friendly selector month

    tel will let you enter a phone number. Open it on your mobile browser, the pop-up keyboard will change, the same is true of email.

    Enter the search text box to search for a friendly style.




<label for="date">Enter date:label>
<input type="date" id="date"/>

<label for="datetime">Enter date & time:label>
<input type="datetime-local" id="datetime"/>

<label for="month">Enter month:label>
<input type="month" id="month"/>

<label for="search">Search for:label>
<input type="search" id="search"/>

<label for="tel">Enter Phone:label>
<input type="tel" id="tel">


input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

A variety of new input types MDN documentation is very extensive and a great amount of information. Also, check to see keyboard input type mobile user behavior when these input elements on the mobile browser.

4. Video and Audio

video and audio elements, although now part of the HTML standard, but you would be surprised as to the label you can use video rendering a decent video player on the screen.

<video controls>

    <source src="" 

    Sorry, your browser doesn't support embedded videos.

Some attribute the video tag worthy of note include:

    poster to be displayed when downloading video URL cover

    preload whether pre-loaded when the page loads the entire video

    Whether autoplay video should play automatically when the page loads

Browser support:



5. proof text

When you want to display the history of editing and proofreading of the situation, blockquote, del and ins elements labels can come in handy.




    There is <del>nothingdel> <ins>no codeins> either good or bad, but <del>thinkingdel> <ins>running itins> makes it so.


del {
    text-decoration: line-through;
    background-color: #fbb;
    color: #555;

ins {
    text-decoration: none;
    background-color: #d4fcbc;

blockquote {
    padding-left: 15px;
    line-height: 30px;
    border-left: 3px solid #d7d7db;
    font-size: 1rem;
    background: #eee;
    width: 200px;

6. The more unified quotes

Due to the different quotes in English, using the tag gives you a good solution to this problem, it can make your content more consistently presented quotes on most browsers.




Don Corleone said <q cite="">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.q>p>


Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."i>


body {
  margin: 50px;

q {
    font-style: italic;
    color: #000000bf;


7. Keyboard tab

tag should be a little-known popular label, but can be used in this embodiment will be described better style key combination.



<p>I know that <kbd>CTRLkbd>+<kbd>Ckbd> and <kbd>CTRLkbd>+<kbd>Vkbd> a are like the most used key combinationsp>


body {
  margin: 50px;

kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    font-size: 11px;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px 0 #FFF;
    background-color: #e1e3e5;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;

8. HTML code sharing

Use figcaption pre code labels, you can use pure HTML and CSS code snippet showing nice.




      Defining a css <code>colorcode> property for a class called 'golden'
      .golden {
        color: golden;


pre {
  background-color: #ffbdbd;


This article only initiate, perhaps you have more possession of the use of skills, might also posted for everyone to share.

In addition, if you are not limited to the above efficiency, we hope to have a more complete dynamic function.

For example: You want to add Excel functionality to your page, you can try the front pure form controls SpreadJS, then, or you want to provide users with a more complete, more efficient front-end UI controls, you may wish to try WimoJS.

I do not believe they can add much color for your application.


Leave a Reply