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 107 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:  380 total views

2019-11-27 0 Comments 369 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>  452 total views,  5 views today

2019-11-19 0 Comments 433 Views 0 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
Fixing Kratos theme multi-language issue How to automatically translate a website to any language Controling Category List on Sidebar Widget Restoring the Links Manager Adding reCaptcha for user forms in WordPress Scheduling Background Job in WordPress
2021 最新 DotNet 资源大全去掉烦人的 "Share List"
Tracking referral ID for registered user in WordPress Send web report by email from report page Switch external image for index page and posts Geting twitter streaming contents in WordPress Unicode to Chinese conversion notes WordPress Event Calendar 的汉化
Categories
  • Architecture
  • BI
  • C#
  • CSS
  • Database
  • Digital Marketing
  • DotNET
  • Hosting
  • HTML
  • JavaScript
  • PHP
  • Program Language
  • Python
  • Security
  • Technology
  • Web
  • Wordpress

COPYRIGHT © 2021 Hostlike IT Blog. All rights reserved.

THEME KRATOS MADE BY VTROIS