- From: jsnkuhn via GitHub <sysbot+gh@w3.org>
- Date: Mon, 15 Aug 2022 19:12:44 +0000
- To: public-css-archive@w3.org
jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-backgrounds] possible examples/diagrams for `border-image` == The `border-image` spec (https://drafts.csswg.org/css-backgrounds/#border-image) is currently light on examples. I wonder if some practice use cases would help folks understand what `border-image` is used for and maybe use it more? here's a common corners only pattern Using SVG: https://codepen.io/jsnkuhn/pen/XWEpxVM?editors=1100 ![Screenshot 2022-07-30 at 08-30-02 XWEpxVM](https://user-images.githubusercontent.com/1286791/184700343-9cde6fbc-68ca-4fbf-9fd4-eb89a7d28f4e.png) Gradient examples: I don't think that gradient as border-image-source was always possible cross browser? This might explain the lack of examples. But pretty sure it has consistent support now borders on just top and bottom: https://codepen.io/jsnkuhn/pen/VwzZVEP ![Screenshot 2022-07-30 at 08-46-52 VwzZVEP](https://user-images.githubusercontent.com/1286791/184700372-fd09006e-adea-4c17-8c53-ef23652d45e0.png) repeating linear gradient barber pole left border: https://codepen.io/jsnkuhn/pen/WNRrYV?editors=0110 ![Screenshot 2022-07-30 at 08-56-04 Repeating-linear-gradient border-image](https://user-images.githubusercontent.com/1286791/184700413-de36ffcc-eff9-476d-b525-8e067b8a5c0e.png) border-image-outset: https://codepen.io/jsnkuhn/pen/ZGodKB?editors=1100 ![border-image-outset](https://user-images.githubusercontent.com/1286791/184700441-7dfaec0f-8c34-4d69-984b-fb7f006cbf8b.png) `border-image` shorthand with labels: https://codepen.io/jsnkuhn/pen/eWzpyz ![border-image-shorthand-labeled](https://user-images.githubusercontent.com/1286791/184700578-f107096f-541b-4ca1-a4a3-51251f7b50ec.png) `border-image` shorthand area has no examples right now.... Should probably be similar to how `background` shorthand area in spec (https://drafts.csswg.org/css-backgrounds/#background) is handled Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7608 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 15 August 2022 19:12:46 UTC