Disabling CSS Animations on Lower End Devices (Is this a good idea?)
Hi! I have a general design question on whether disabling css animations on devices with poor performance is a good pattern to follow or would be considered a bandaid fix to underlying performance issues.
I'll provide an example scenario with using Interaction Observer and a
blur
+ translate
animation to animate elements appearing on user scroll in the thread.
That is one scenario I'm running into where it lags on slower devices (for instance even my M1 macbook when on low battery) so I'm wondering if there's a reliable way to get a performance measure and disable the animation based on this....Grid - defining elements
Hi, I'm a beginner and I have a really trivial question. Is there any way to avoid writing p elements 17 times, but define them by grid?
Altering size with media queries
So i made this form and decided a good size for it is 50vw, the problem is when the screen gets to around 560-580px the space between it and the edges is too large and it gets squished. I wanted to make it 70vw using a media query but no matter how i type it the query refuses to target the form at all. Here are the html and 2 parts of the css:
<div class="form-parent row">
<div class="form row">
<form id="form1 col-6">
<div class="contact-1">...
My site is not being responsive
can someone help me make my website mobile responsive
beginner here. I tried using media queries but they don't seem to work, maybe it's me idk
https://codepen.io/haamid673/pen/yLwdKQE...
How to make header cells full height
https://codepen.io/kodee/pen/WNmqMKQ
Trying to fix the first column or maybe two. When the content in other cells is taller I need to adjust my absolute ones, any suggestions?...
How to make this smaller?
Hey there! Appreciate you guys taking time to help me out. I had a quick question as you see the three containers take up a good amount of space I was tryna screw around with it to make it smaller but can't because it keeps screwing with other stuff I'll send a CodePen of the HTML/CSS related to it if anyone can help make it better looking.
Updating @property with JS for animation on load
https://codepen.io/Miss-Fox/pen/BabgmjK?editors=0110
hopefully the video explains better with the visuals than i can type out but basically i am trying to update the :root custom property so that its value is equal to the respective javascript variable (days, hours, minutes) and then update that on each "box" class of '.option' so that the angle on that box matches (if days is 24, angle is 24). Its actually written as a percent not an angle but im not sure if that matters here?
Elements involved:
+@property for dark-grade-angle, dark-grade-day, dark-grade-min; ...
Special button effect on hover
Hi, does anyone have an idea on how to approach this effect for a button: https://www.poppr.be/en; where there is a kind of radial and linar multiple single color effect from the bottom?
Strike line continuing through text regardless of length…
Hello,
I am trying to recreate the styled text attached and I am running into problems. I have tried various ways to achieve this, and none quite work…
1. Pseudo Class
Works great until the line breaks...
Grid fill empty cells
I am trying to create a pattern like this:https://media.discordapp.net/attachments/1210495508909391912/1210495509165252658/email1708617448176.png?ex=65eac4cb&is=65d84fcb&hm=1ad3ae9230a783518eada731df9ebe8889e5eb9fcb3de117dcfb07814072f0d3&=&format=webp&quality=lossless
And I have come so far: https://svelte.dev/repl/96d54cb322ef42f68b85cd52e6795dac?version=4.2.12
But you may notice the empty cell between 2 and 5, and 6 and 9. I want the boxes to move up to fill the empty cells. Is this possible?...
Mantaining field alignment across rows
Hello, I'm working on a Svelte app for a medical history application. I'm trying to render out a list of patients with name and id data, last visit and an arrow to expand the card.
The issue I'm facing right now is that due to the characters not taking up the same horizontal space, there's a small miss alignment that I can't seem to fix.
Here's my code:...
How to work with a consumption API? (with Svelte)
I genuinely have no idea what I'm doing here. I'm watching some videos on people kinda using it, but it's all vanilla JS, I'm not really sure where I'm storing this data in Svelte.
In a nutshell, I want to use the Pokemon API to get say.. 10 pokemon, but I only want to use their images for my memory-card game, to replace the numbers I have there currently.
https://github.com/callum-laing?tab=repositories...
Use of breakpoints with intrinsic/fluid design
Hello,
Looking for ideas or feedback on breakpoints.
I like the simplification of fluid design and using clamp for text/margin/padding fluid design etc.......
Text overflow ellipses for a flex container
I have a flex container with 2 columns with an image in one and text in the second column. I want to terminate text with ellipses according to image height but I can't give a fixed aspect ratio or fixed height for an image.
Can someone help me with this?
https://codepen.io/AparAwasthi/full/ExMMJpw...
Responsive Design
I'm trying to interpret between these few variables here and just trying to make sure I understand them:
https://viewportsizer.com/devices/
So because some screens have high dpi or ppi, that's why CSS width/height comes in (I'm looking at a list for mobile devices)
...
How to animate slides using swiper.js ?
Could someone help me figure out how to create an image slider with pagination, where the center slide has an animation effect and the other two slides are on the left and right? I tried using swiper and focusable, but couldn't get the desired result. I have shared my code snippet for reference.
CSS Scroll Animation
I have multiple layers of this image. I want, on scroll the image zoom between 2 towers and fade out and fade in another image.
1 solution is, to animate this graphic using an editing tool and get the video file and convert the video to images, and then load these images in canvas frame by frame when scrolling
is there another way without animating this image using editing tool?...
How to render image that I'm fetching from from opensource API faster
I want to learn what are the ways to render high quality images that I'm fetching from from opensource API faster
so that it take less time to display those images what are the techniques one can use?
Tech: Reactjs
method of fetching: fetch(), axios...
Need Help improving my code
I'm trying to recreate this challenge, but I'm stuck on how I should have laid out my elements. I used grid but I'm not sure if i should include the testimonies in the bottom in the same grid or make that its own thing. And how I should I moves the ratings. I used position relative for the ratings but when the browser shrinks they over flow so I just wanted some advice on what I could do better and make my code more efficient.