ACSS 101.19: Global Border System

Поделиться
HTML-код
  • Опубликовано: 9 фев 2025

Комментарии • 35

  • @derekshort
    @derekshort Месяц назад +1

    I love the concentric radius feature! Thanks! 🙏🏻

  • @RiyazShihabdeen
    @RiyazShihabdeen Месяц назад +1

    Wow..I was thinking about the concentric radius for some time. Really glad you guys have implemented it in ACSS. Kevin, Thank you so much for your time and effort in bringing this informative tutorial and for all the implementations. 👍👍

  • @siig9905
    @siig9905 Месяц назад +1

    Havent watched it yet but i already kno, gonna be FIRE 😎 happy new year to you and yours as well

  • @thorsten-roever
    @thorsten-roever Месяц назад

    Thanks

  • @AndreSalata
    @AndreSalata Месяц назад +1

    Great lesson! Thank you.
    Is that possible to use a gradient border within the recipe? I remember you did something like that in the button lesson video.

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +4

      No, because CSS doesn't accept gradients in the border field. We can look at adding compatibility for gradient borders, though.

    • @AndreSalata
      @AndreSalata Месяц назад +1

      @ would be a nice feature

  • @derekshort
    @derekshort Месяц назад +1

    I’m curious. Why did you choose to place your screen recording on a gradient background with padding, thus shrinking the viewing space and making it a little difficult to read? 🤔

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +1

      Because I knew it would get your attention

  • @stripedgoat
    @stripedgoat Месяц назад +3

    Great! My question is why would we keep the border framework enabled with a zero value instead of just disabling it and then enabling it in case we do happen to need the global borders later on?

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +1

      If you have border classes turned off, all it outputs is a few variables, one of which is the global radius variable which shouldn't be turned off.

    • @stripedgoat
      @stripedgoat Месяц назад +1

      @@AutomaticCSShm, i don’t really understand it but all in all it shouldn’t be turned off, okay

  • @derekshort
    @derekshort Месяц назад +1

    In which frame rate did you record yourself? 🤔 The motion looks odd sometimes, and it’s not the lighting.

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +1

      It’s a glitch in the software I was testing

  • @obito-269
    @obito-269 Месяц назад +1

    🙏👍

  • @SteveLaw78
    @SteveLaw78 Месяц назад +3

    I have to disagree about having the radius on by default. If I built dozens of sites with ACSS (which I have) before you added the feature, then when the plugin is updated, every one of them suddenly has an arbitrary radius applied to all my images. Now I have to go into all those sites and set the radius to zero. That seems like the antithesis of not being a chump.

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +1

      It’s not turned on by default on upgrades so this isn’t a problem.

    • @SteveLaw78
      @SteveLaw78 Месяц назад +2

      @@AutomaticCSS That hasn't been my experience. I've literally had to go back to every website I built and turn it off

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +4

      no, there was a bug when it was first released that turned it on but that was quickly fixed.

  • @tudorcelstan
    @tudorcelstan Месяц назад

    Damn! The new cinematic lighting with the Rembrandt triangle and all. Really popping!

  • @TotallyRens
    @TotallyRens Месяц назад +1

    how would i override the radius on an image with a figure tag while keeping auto radius on?

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +1

      Depends on what purpose you're overwriting it for. What's the intention?

    • @TotallyRens
      @TotallyRens Месяц назад +1

      @@AutomaticCSS Just design choice. Let's say i have an image in the top of a card for example, and i want only the top left and right corners to have a radius, how would i overwrite the bottom ones?

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад +3

      @ border-radius: var(-radius) var(-radius) 0 0;

    • @TotallyRens
      @TotallyRens Месяц назад

      @@AutomaticCSS Thanks! that's what i've been doing but couldn't get it to work, i didn't realize the overflow. Just me being an idiot 😂

  • @dovber
    @dovber Месяц назад

    Thanks Kevin!
    if i understand this good, why can't we add variables to the border settings?

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад

      Not sure what you mean. Can you elaborate?

    • @dovber
      @dovber Месяц назад

      @@AutomaticCSS Why can't Acss have a variable class for the bricks border panel settings?

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад

      @@dovber There's no reason to.

  • @Kh4N
    @Kh4N 25 дней назад

    But this actually only works if each corner has the same radius value - because i only see one input field. So no separate t/r/b/l values possible or am i missing something?

    • @AutomaticCSS
      @AutomaticCSS  24 дня назад

      No you can have unique radius values but this is not required for most implementations

    • @Kh4N
      @Kh4N 21 день назад

      @@AutomaticCSS so i would have to setup my own radius class or define a var() right?

  • @bartekbachnio6869
    @bartekbachnio6869 20 дней назад

    shouldn't the equation in the recipe be "border-radius: calc(var(--radius) + var(--padding) / 2 + var(--border-size))" instead of "border-radius: calc(var(--radius) + var(--padding) / 2 ?"

    • @AutomaticCSS
      @AutomaticCSS  10 дней назад

      Can’t remember now without rewatching the video. Pretty sure the calc works just fine.