Note that there are some explanatory texts on larger screens.

plurals
  1. POunable to use this css on Chrome browser
    primarykey
    data
    text
    <p>I tried to create simple date icon using CSS. Below is the code, which is working fine on Mozilla Firefox, but not working on Chrome.</p> <p><a href="http://cssdeck.com/labs/css3-calendar-icon" rel="nofollow">Code link</a></p> <p>Could you please help me?</p> <blockquote> <p>can anyone give me the latest version link of code?</p> </blockquote> <p>HTML code</p> <pre><code> &lt;div class="holder"&gt; &lt;div class="month red"&gt; &lt;p&gt;October&lt;/p&gt; &lt;/div&gt; &lt;div class="day"&gt; &lt;p&gt;22&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS code</p> <pre><code>holder { width: 72px; height: 84px; position: relative; margin: 20px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; float: left; } .month { width: 70px; height: 25px; border: 1px solid rgba(0,0,0,0.25); -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.4); } .month p { text-align: center; color: white; font-size: 11px; font-weight: 600; text-shadow: 1px 1px 0px rgba(0,0,0,0.40); margin: 5px 0 0 0; border-bottom: 1px dashed rgba(0,0,0,0.30); margin: 5px 8px 0px 8px; padding: 0 0 1px 0; } .day { width: 70px; height: 50px; border: 1px solid rgba(0,0,0,0.25); -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background: white; background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 1)), color-stop(100%,rgba(247, 247, 247, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%); background: linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(247, 247, 247, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); box-shadow: 0px 1px 0px 0px #fff, 0px 2px 0px 0px #ccc,0px 3px 0px 0px #fff, 0px 4px 0px 0px #ccc; } .day p { text-align: center; font-size: 36px; font-weight: 700; color: #444; text-shadow: 1px 1px 0px white; margin-top: 3px; } .red{ background: rgb(169,3,41); background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload