https://logicwiki.co.uk/index.php?action=history&feed=atom&title=Css_Tips_and_Tricks 2026-06-02T06:10:34Z Revision history for this page on the wiki MediaWiki 1.26.2 https://logicwiki.co.uk/index.php?title=Css_Tips_and_Tricks&diff=2151&oldid=prev 2021-07-26T07:49:09Z

<p>Created page with &quot;<a href="/index.php?title=Category:Css&amp;action=edit&amp;redlink=1" class="new" title="Category:Css (page does not exist)">Category:css</a> == Text tooltips == &lt;pre&gt; &lt;button type=&quot;button&quot; class=&quot;tooltip&quot; data-tip=&quot;This css tooltip&quot;&gt; I have a Tooltip &lt;/button&gt; // only add tooltip when there is...&quot;</p> <p><b>New page</b></p><div>[[Category:css]]<br /> <br /> == Text tooltips ==<br /> &lt;pre&gt;<br /> &lt;button type=&quot;button&quot; class=&quot;tooltip&quot; data-tip=&quot;This css tooltip&quot;&gt;<br /> I have a Tooltip<br /> &lt;/button&gt;<br /> // only add tooltip when there is a message<br /> .tooltip[data-tip]:not([data-tip=&quot;&quot;])::before {<br /> content: attr(data-tip);<br /> position: absolute;<br /> background-color: rgba(0,0,0,0.8);<br /> color: #fff;<br /> padding: 15px 10px;<br /> border-radius: 3px;<br /> max-width: 300px;<br /> width: 250%;<br /> left: 50%;<br /> transform: translate(-50%, 0);<br /> bottom: calc(100% + 12px);<br /> }<br /> &lt;/pre&gt;<br /> <br /> == Extend the clickable area ==<br /> &lt;pre&gt;<br /> button {<br /> border: none;<br /> background: #222;<br /> width: 10px;<br /> height: 10px;<br /> border-radius: 50%;<br /> padding: 0;<br /> position: relative;<br /> cursor: pointer;<br /> }<br /> button::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> left: 50%;<br /> top: 50%;<br /> transform: translate(-50%, -50%);<br /> width: 200%;<br /> height: 200%;<br /> display: inline-block;<br /> /* for demo purpose only - should be removed */<br /> background: rgba(0,0,0,0.2);<br /> }<br /> <br /> == Responsive text ==<br /> &lt;pre&gt;<br /> font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));<br /> &lt;/pre&gt;<br /> <br /> &lt;pre&gt;<br /> font-size: clamp(min, viewport-width-unit, max);<br /> &lt;/pre&gt;<br /> <br /> == Frosted glass effect ==<br /> &lt;pre&gt;<br /> .container {<br /> background-color: rgba(255, 255, 255, .15);<br /> backdrop-filter: blur(5px);<br /> }<br /> &lt;/pre&gt;<br /> &lt;/pre&gt;</div>

AliIybar