Skip to content

Instantly share code, notes, and snippets.

View triposat's full-sized avatar

Satyam Tripathi triposat

89 followers · 19 following
View GitHub Profile
@triposat
triposat / index.html
Created February 15, 2023 10:14
CSS min() function
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<p>
<code class="value"
>width: min(<span class="max">50%</span>,
<span class="min">400px</span>);</code
@triposat
triposat / index.html
Created February 15, 2023 11:21
CSS max() function
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<p>
<code class="value"
>width: max(<span class="max">45%</span>,
<span class="min">400px</span>);</code
@triposat
triposat / index.html
Created February 15, 2023 15:03
CSS clamp() function
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<p>
<code class="value"
>width: clamp(<span class="max">250px</span>, <span class="pref">50%</span>,
<span class="min">400px</span>);</code
@triposat
triposat / index.html
Created February 20, 2023 07:05
Relative Units
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<div class="rectangle">
<p>Box Width: <span class="box"></span></p>
</div>
@triposat
triposat / index.html
Last active February 20, 2023 08:36
Fixed Values
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<div class="rectangle">
<p>Box Width: <span class="box-width"></span></p>
<p>Box Height: <span class="box-height"></span></p>
<p>Font Size: <span class="box-font"></span></p>
@triposat
triposat / index.html
Created February 20, 2023 07:15
Flexible Values
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<p>
<code class="value"
>width: min(<span class="max">10vw</span>,
<span class="min">100px</span>);</code
@triposat
triposat / index.html
Created February 20, 2023 10:06
Simplified Code
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<div class="rectangle">
<p>Font Size: <span class="box"></span></p>
</div>
@triposat
triposat / index.html
Created February 20, 2023 12:24
Complexity
<div class="parent">
<div class="line"></div>
<p>Viewport Width: <span class="viewport"></span></p>
<div class="line"></div>
</div>
<div class="rectangle">
<p>Box Width: <span class="box"></span></p>
</div>
@triposat
triposat / index.html
Created February 26, 2023 08:09
Media Query
<section>
<img src="https://www.lambdatest.com/logo.png" alt="Image 1">
<img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>
@triposat
triposat / index.html
Created February 26, 2023 08:11
Overuse CSS Functions
<section>
<img src="https://www.lambdatest.com/logo.png" alt="Image 1">
<img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>