Rook
Rook
PostsComments
KPCKevin Powell - Community
Created by suhaylmv on 8/22/2023 in #front-end
How to make a button with text which "traspasses" the background?
what isn't possible with astro's image components? setting a background image in CSS?
73 replies
KPCKevin Powell - Community
Created by suhaylmv on 8/22/2023 in #front-end
How to make a button with text which "traspasses" the background?
https://codepen.io/Therason/pen/bGOdbKo I've updated it to use an image instead. I don't think using an image instead of a gradient makes much of a difference, you just might have to toy with the positioning
73 replies
KPCKevin Powell - Community
Created by suhaylmv on 8/22/2023 in #front-end
How to make a button with text which "traspasses" the background?
why not? can you show me what you tried?
73 replies
KPCKevin Powell - Community
Created by suhaylmv on 8/22/2023 in #front-end
How to make a button with text which "traspasses" the background?
https://codepen.io/Therason/pen/bGOdbKo Here's a solution that maybe works with any color, but it's a bit weird. No clue if it's the best approach, but the idea is to have an element with the same background as the body, then apply background-clip: text to it
73 replies
KPCKevin Powell - Community
Created by suhaylmv on 8/22/2023 in #front-end
How to make a button with text which "traspasses" the background?
wouldn't that just show the dark blue color of the button's background?
73 replies
KPCKevin Powell - Community
Created by curator on 8/16/2023 in #front-end
Can we bend a straight line to make it a semi circle?
this is fairly trivial to do with one element instead. look into the box-shadow property
15 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
i need to brush up on my vanilla js stuff ;-;
13 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
Yeah! I think appendChild only takes nodes, but append takes both :)
13 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
wdym? that is probably a clearer approach, but append (and this solution) works just fine, since append can also accept a string as an argument. you end up with 
<div>🫶</div>
<div>❤️</div>
<div>🔥</div>
<div>🫶</div>
<div>❤️</div>
<div>🔥</div>
13 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
but yeah it's kinda hard to help you without seeing anything that you've tried to do to solve it
13 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
lol ¯\_(ツ)_/¯
13 replies
KPCKevin Powell - Community
Created by verakissyou17 on 8/15/2023 in #front-end
Array of images or emoji
const emojis = ['🫶', '❤️', '🔥']
emojis.forEach(emoji => {
  const div = document.createElement('div')
  div.append(emoji)
  document.body.append(div)
})
const emojis = ['🫶', '❤️', '🔥']
emojis.forEach(emoji => {
  const div = document.createElement('div')
  div.append(emoji)
  document.body.append(div)
})
13 replies
KPCKevin Powell - Community
Created by ElJorge on 7/28/2023 in #front-end
How to manage mix-blend-mode: difference for Navbar
https://codepen.io/Therason/pen/XWydQeY
8 replies
KPCKevin Powell - Community
Created by ElJorge on 7/28/2023 in #front-end
How to manage mix-blend-mode: difference for Navbar
I've tried to solve a similar-ish problem before, but the solution I came up with really isn't super practical. I had two elements stacked upon each other that were identical aside from having differeent colors, then revealed the lower one with a mask-image.
8 replies
KPCKevin Powell - Community
Created by ElJorge on 7/28/2023 in #front-end
How to manage mix-blend-mode: difference for Navbar
Yeah, you pretty much need the perfect combination of colors to get this to work if you aren't using black and white :(((
8 replies
KPCKevin Powell - Community
Created by omo on 7/25/2023 in #front-end
unable to fill/color svg
To set the fill within the CSS, you have to target individual paths (or whatever other child element) of the svg tag. In this case, adding something like this should work: 
.admin-sidebar__icon > path {
  fill: green;
}
.admin-sidebar__icon > path {
  fill: green;
}
4 replies
KPCKevin Powell - Community
Created by JOY on 7/24/2023 in #front-end
How can I make variables from 1 file present in another
like i've said, it's hard to help without seeing what you've tried
22 replies
KPCKevin Powell - Community
Created by JOY on 7/24/2023 in #front-end
How can I make variables from 1 file present in another
that doesn't contain any mapping in the astro file, i'm asking to see what you tried
22 replies
KPCKevin Powell - Community
Created by JOY on 7/24/2023 in #front-end
How can I make variables from 1 file present in another
would you post your code? kinda hard to help without that lol
22 replies
KPCKevin Powell - Community
Created by JOY on 7/24/2023 in #front-end
How can I make variables from 1 file present in another
yeah, i'm gonna have to try it out 0.o
22 replies