Kevin Powell - Community•4w ago

Substract image with css

hello there any ideas how to implement this to css from figma? im kinda understand how to make top one, but bottm one kinda tricky there's should be a shadow from image, i was thinking about clip-path or mask but im not sure btw price may have mroe numbers so it should be dynamic, and top one as well

<div class="relative rounded-2xl bg-primary-900 p-4">
   <p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

   <div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
      <NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

      <div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
         <div class="flex gap-3 items-center">
            <!-- @vue-skip -->
            <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

            <p>{{ gender }}</p>
         </div>
      </div>

      <div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
         <p>${{ price }}</p>
      </div>
   </div>

   <NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>

<div class="relative rounded-2xl bg-primary-900 p-4">
   <p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

   <div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
      <NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

      <div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
         <div class="flex gap-3 items-center">
            <!-- @vue-skip -->
            <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

            <p>{{ gender }}</p>
         </div>
      </div>

      <div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
         <p>${{ price }}</p>
      </div>
   </div>

   <NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>

i've done this so far, thanks for any help!

28 Replies

PatrikOP•4w ago

looks like that for now

Tok124 (CSS Nerd)•4w ago

https://www.youtube.com/watch?v=khjVPkO35F0

Kevin Powell

YouTube

Creating an inverted border-radius with CSS

The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way! 🔗 Links ✅ The original tweet: https:...

b1mind•4w ago

Nice was just about to link that ty

Tok124 (CSS Nerd)•4w ago

nice hehe

PatrikOP•4w ago

thanks will check this out! looks nice, thanks again Kevin said about mask do you have any examples of how mask should look? and how apply it

Tok124 (CSS Nerd)•4w ago

You can use a mask with a gradient to mask out parts. the color that you use in the gradient doesnt matter at all. i always use red because it is short and easy. and for the transparency i just use #0000 because once again, it's short and easy 🙂

Tok124 (CSS Nerd)•4w ago

So you can do the same with a radial-gradient

Tok124 (CSS Nerd)•4w ago

Or you can do with a linear gradient or whatever you prefer

PatrikOP•4w ago

can i use svg file as a mask?

Tok124 (CSS Nerd)•4w ago

Yeah you can

PatrikOP•4w ago

thanks

Tok124 (CSS Nerd)•4w ago

np 🙂

PatrikOP•4w ago

okay i've done smth similar but i have no idea how to apply shadow to inner corner

<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
   <div class="col-span-full row-span-full">
      <NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
         :src="'/fs/' + thumbnail?.path" alt="" />
   </div>

   <div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
   radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
      after:translate-x-full">
      <div class="flex gap-3 items-center">
         <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

         <p>{{ gender }}</p>
      </div>
   </div>

   <div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
      radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
      shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
      <p>${{ price }}</p>
   </div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
   position: absolute;
   display: block;
   --_size: 15px;
   width: 20px;
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 78% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
   /* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
   position: absolute;
   display: block;
   --_size: 36px;
   width: var(--_size);
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 100% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>

<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
   <div class="col-span-full row-span-full">
      <NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
         :src="'/fs/' + thumbnail?.path" alt="" />
   </div>

   <div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
   radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
      after:translate-x-full">
      <div class="flex gap-3 items-center">
         <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

         <p>{{ gender }}</p>
      </div>
   </div>

   <div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
      radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
      shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
      <p>${{ price }}</p>
   </div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
   position: absolute;
   display: block;
   --_size: 15px;
   width: 20px;
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 78% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
   /* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
   position: absolute;
   display: block;
   --_size: 36px;
   width: var(--_size);
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 100% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>

Tok124 (CSS Nerd)•4w ago

Yeah adding a shadow/glow effect will definitely be a great challenge. that really wont be easy at all... You could try filter:drop-shadow(0 0 10px red); but i don't think that is going to work... Most likely it will require tons of code to get shadow to work as you want...

PatrikOP•4w ago

already done that looks like that i also added shadow to price to hide shadow there but looks ugly and i dont know how to apply inset shadow to price to make it look nice seems like i need svg mask

Tok124 (CSS Nerd)•4w ago

Aah, i thought you used box-shadow property @PatrikFrom what i can see by reading your code, it seems like you have used box-shadow as i expected

Tok124 (CSS Nerd)•4w ago

You can see difference here

PatrikOP•4w ago

yea i know about that) but image are rectangle its not png

PatrikOP•4w ago

text just overlap image dont substruct it

Tok124 (CSS Nerd)•4w ago

Yeah well. i was expecting that it wouldn't work. but always worth giving it a try 🙂

PatrikOP•4w ago

perhaps i can use this element as a mask

Tok124 (CSS Nerd)•4w ago

Ah alright

PatrikOP•4w ago

like give it an id

Tok124 (CSS Nerd)•4w ago

Problem is that the mask will mask out everything, even shadow and text and everything

PatrikOP•4w ago

oh :c what if add mask to child and apply drop shadow to parent

Tok124 (CSS Nerd)•4w ago

It will still be the same behavior. the only thing you could do is to stack elements on top of each other like

<div class="stack">
  <div class="mask"></div>
  <div class="overlay"></div>
</div>

<div class="stack">
  <div class="mask"></div>
  <div class="overlay"></div>
</div>

Now you can put the mask on the mask div and put whatever you want on overlay and make the overlap stack on top of mask. that works, and this is the only way

Gaming

Programming

Substract image with css

Did you find this page helpful?