Superior CSS borders (animations, shapes, object-fit) — internet design tutorial



Borders are one of many few issues on the internet that contribute to a component’s measurement, except the aspect has specific dimensions set.

This lesson covers the right way to set CSS border radius properties, border types, border colours — and expands into animations, overflow, and much more superior CSS properties like object-fit, which can be utilized to realize completely round, constant picture parts. We’ll additionally cowl CSS border types that contain totally different border colours on the identical aspect, together with animated transitions on beveled edges.

00:00 – Introduction
00:48 – Borders
01:27 – Shapes
03:48 – Sides & edges
04:40 – Bevels
05:24 – Animated transitions
06:55 – Recap

———-
Get began with Webflow: https://wfl.io/2r7cVUW

https://webflow.com

https://fb.com/webflow

source

29 thoughts on “Superior CSS borders (animations, shapes, object-fit) — internet design tutorial”

  1. I don't hear the "th" at the end of him saying "width"… so it sounds like he's always saying "wid".
    We are supposed to be pronouncing the "th" right? Or have I been living lie O _ o

    Reply
  2. What about a border around the actual image of an img element that has object-fit:cover? The border is on the img's box, not the actual image itself…which is irritating.

    Reply
  3. Amazing platform, and even more amazing teacher. The way Webflow creates their tutorials and the tone of which he speaks is so engaging. Congratulations to making tutorials interesting!!

    Reply

Leave a Comment