From 2ede57d571e382f5aae167bd2a059a12fa1108ea Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Mon, 26 Feb 2024 12:09:08 -0700 Subject: add new post --- ...ntrol-element-under-another-element-html-css.md | 35 ++++++++ .../assets/underlying/video-under-element.jpg | Bin 0 -> 155017 bytes ...trol-element-under-another-element-html-css.png | Bin 0 -> 22985 bytes docs/assets/underlying/video-under-element.jpg | Bin 0 -> 155017 bytes docs/feed.rss | 48 ++++++++++- ...trol-element-under-another-element-html-css.png | Bin 0 -> 22985 bytes docs/index.html | 32 +++----- ...rol-element-under-another-element-html-css.html | 88 +++++++++++++++++++++ docs/posts/index.html | 13 +++ docs/tags/CSS.html | 71 +++++++++++++++++ docs/tags/HTML.html | 13 +++ 11 files changed, 279 insertions(+), 21 deletions(-) create mode 100644 Content/posts/2024-02-26-control-element-under-another-element-html-css.md create mode 100644 Resources/assets/underlying/video-under-element.jpg create mode 100644 Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png create mode 100644 docs/assets/underlying/video-under-element.jpg create mode 100644 docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png create mode 100644 docs/posts/2024-02-26-control-element-under-another-element-html-css.html create mode 100644 docs/tags/CSS.html diff --git a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md new file mode 100644 index 0000000..1c253fe --- /dev/null +++ b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md @@ -0,0 +1,35 @@ +--- +date: 2024-02-26 11:57 +description: With CSS you can disable any interactions with an element and directly control the underlying element +tags: HTML, CSS +draft: false +--- + +# Interacting with underlying element in HTML + +I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame. + +```html +
+
+ + + +
+
+``` + +![Video Under a Transparent Image](/assets/underlying/video-under-element.jpg) + +Turns out, you can disable pointer events! + +In Tailwind, it is as simple as adding `pointer-events-none` to the bezel screen. + +In CSS, this can be done by: + +```css +.className { + pointer-events: none +} +``` + diff --git a/Resources/assets/underlying/video-under-element.jpg b/Resources/assets/underlying/video-under-element.jpg new file mode 100644 index 0000000..96afed2 Binary files /dev/null and b/Resources/assets/underlying/video-under-element.jpg differ diff --git a/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png new file mode 100644 index 0000000..2817224 Binary files /dev/null and b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png differ diff --git a/docs/assets/underlying/video-under-element.jpg b/docs/assets/underlying/video-under-element.jpg new file mode 100644 index 0000000..96afed2 Binary files /dev/null and b/docs/assets/underlying/video-under-element.jpg differ 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 @@ Navan's Archive Rare Tips, Tricks and Posts https://web.navan.dev/en - Sat, 17 Feb 2024 19:51:03 -0000 - Sat, 17 Feb 2024 19:51:03 -0000 + Mon, 26 Feb 2024 12:07:42 -0000 + Mon, 26 Feb 2024 12:07:42 -0000 250 @@ -3547,6 +3547,50 @@ Otherwise, it calls the custom action.

]]> + + + https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html + + + Interacting with underlying element in HTML + + + With CSS you can disable any interactions with an element and directly control the underlying element + + https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html + Mon, 26 Feb 2024 11:57:00 -0000 + Interacting with underlying element in HTML + +

I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.

+ +
+
<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
+    <div class="content flex flex-wrap content-center justify-center">
+        <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
+        <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
+        <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
+    </div>
+</div>
+
+
+ +

Video Under a Transparent Image

+ +

Turns out, you can disable pointer events!

+ +

In Tailwind, it is as simple as adding pointer-events-none to the bezel screen.

+ +

In CSS, this can be done by:

+ +
+
.className {
+    pointer-events: none
+}
+
+
+]]> + + https://web.navan.dev/posts/2019-12-10-TensorFlow-Model-Prediction.html diff --git a/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png new file mode 100644 index 0000000..2817224 Binary files /dev/null and b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png differ diff --git a/docs/index.html b/docs/index.html index 2f442d9..3bee970 100644 --- a/docs/index.html +++ b/docs/index.html @@ -50,6 +50,19 @@

Recent Posts

For all posts go to Posts diff --git a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html new file mode 100644 index 0000000..8b72ac5 --- /dev/null +++ b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html @@ -0,0 +1,88 @@ + + + + + + + + + Interacting with underlying element in HTML + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

Interacting with underlying element in HTML

+ +

I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.

+ +
+
<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
+    <div class="content flex flex-wrap content-center justify-center">
+        <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
+        <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
+        <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
+    </div>
+</div>
+
+
+ +

Video Under a Transparent Image

+ +

Turns out, you can disable pointer events!

+ +

In Tailwind, it is as simple as adding pointer-events-none to the bezel screen.

+ +

In CSS, this can be done by:

+ +
+
.className {
+    pointer-events: none
+}
+
+
+ +
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/docs/posts/index.html b/docs/posts/index.html index 566d3de..4194100 100644 --- a/docs/posts/index.html +++ b/docs/posts/index.html @@ -52,6 +52,19 @@
    +
  • Interacting with underlying element in HTML
    • +
      +
    • With CSS you can disable any interactions with an element and directly control the underlying element
      • +
    • Published On: 2024-02-26 11:57
      • +
    • Tags: + + HTML, + + CSS + +
    + +
  • Hello 2024
    • Recap of 2023, and my goals for 2024
      • diff --git a/docs/tags/CSS.html b/docs/tags/CSS.html new file mode 100644 index 0000000..b11c63d --- /dev/null +++ b/docs/tags/CSS.html @@ -0,0 +1,71 @@ + + + + + + + + + "CSS" + + + + + + + + + + + + + + + + + + + + + +
      +
      + + +
      +

      CSS

      Posts tagged 'CSS'

      +
      + + + + + + + + \ No newline at end of file diff --git a/docs/tags/HTML.html b/docs/tags/HTML.html index dce5e7b..411407f 100644 --- a/docs/tags/HTML.html +++ b/docs/tags/HTML.html @@ -49,6 +49,19 @@