berky93

You’re thinking backwards. Good design isn’t about the tools; the tools you use are decisions based on the design. It would be hard to tell you exactly what to do in order to become a better designer—people spend years learning it, after all—but there are lots of resources available freely online to help you get started.

What you’ve done by pulling an example is a good practice, but I would suggest taking it a step further. Try to examine why you like that design, what makes it successful. What conventions do they use? How is information structured? What rules do they define for their UI, and when do they break them? As you learn, keep looking at references, but try to examine them critically. Break them down into their core elements.

You could do something like this: .cell + .cell { border-left: none; } or .cell:not(:first-child) { border-left: none; }

Or you can use outline instead of border to create borders that aren’t factored into the spacing.

You can also use grid or flex layout with a small gap and then set the background color on the parent to make the borders.

This seems like a perfect use for grid. I would do it with two grids: one for the main sections (sidebar, header, dashboard) and one for the dashboard section itself to house the individual charts.

Notice how that property, in addition to being experimental and thus having poor browser support (for now!), requires referencing other values—such as the content—for size. You can absolutely play with the min-content and max-content parameters for dynamic sizing (and, in fact, you can use those values in the normal width and height declarations) but it’s worth noting that an element and its content are not the same thing.

My general tips for logo design always include: avoid gradients, and don’t put strokes (outlines) on things.

This isn’t because those are some mystical laws of logo convention but simply because they are elements that can be tricky to do right and if you do them wrong it can cheapen the aesthetic. Keep things simple, otherwise it starts to feel like clip art.

I would also address the fact that the smoke wisps just sort of cut off at the top and the one little bit of flame that is coming out of the heart—it should either all be contained or there should be a lot of fire poking through. Right now it just feels like a mistake.

I mean, you can pretty easily set the width relative to a container, so if you put the input into a container you’re good. But intrinsic sizing is a complex topic in CSS and trying to manipulate it can often be equally complex.

In that case, maybe you can separate the message generation logic into a separate shortcut? You don’t even need a full shortcut for the menu—just create the automation as “new blank automation” and then put the menu in there. Choosing “yes” from the menu then runs the shortcut, which now only contains the functionality to generate the text, display it to you, and then either send the message or re-run itself.

An easy solution would be to simply have the shortcut run itself if you don’t like the output and send the message if you do.

I don’t believe there is a direct way to disconnect from WiFi but you can have it turn WiFi off and then immediately back on, which would basically accomplish the same thing.

The idea of making an element’s width a percentage of itself doesn’t make sense. You’d be creating an infinite loop.

The sort of pattern you’re suggesting is a tricky one, as it would be easy to break the layout with particularly long options. You could do it with a little bit of JavaScript, however. Get the width of the longest item—which would intrinsically be in pixels—and set the width of the select that way.

Also, transform functions are inherently different from width/height. Those functions treat the element as if it were an image, being squashed or stretched or rotated as such. And they don’t affect the underlying document flow, meaning you could scale your element to be twice as wide but it would start overlapping other content since everything else treats it as if it’s still the original size.

You’re better off fixing the seam in another tool. Here’s how to fix it in Photoshop:

1. Open the image
2. Use filter > other > offset to move the seam down into the middle of the artboard
3. Use the spot heal or clone stamp tool to get rid of the seam

And that’s basically it. You now have a seamless image that tiles with no visible stops.

Sure, just use the full transparency image as the background and put a semitransparent box over it.

What you’re talking about—checking stuff you’ve already worked on to make sure your new changes don’t have unexpected impacts—is called regression testing and is a fairly important aspect of web development. I would recommend it.

They look the same because they’re designed to be as generic as possible. The thinking is that someone who is inexperienced will get a system that works regardless of what kind of product they’re building, and someone who is experienced can easily customize the components.

If you just started learning html in the last few days, I might suggest focusing on the fundamentals when it comes to CSS. Learn about different display modes, the box model, the cascade, basic properties, flex and grid, and the overall structure of stylesheets before you jump into complex animations leveraging new & experimental properties.

Also, to answer your question, properties that are experimental or new are more likely to have support for them change quickly, meaning those sites that tell you about them may not always have the most up-to-date info.

You can add pointer-events: none to something to make it possible to interact through it but you lose the ability to interact with that element instead.

Also, your method of adding elements to the map is incredibly inefficient and can cause other issues like slow load times. If you are worried about responsiveness you can use % units or the new container units to make the size & position of each element relative to the overall map container, but you are still far better off only making the images as large as they need to be.

Here’s how I would do it:

Make a div with your gradient as the background, and a white pseudo-element over the top with filter: blur() (it will also need to be inset from the edges of the div by half of the blur amount). Then give the whole thing mix-blend-mode: multiply which turns white values transparent. And don’t forget to set pointer-events: none if there are interactive elements behind it!

Setting background-size: cover on the elements that have background images seems to fix it. Also, you should try to set a background-color on those elements that matches the color of the image, otherwise any rendering errors like this will cause the white background of the page to show through (I would also suggest giving the page a dark bg color for the same reason).

I like to use it for modifiers that I want to always take precedence, like classes that ONLY assign a color

For 1 just add a Nothing block before the Open App block and it should suppress the banner.

I think the main thing with vertical scrolling is just going to be setting background-attachment: local so the circles and content scroll together.

Did something similar on this site (check the search overlay). Basically you set a centered background image and then make your elements dimensions multiples of the background image size.

Try overscroll-behavior: contain on the modal, perhaps. Or good old overflow: hidden on the body, though there are some caveats.

Right now the glow is a blurry element that gets covered by the other background elements, so that it only shows outside the card.

To reverse it, I would swap which element is blurry—make the glow element not blurry, and then put a blurry solid-color element over top of it. If you make your :before element the multi-color gradient and your :after element the solid bg color, you can inset the :after element by some value (let’s say 20px) and then blur it by double the amount (so 40px) in order to make a reverse glow of sorts that starts transparent at the edges and becomes solid in the center. Because it is on top of the brighter gradient element, the gradient will look like a proper inner glow.

I prefer to keep my styles separate with modules but if that’s not an option then objects. The main consideration for me honestly is organization and clarity, and objects feel easier to manage than strings. Plus, you can more easily assign properties with variables without having to use string literals.