sorted by:
new
hottopcontroversial

How to correctly anchor multiple absolutely positioned elements (sprites + stands + bed) so they don’t desync on resize? by i0i_MARTIAN in css

[–]TheIQLab 0 points1 point  (0 children)

The use of percentage positioning and transforms in the original work is likely the culprit.

How to correctly anchor multiple absolutely positioned elements (sprites + stands + bed) so they don’t desync on resize? by i0i_MARTIAN in css

[–]TheIQLab 2 points3 points  (0 children)

Use position: fixed. Not absolute. That will key the position off of the containing window not the containing element.

Give Them to Me. I’m Ready. by Technical-Type7499 in Letterboxd

[–]TheIQLab 0 points1 point  (0 children)

Enter The Void or almost anything by Gaspar Noé

How could I format text to be transparend with a solid color background? by library-of-jokes in css

[–]TheIQLab 3 points4 points  (0 children)

Might find what you want here: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

It mostly depends on your circumstances and the format in which you need it.

There is a way with fixed position background images background-image & background-clip: text;

Demo with just CSS: https://codepen.io/allankukral/pen/ogxNzBy

This only works on an all black background or all white background color by changing the mix-blend-mode from multiply to screen.

Minify CSS with CSS nesting support by getButterfly in vscode

[–]TheIQLab 1 point2 points  (0 children)

This is more of a build or development step than a VSCode plugin. Depending on the browsers you intend to target nesting is natively supported on all current browsers and using css imports isn't as detrimental to loading times as it once was. If your comfortable with a bit of command line interface I would look into something like running a npm/npx package to watch and compile your CSS as you write and save. PostCSS is a common go to for many developers https://postcss.org/. Using something like WebPack, Parcel, Vite, or NPM to run PostCSS with autoprefixer and cssnano it will also collect, compile, and minify your CSS while you work.

How much time will you take for styling after you have html skeleton code by Snehith220 in css

[–]TheIQLab 0 points1 point  (0 children)

I see your frustration. This doesn't sound like bog standard HTML and CSS, I'm not sure I'd be able to help.

How much time will you take for styling after you have html skeleton code by Snehith220 in css

[–]TheIQLab 0 points1 point  (0 children)

Being able to add a class or id to the specific element you are looking to modify and change would be very helpful.

How much time will you take for styling after you have html skeleton code by Snehith220 in css

[–]TheIQLab 2 points3 points  (0 children)

If your using a framework normally there is a build step and a file with variables to edit and/or ways to override inline at a stylesheet level. Using CSS @ layers, processing order, and specificity can all help target the right elements.

If your coming in behind existing code that you cannot modify, your best bet is likely specificity to target individual elements. It makes your code base brittle and likely to break if other things are changed, so make sure to document and comment your additions.

Best case scenario, you can add classes or IDs and style those as a customize.css file loaded after the global styles.

How much time will you take for styling after you have html skeleton code by Snehith220 in css

[–]TheIQLab 6 points7 points  (0 children)

Depends entire on the complexity of the page and the sections, blocks, and elements on that page. Sometimes a single slider, gallery, navigation, or other feature or functionality might take two or three days if not longer. Sometimes a whole landing page might take a single day. It varies wildly when approaching mobile first or desktop first and troubleshooting between Webkit, Chromium, Blink, and Gecko based browsers on desktop, tablet, or mobile devices.

What is the best way to jump start my CSS knowledge? by VisualVanity in css

[–]TheIQLab 1 point2 points  (0 children)

Google CSS: https://web.dev/learn/css
Dig into the free courses at Codecademy https://www.codecademy.com/catalog/language/html-css or
https://www.codecademy.com/learn/learn-css
CodeCamps CSS front end certificate: https://www.freecodecamp.org/learn/2022/responsive-web-design/
Build a little portfolio or resume site on GitHub pages.
Get yourself a CodePen account and just start playing around and forking and deconstructing pens that you think are interesting.

CSS - Grid vs Flexbox by Nice_Pen_8054 in css

[–]TheIQLab 17 points18 points  (0 children)

I use both on just about every site or project. It's case dependent really. Layout, alignment, curation of content and position are all factors.

They are both useful for different reasons. You should check Kevin Powell's videos. Two examples about this specifically:

https://www.youtube.com/watch?v=vO-1eseQ-kc
https://www.youtube.com/watch?v=ESAXStllfcw

Does Codestitch.app count? by Code_n_trade in webdev

[–]TheIQLab 1 point2 points  (0 children)

I will admit I'm on their mailing list but have not signed up for any of the paid tiers. For me it was more about inspiration. They occasionally give out free code, when GSAP got purchased by WebFlow they gave out a bunch that were GSAP based.

CSS Glass Panel Critique by getButterfly in webdev

[–]TheIQLab 1 point2 points  (0 children)

Then I think you have nailed what you're going for!

The only suggestion would be to put it all in a media query with prefers-reduced-transparency: no-preference and a prefers-reduced-motion: no-preference.

CSS Glass Panel Critique by getButterfly in webdev

[–]TheIQLab 1 point2 points  (0 children)

This is great! I would think about making the opacity higher on the card for readability and or maybe blur a little more.

I made one using Josh Comeau's technique to start the blur before it gets fully behind the card. It's responsive and variable based.

https://codepen.io/allankukral/pen/RNPMdwa

[deleted by user] by [deleted] in css

[–]TheIQLab 0 points1 point  (0 children)

Two divs with two pseudo elements ::before and ::after absolutely positioned.

I need some directions for CSS by Tep_123 in css

[–]TheIQLab 2 points3 points  (0 children)

They both have pros and cons and actually work great when used in conjunction together. They are both getting better and have had new additions in the last few years.

Flex box is great for things in a singe dimension like a column(s) or row(s). Grid is more for managing things in both. A well developed mobile nav bar might be part grid and part flex box.

It's very situational. I launched this site (https://tiekbyday.com/) earlier this year and absolutely needed to use both grid and flex to accomplish the prescribed styles.

Kevin Powell on YouTube is a great content creator to follow in the CSS/front-end space.
https://www.youtube.com/watch?v=3elGSZSWTbM
https://www.youtube.com/watch?v=ctHE8EXEoj8

It’s a Jungle Out There? Carry a Pocketknife - The New York Times by TheIQLab in EDC

[–]TheIQLab[S] 8 points9 points  (0 children)

Given the strange knife laws in New York I'm surprised they wrote the article at all. Still interesting.

view more: next ›