Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<div class="content">
​
    <input type="checkbox">
    <div class="cover"></div>
​
    <h1>لورم ایپسوم متن </h1>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه
        روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف
        بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان
        را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در
        زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ
        به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا
        مورد استفاده قرار گیرد.</p>
</div>
 
   body {
        min-height: 100vh;
        background: #eee;
        margin: 0;
    }
​
    .content {
        max-width: 40rem;
        padding: 1rem;
        direction: rtl;
        text-align: justify;
        font-family: vazir,system;
        margin: auto;
    }
​
    .cover {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        mix-blend-mode: difference;
        background: transparent;
        pointer-events: none;
    }
​
    :checked+.cover {
        background: #fff;
    }
    input[type="checkbox"]{
        position: fixed;
        right: 3rem;
        bottom: 3rem;
        width: 3rem;
        height: 3rem;
    }
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers