Instead of JavaScript, CSS also can do some tricks to make magic happen. CSS can maintain counter variables to inrease the value, and also add some content before and after a block, emphasize first letter of a paragraph, mandatory fields validation, etc. Counters Demo 1 Effect Code <head> <style> body { counter-reset:sec-counter; /* Set "sec-counter" to 0 */ } h2::before { counter-increment:sec-counter; /*Increment "sec-counter" by 1*/ content:"Section " counter(sec-counter) ". "; } </style> </head> <body> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h2>JavaScript Tutorial</h2> <h2>Bootstrap Tutorial</h2> <h2>SQL Tutorial</h2> <h2>PHP Tutorial</h2> </body> Demo 2 Effect Code <head> <style> body{ counter-reset:section; /* define counter */ counter-reset:heading; } h1:before{ counter-increment: heading; content:counter(heading) " - "; } h1{ counter-reset: subheading; } h2:before{ content: counter(heading) "." counter(subheading) ") "; counter-increment: subheading; } h2{ counter-reset: section; /* define counter */ } h3:before{ content: counter(heading) "." counter(subheading) "." counter(section) ") "; /*content: counter(section) ": ";*/ counter-increment: section; } </style> </head> <body> <h3>Heading 3, no counter</h3> <h3>Heading 3, no counter</h3> <h1>Heading 1</h1> <h2>Subheading</h2> <h2>Subheading</h2> <h3>Heading 3</h3> <h3>Heading 3</h3> <h1>Heading 1</h1> <h2>Subheading</h2> <h2>Subheading</h2> </body> Demo 3 Effect Code <dhead> <style> ol{ counter-reset: counter; list-style-type: none; } li::before{ counter-increment: counter; content: counters(counter, ".") " "; } </style> </head> <body> <ol> <li>item</li> <li>item</li> <ol> <li>item</li> <li>item</li> <li> <ol> <li>item</li> <li>item</li> <li>item</li> </ol> </li> <li>item</li> </ol> <li>item</li> <li>item</li> </ol> <ol> <!-- restart counter --> <li>item</li> <li>item</li> </ol> </body> Mask Effect Code <head> <style> body{ background-color: rgb(124, 156, 216); } img{ width:900px; mask-image:linear-gradient(to top,transparent 25%, rgb(50, 13, 184) 75%); -webkit-mask-image: linear-gradient(to left,transparent 25%, #000 75%); } </style> </head> <body> <img src="toronto city hall.jpg"> </body> First Letter…
Notice the difference between the two checkbox. Change stylesheet "-webkit-appearance" value to checkbox would fix. Fixed: 650 total views, 11 views today
(Reveal tech behind) Noticed that some web sites restrict their contents from fully readable, e.g. WallStreet web site articles. It used stylesheet to accomplesh this effect: .wsj-snippet-body{ position: relative; } .wsj-snippet-body:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 136px; background: rgba(255, 255, 255, .2); /* fallback for gradient */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%); } Effect: Full solution: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .wsj-snippet-body{ position: relative; } .wsj-snippet-body:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 136px; background: rgba(255, 255, 255, .2); /* fallback for gradient */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%); } </style> </head> <body> <div class="wsj-snippet-body"> <p>这些人士称，他们讨论的想法包括扩大东南亚（可能是新加坡）的业务以及在美国重塑其品牌。扩大东南亚业务将使该公司高管能够使该应用远离中国。</p> <p>与此同时，据了解该公司做法的人士称，TikTok还减少了其应用上来自中国的内容数量，以期减少提醒美国用户该应用源自中国。</p> <p>TikTok母公司北京字节跳动科技有限公司(Beijing...</p> </div> </body> 728 total views
