home.social

#cssbasics — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #cssbasics, aggregated by home.social.

  1. Ana Tudor 🐯 @[email protected] ·

    In case you didn't know, if you have a border and the `border-color` isn't set, not even in the browser stylesheet, then the `border-color` defaults to `currentColor`.

    #CSS #code #coding #frontend #cssBasics #web #dev #webDev #webDevelopment

    #css #code #coding #frontend #cssbasics #web
  2. Ana Tudor 🐯 @[email protected] ·

    In case you didn't know, if you have a border and the `border-color` isn't set, not even in the browser stylesheet, then the `border-color` defaults to `currentColor`.

    #CSS #code #coding #frontend #cssBasics #web #dev #webDev #webDevelopment

    #css #code #coding #frontend #cssbasics #web
  3. Ana Tudor 🐯 @[email protected] ·

    In case you didn't know, if you have a border and the `border-color` isn't set, not even in the browser stylesheet, then the `border-color` defaults to `currentColor`.

    #CSS #code #coding #frontend #cssBasics #web #dev #webDev #webDevelopment

    #css #code #coding #frontend #cssbasics #web
  4. Ana Tudor 🐯 @[email protected] ·

    In case you didn't know, if you have a border and the `border-color` isn't set, not even in the browser stylesheet, then the `border-color` defaults to `currentColor`.

    #CSS #code #coding #frontend #cssBasics #web #dev #webDev #webDevelopment

    #webdevelopment #webdev #dev #web #cssbasics #frontend
  5. Ana Tudor 🐯 @[email protected] ·

    In case you didn't know, if you have a border and the `border-color` isn't set, not even in the browser stylesheet, then the `border-color` defaults to `currentColor`.

    #CSS #code #coding #frontend #cssBasics #web #dev #webDev #webDevelopment

    #css #code #coding #frontend #cssbasics #web
  6. Ana Tudor 🐯 @[email protected] ·

    #tinyCSStip Want the same border, but only for two edges, not for the others?

    Don't set borders on the two edges to the same value, set border, then override border-width. If you later need to make the border thicker or thinner or pink or green, you only need to make that change in one place.

    #CSS #cssBasics #code #coding #web #dev #webDev #webDevelopment #frontend

    #tinycsstip #css #cssbasics #code #coding #web
  7. Ana Tudor 🐯 @[email protected] ·

    #tinyCSStip Create a fancy double border with dashes in between without any pseudos and with minimal #CSS!

    The relevant code is just 3 simple CSS declarations!

    Live demo on @codepen

    codepen.io/thebabydino/pen/PwY

    #cssBasics #code #coding #frontend #web #dev #webDev #webDevelopment

    #tinycsstip #css #cssbasics #code #coding #frontend
  8. Ana Tudor 🐯 @[email protected] ·

    Basic #tinyCSStip.💡

    So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

    Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

    #css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

    #tinycsstip #css #code #csstip #csstips #csstricks