IT Blog

  • Blog
  • Technology
    • Technology
    • Architecture
    • CMS
    • CRM
    • Web
    • DotNET
    • Python
    • Database
    • BI
    • Program Language
  • Users
    • Login
    • Register
    • Forgot Password?
  • ENEN
    • 中文中文
    • ENEN
CSS
CSS

CSS Tricks

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…

2021-01-24 0 Comments 770 Views 1 Like IT Team Read more
CSS

Fix checkbox symbol

Notice the difference between the two checkbox. Change stylesheet "-webkit-appearance" value to checkbox would fix. Fixed:  1,789 total views

2019-11-27 0 Comments 638 Views 0 Like IT Team Read more
CSS

Fading effect in html page

(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>  2,107 total views,  5 views today

2019-11-19 0 Comments 758 Views 1 Like IT Team Read more
Chinese (Simplified) Chinese (Simplified) Chinese (Traditional) Chinese (Traditional) English English French French German German Japanese Japanese Korean Korean Russian Russian
Newest Hotspots Random
Newest Hotspots Random
Rich editor not working Making web page scroll down automatically Getting data from Dapper result All Unicode Chars How to keep and display contact form 7 data Common Regular Expressions
Event Calendar got 500 error Adding Featured Image for Envira Gallery posts in batch CSS Tricks Adding reCaptcha for user forms in WordPress Add slideshow on homepage for Parallax One theme WP UI Design - Language Selection on Menu Bar
Categories
  • Architecture
  • BI
  • C#
  • CSS
  • Database
  • DotNET
  • Hosting
  • HTML
  • JavaScript
  • PHP
  • Program Language
  • Python
  • Security
  • SEO
  • Technology
  • Web
  • Wordpress

COPYRIGHT © 2021 Hostlike IT Blog. All rights reserved.

This site is supported by Hostlike.com