diff options
| author | Navan Chauhan <navanchauhan@gmail.com> | 2024-02-26 12:09:08 -0700 |
|---|---|---|
| committer | Navan Chauhan <navanchauhan@gmail.com> | 2024-02-26 12:09:08 -0700 |
| commit | 2ede57d571e382f5aae167bd2a059a12fa1108ea (patch) | |
| tree | 7b2defef7ce1786f30635469cbaca066b6cd1526 /docs/feed.rss | |
| parent | f5faa2ef095f035110f83e17da0b35d3a34d6b97 (diff) | |
add new post
Diffstat (limited to 'docs/feed.rss')
| -rw-r--r-- | docs/feed.rss | 48 |
1 files changed, 46 insertions, 2 deletions
diff --git a/docs/feed.rss b/docs/feed.rss index 5cafe59..244ab87 100644 --- a/docs/feed.rss +++ b/docs/feed.rss @@ -4,8 +4,8 @@ <title>Navan's Archive</title> <description>Rare Tips, Tricks and Posts</description> <link>https://web.navan.dev/</link><language>en</language> - <lastBuildDate>Sat, 17 Feb 2024 19:51:03 -0000</lastBuildDate> - <pubDate>Sat, 17 Feb 2024 19:51:03 -0000</pubDate> + <lastBuildDate>Mon, 26 Feb 2024 12:07:42 -0000</lastBuildDate> + <pubDate>Mon, 26 Feb 2024 12:07:42 -0000</pubDate> <ttl>250</ttl> <atom:link href="https://web.navan.dev/feed.rss" rel="self" type="application/rss+xml"/> @@ -3549,6 +3549,50 @@ Otherwise, it calls the custom action.</p> <item> <guid isPermaLink="true"> + https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html + </guid> + <title> + Interacting with underlying element in HTML + </title> + <description> + With CSS you can disable any interactions with an element and directly control the underlying element + </description> + <link>https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html</link> + <pubDate>Mon, 26 Feb 2024 11:57:00 -0000</pubDate> + <content:encoded><![CDATA[<h1>Interacting with underlying element in HTML</h1> + +<p>I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.</p> + +<div class="codehilite"> +<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"</span><span class="p">></span> + <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"content flex flex-wrap content-center justify-center"</span><span class="p">></span> + <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"iphone-12-white.png"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[60vh] z-10 absolute"</span><span class="p">></span> + <span class="cm"><!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">--></span> + <span class="p"><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"screenrec.mp4"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[57vh] mt-4 mr-1 rounded-[2rem]"</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">></</span><span class="nt">video</span><span class="p">></span> + <span class="p"></</span><span class="nt">div</span><span class="p">></span> +<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</code></pre> +</div> + +<p><img src="/assets/underlying/video-under-element.jpg" alt="Video Under a Transparent Image" /></p> + +<p>Turns out, you can disable pointer events!</p> + +<p>In Tailwind, it is as simple as adding <code>pointer-events-none</code> to the bezel screen.</p> + +<p>In CSS, this can be done by:</p> + +<div class="codehilite"> +<pre><span></span><code><span class="p">.</span><span class="nc">className</span><span class="w"> </span><span class="p">{</span> +<span class="w"> </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span> +<span class="p">}</span> +</code></pre> +</div> +]]></content:encoded> + </item> + + <item> + <guid isPermaLink="true"> https://web.navan.dev/posts/2019-12-10-TensorFlow-Model-Prediction.html </guid> <title> |