Relative Path's for background-image URL
Hey guys, can anyone help me understand why only the first url path is working?
i need a little help with svg
i want the shadow to appear under the vector not under the fulll box is there a way to do that
Code or no-code
Hi! Just joined. Studying backend and learning frontend on my free time to become full stack. Just learned HTML and CSS, working on jS (know the basics, now just going DOM and web specific things). I understand the importance of knowing how to code and how everything works to have a good foundation for everything else so I’m planning to make a couple more pages just using HTML and CSS and push those to the limits of their capabilities, but wondering for the future what is the best/most popular/m...
Fixing infinite scroll animation bug
Hi everyone, newbie web developer here. I'm building a website using Tailwind CSS and Vanilla JS in which I've created an infinite scrolling images based on Kevin's video here: https://www.youtube.com/watch?v=iLmBy-HKIAw
I've made some personal changes to it and now would like to add an additional functionality whereby when you click on the arrow buttons it will change the images shown. The issue now is that the JS script that I've added messes up the animation so when the images loop, there's a noticeable 'jump'.
I initially encountered this when I was changing this from horizontal to vertical but I managed to follow along Kevin's instruction to fix the issue as he encountered this issue as well in the video. But for the life of me I can't figure out what's wrong here. ...
Scroll animations relation to overflow
Kevin's video on scroll animations was really fun, and I have been implementing some progressive enhancement on my sites. I am, however, running into a weird quirk. I couldn't figure out what was happening until I installed the scroll driven animation Chrome extension.
For these examples I am using a simple
.fade-in
animation†. This works well for the post-card
s I have on the home page††, but not for img
's†††, and I figured out it's because I have overflow: hidden
set on a parent element in the DOM.
†https://github.com/frankstallone/frankstall.one/blob/main/src/css/animation.css#L1 ...Applying Radius to Clip Path. Need Help
Hi everyone I need help to create this but I failed every time to create this in html and css
I dont want to use svg Instead I use clip path but no radius is applied to it please give me the solution...
How to use Google Calendar API to fetch events without final user authentication
Hello,
I would like to implement on my portfolio a page that allows user to see my google calendar and book an event to my calendar.
I'm using Next.js and the library FullCalendar. My idea was to fetch all events from Google Calendar API and feed them into FullCalendar. But it seems that you can't fetch all events from a calendar without calling the authentication method, but from what I get, the authentication method open a popup and allow the final user to connect....
Ellipsis without fixed width
I want to show the description on one line and add ellipsis at the end.
With
overflow-hidden overflow-ellipsis whitespace-nowrap
, I have to set fixed width which distorts the layout of the table.
Is there a way to do this without setting fix width....Create an underline effect using clip-path and svg
Happy new year to everyone!
I've been working a lot with svg, maybe not in the best way, but lately I've discovered the clip-path property and now I'm trying to figure out how it works.
I'm trying to add this svg -that pretends to underline some words-to a <span> that wraps the text that I want to underline, which is inside of an h1 tag.
The problem is that I can't see the svg, no matter which way I try....
FrontEnd Mentor Challenge - How to fix background image property.
Hey Guys, I'm trying to solve a challenge from FrontEnd Mentor, now at the final fase, I'm trying to add the 2 background images as you can see on the screenshot I upload it. How can I make the bottom right image to span all the way to the bottom and be responsive?
https://codepen.io/Almopt/pen/ExMVdWW...
Container - grid area - Naming
Hello!
I watch Kevins video's almost every day in lunch time and i'm amazed by some solutions :)! Thanks
I'm working on my base theme and looking into the video about "Grid area container" but im not sure yet if i want to apply these code. I'm talking about this video: https://www.youtube.com/watch?v=c13gpBrnGEw...
I cannot understand this.. kindly help
I want the blue and red boxes to align with like colours beneath but there seems to be this gap that always persist (even with gap 0). and it seems impossible to center this entire layout vertically (the entire layout , without 100% height of viewport). Can someone explain why and suggest some possible solutions with explanations? I hope you kindly cooperate since i am still on my learning phase.
React SEO
How I can create seo optimized website with react or make the existing react website seo friendly?
Stop CSS fading when scrolling?
I added a fade effect to the bottom of a scrollable div with text to emphasize scrolling, but the idea is that when you reach the bottom, aka, there's no more text, I want that fade to cease. I tried the animation-timeline property but I'm not getting any results, any ideas?
I used the following code
`body {...
Resize screen issue
So the first picture shows how it looks regualrly. But when I resize my screen to smaller the text starts getting out of range like this picture
Layouts
I'm new to front-end, it's been a month so far.
When I look at this, I struggle to approach it. Do I use two boxes? Right now, I'm learning flex-box.
Conclusion: I'm struggling on how to do layouts....
Help with highlighting a singular list element on click.
Click target is highlighted, while other elements, if they were ones being highlighted beforehand, lose it.
JS in this example is what I was suggested to do here some time ago:
https://codepen.io/DovahTheKiin/pen/WNmQOqM
...
Two different colors in the text
Guys, how do I make my text, when it is in the black part, have a white color and when it is in the light part, it will have a dark color?
I tried cloning the text and putting the other in a dark color, and I tried positioning them on each background using the z-index but I couldn't.
Github repo: https://github.com/sircarloschaves/art-gallery-website
Live page: https://sircarloschaves.github.io/art-gallery-website/...
I need help
I need help from you! I can't figure out why the progress container is not visible when the width is larger than 700px.
How can I use webpack5 and postcss7 with es6 import syntax
I have a website built using TS and SASS then compiled down to vanilla es6 JS and CSS. The compiled code then gets built into a compressed production ready version, using webpack, I want to use webpack to remove unused css, autoprefixer and cssnano.
The problem is there isn't very clear information on configuring webpack with es6 modules. Currently I don't have any errors, but whenever I run my webpack build script nothing changes between the compiled code and the production code.
Here's the code...