Wait, have you always been saying "front-end friends"? I thought you said "friend and friends" 🤦🏼♂️
@Tiger__Man7 ай бұрын
😂😂😂😂 yeah i just now realise also
@salad_txt7 ай бұрын
Hahahaha I thought it was just me!
@BliitzPint7 ай бұрын
Haha same here :D
@luca.pettinato7 ай бұрын
Me too
@olinadeimbakar7 ай бұрын
Guilty too😂
@samwalker44387 ай бұрын
I thought Kevin was saying “hello my friend and friends” Front-End Friends makes so much more sense 😂
@dirkvandiepen18907 ай бұрын
I have been thinking that for 6+ months! Even knowing what Kevin actually means it still sounds more like "hello my friend-end friends"
@LennartKlein7 ай бұрын
Hahaha thank you soo much for clearing this up
@_zer09_7 ай бұрын
accidentally found out as well when I had CC on months ago 😅
@ivanbryukhov7 ай бұрын
No way!!! I thought the same for years and never ever doubted it. Now it makes much more sense. My life would never be the same... Now it is so obvious! Why would he even say "friend and friends", right?
@marcorieser7 ай бұрын
Today I learned 😁
@DatDat597 ай бұрын
Seeing repeat-x and repeat-y reminds me 2000s when we were using an image mapped to simulate shadows and radius around a block made of a table with 9 cells.
@gizmostudios7 ай бұрын
Oh wow that takes me back :'D Draw a button in Photoshop, add gradient, drop shadow, 9 slices and painstakingly write all the code for one button to reproduce! How much easier life's become for a web designer these days, thank god!
@codclever7 ай бұрын
Very thankful to have an nice coding support for our CSS and frontend issues. Love your videos man!
@clevermissfox7 ай бұрын
Love to learn about new obscure properties!! Background-repeat; space seems very valuable!
@TheRealMangoDev7 ай бұрын
thats bc it is
@brunopanizzi7 ай бұрын
6:10 Round is very useful for the hero section of a website that I'm making, the bg image is just a small 16 by 16 square repeating, and without round it always cropped off the last one because it's not the perfect size. Thanks for the tip, will be updating my site today!
@kirillsukhomlin30367 ай бұрын
You could have your logo rotated to connect edge points of 'f' letter. So background-repeat: round works with repeatable textures like that.
@GerritforBazeja7 ай бұрын
I used "round"for an image that was just to small to cover my background part for content. Not jet online.
@codclever7 ай бұрын
How the hell did you send this comment if the video was sent on 11:22 PM IST
@bharatbaraiya75527 ай бұрын
@@codclever Same question bruh😮
@drumming_cat7 ай бұрын
this video was posted an HOUR ago but this comment is from a DAY ago???
@chrispaschall55077 ай бұрын
These background repeat properties are cool. The star example was pretty good, but if it were me, I’d probably just get the svg code of the star, make a symbol tag of its code, and have JavaScript render SVGs with use tags in the DOM using a for loop that would execute every time the select field changed. Then let the flexbox gap property take care of the spacing from there after the stars are rendered. Less math involved that way.
@CirTap7 ай бұрын
I can see 'round' used with evenly spread grids where a background (svg maybe) "covers" the grid items which are otherwise unstylable. One could mimic border effects or separation lines between these virtual grid or flex items if the elements themselves are irregular but evenly spaced out. I recall a mini gallery where I had to mess with linear gradients and custom props to get simple separation lines between the gallery items that followed the size and width of the container. Messy business 😅
@knaughtilus7 ай бұрын
Did a project for school last year (it was movie/cinema related) and I wanted a decorative stripe resembling an old school film roll seperating my image and text on a card. I wanted a fixed width for it so I utilized background-image. My teacher wasn't happy that the shape was cropped at the end (as background-repeat usually does) and since I didn't know the height of the card background-repeat: round; really came in handy :) Bonus was that you can use it for mask-repeat too, so i threw a nice gradient on there as well. Sorry if you can't follow my description, I'll try to put it in a codepen later if I have the time :D but I found that a very good - and until today only - use case I ever had for it.
@MyDpop7 ай бұрын
I learn something new every time, thank you Kevin. 🤟This reminds me a bit of *border-image* . Another exotic and lost property 😏
@VideoNOLA5 ай бұрын
You should add a giant "CSS Cheat Sheet" wall poster to your merch store!! Leave nothing off!
@jacobwwarner7 ай бұрын
Regardless of supporting or opposing this, it will be really interesting to see how they restore the land previously submerged in the resevoirs. Also, they mentioned the two dams remaining in OR to mitigate flood waters, but what about the communities downstream in CA? I'm unfamiliar with the area, but Im curious if those small towns could be at risk of major floods if theyre not high enough above the rivers.
@mikaockerman8326 ай бұрын
Before I hear your use cases. I could see using round on abstract type images where aspect ratio is not as important, perhaps with a semi transparent overlay to dim them a little and set them as decoration behind some display images, like perhaps products or something.
@domanickharper7 ай бұрын
all this time, I thought he said friend and friends but front-end friends sounds nice too, a friend none the less
@mansurhamidov23197 ай бұрын
For gap to work properly it shouldn't be more than quarter of star-width. Just simple math there could work. Like computed gap: max(var(--gap), calc(var(--star-width)/4))
@Matt234887 ай бұрын
you could use `round` to take a simple image that perfectly tiles visually with itself to create some background patterns that are dynamic based on your resolution and aspect ratio. That could be kinda cool.
@DerClaudius7 ай бұрын
You can probably use it to implement different kinds of 9-patch-scaling if you set multiple backgrounds
@PascalHorn7 ай бұрын
One random semi-related fund of my last few weeks was, getting background color on an image to get it perfectly "scaled" to a parent box. Like: .parent { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: #ccc; } .parent img { width: 100%; height: 100%; padding: 20px; border-radius: 15px; box-sizing: border-box; object-fit: contain; // Magic; background-color: #fff; // } Even if the image has a random size like 200x100 pixels, this will fill the rest up with the background-color of white in this case. It becomes a filler color. With that logic, even a background-image like a radial gradient and background-size: cover should be interesting. And yes, the border-radius and padding on the image will be placed at the corners of the 200x200 pixels of the parent. Love these random stuff you learn after years and years along the way.
@nielslytzdk7 ай бұрын
A fun little demo, but I would not use this specific example in production, you are taking away data from the DOM which is critical for accessibility by rendering the stars as a background image. But still glad to learn new features that I didn't know existed 👍.
@Novacification7 ай бұрын
Another use case for space would be a background of sponsor logos. Maybe you have a sponsored event that needs a promo page with logos in the background and a small info box with event details in the middle. Sponsors don't care if it looks natural, they want their logo to be as visible as possible and preferably not cut off anywhere. You see this pattern used in the real world all over the place, e.g. in sports or at a red carpet event.
@eccenux7 ай бұрын
Space would work nice for most backgrounds that are covered by content. So there is some pattern on the left, content, pattern on the right. And you want the pattern to align to the sides. You can kind of cheat now and do two backgrounds, but using space would be so much easier 🙂
@atrus38237 ай бұрын
Background repeat round might work pretty well for a grid. I guess the lines stretching might look weird, but maybe it wouldn't be that noticeable. I think I'll try it out at some point
@Maseschine7 ай бұрын
For the space and round function I can see image textures coming to websites as their backgrounds.
@yanexy7 ай бұрын
repeat: space is a beauty, and your implementation also ☺
@mannixmd7 ай бұрын
Kevin blowing my mind one video at a time :D
@ellopropello7 ай бұрын
css is getting better and better :)
@VE00037 ай бұрын
2:24 or a square background texture/pattern that perfectly tiles
@Psyzenn7 ай бұрын
Maybe round for animations ? Like some cool distortion effect.
@BGdev3057 ай бұрын
Would have really been nice had you thrown some css fade animation. And 2x as nice with a fade and a growing size transform!
@sunflair-wa7 ай бұрын
I have a question. Using your star example, would you be able to use a clip path for the repeating image, or even a background-image of a radial gradient using a background size? Asking for a friend, which is me. :)
@Noritoshi-r8m7 ай бұрын
Have you done a How to make a proper Header video? I always struggle with background images x_X
@outpost317377 ай бұрын
You can use background-repeat: space repeat;
@aseemanand17 ай бұрын
How does your video work in PIP mode on youtube?
@blokche_dev7 ай бұрын
There's so much we can do with backgrounds.
@peterhorvath68597 ай бұрын
You could make a video on how to format a plain numeric cell value with thousand separators in css only! 1234561234123456781234567890 No js, no html modify. Or why not possible?
@Komentujebomoge327 ай бұрын
Have anyone any idea how to make button which appears on some scroll level, and by still going downwards it sticks into the place where it appeared? I am asking because I am working on button which takes us after click at the TOP of website, but by trying many own ideas and by trying looking for answers in the NET I barely can find anything about this topic.
@BliitzPint7 ай бұрын
Wait, you can set custom attributes on HTML tags and caculate with their values in CSS?? What is that magic??? 😮How does it work? How is it called? I want to know more of that.
@muhdkamilmohdbaki70547 ай бұрын
It puzzles me why I never watch any magician does CSS on their shows. The amounts of tricks they can perform are limitless and I still can't understand how they do it. All of these are beyond magic to me🤭😅.
@andriydamon83887 ай бұрын
do you know React?
@KevinPowell7 ай бұрын
I have used it, not sure if that means I know it though 😅
@RobertMcGovernTarasis7 ай бұрын
No not avFeF, a KP acquaintance
@RobertMcGovernTarasis7 ай бұрын
Virtual)
@TimeFlyBy7 ай бұрын
That logo hurts my eyes...
@the-real-pawook7 ай бұрын
idk if it's tiktok's bad influence or just me being weird, but I was instantly offended by having to watch 15 minutes of the video where it could have been a Shorts clip
@devileyes4u5 ай бұрын
IT'S PERFECT!!! using in prod, thank you Kevin you are CSS hero!
@pdizzlin7 ай бұрын
Lol…it’s funny the number of people that hear “friend and friends”. I always heard front-end friends myself! Funny how everyone’s brain hears different things l.
@gizmostudios7 ай бұрын
Wait... it's not? Which one is it? I also hear Friend and Friends :'D
@aram56427 ай бұрын
(In your life, find yourself a friend who'll greet you the way Kevin greets youtubers.)
@blu3tan7 ай бұрын
background-repeat: space is mindblowing 🤯
@klemensforster7 ай бұрын
Round is actually insanely useful! Imagine all the gaming websites using the cool stone or wood sign textures that begin and end with a texture and have a repeating texture filling the space between. The distortion would not be too bad, but it would ensure the sign to always be seamless.
@complainer4067 ай бұрын
Until you resize the window and it jumps from 7 copies of the image to 8 Cropping seems like a better option
@Mr.RobotHead7 ай бұрын
I remember the olden days when we used to have a background image that we'd repeat to make a nice tiled pattern. `round` is probably useful to keep those tiles _close enough_ to the original aspect ratio without cutting off a bit of the pattern. I can't really think of any other use, though.
@daviddonachie53337 ай бұрын
I know! That comment that everyone just uses "cover" is so much a thing of our big-bandwidth era. When I started, it was all about making 10px textures and then tiling them ... or 2px textures even! The idea of a non-repeating background was the werid thing.
@PacificDev7 ай бұрын
Great stuff as always! Kevin 👋 how did you manage to hide that little oblique bars on the bottom right corner of the resizable element?
@kirillsukhomlin30367 ай бұрын
If the gap is more than 1/nth of the size of the image (star), one won't be able to put more than n stars. Maybe even less (depending on how round is implemented). This example is a little artificial.
@BrankoStancevic7 ай бұрын
Cool feature, thanks! Have fun animating star rating example! :D I actually have some thoughts, but I need to try those out first.
@jamescat23867 ай бұрын
something makes me think if it was a high enough star count (so it's fine in this example) then you could instead of distributing the space, fit another star in, I mean obviously it's fine in this case but at a certain scale it breaks (maybe?)
@muchis7 ай бұрын
interesting, i learned something, but at the end that was honestly an overengineered flex + gap 😅
@slava_trushkin7 ай бұрын
Round option has one good use I can think of: repeating textures that have one pattern in middle and different on edges. It can also be followed by another element with a texture that fits it perfectly for edge element. I've been designing theme for RPG forum many years ago, this would have been so perfect.
@druharper7 ай бұрын
Nuggets of wisdom :)
@justingolden877 ай бұрын
You should make a fef hat that would be dope
@_dinesh7 ай бұрын
wow learned so much in this video. I didn't know you could set css variables from js by `document.body.style.setProperty('--star-count', e.target)`. Nicely done!.
@gizmostudios7 ай бұрын
Also good to know is you can get the CSS properties with style.getProperty() :)
@joll057 ай бұрын
I hadn't seen round before this, and I also think it's kinda weird when it stretches the image, but I played around with it and I think I found a more practical way of using it. If you combine it with a different repeat value (for example 'background-repeat: round repeat;') then it will resize the image equally in both directions so that it fits either horizontally or vertically (depending on which one is 'round'). This means that the image won't be cropped in the specified direction, but won't be unevenly stretched either. I can see that being used in something like a long background image, where you might not want the image to be cropped off the edge of the page, but don't mind it being cropped off the bottom.
@KorcentonАй бұрын
Exactly! round repeat is perfect when you want a pattern to not crop on the x axis. It'll resize without distortion, leaving a bit of cropping at the bottom of the page -- no biggie! I'm using this for a checkerboard pattern on my site: cropping on the right would look horrible, as if you're supposed to scroll horizontally. round repeat fixes that; it's space repeat without a gap :D
@vincentjacquet29277 ай бұрын
Nice demo. I would only add "print-color-adjust: exact" on the rating element to better support printing.
@harshbhardwaj60607 ай бұрын
Is it good using SVG's to create some moving things or should we use CSS for that. Whats your take on those people doing svg craziness.
@kevinphandy27 ай бұрын
I used this to add repeating side facing chevrons for a client. The designer had it as a leading element to various things. Used space to make it a responsive element changing the amount based on how much room there was.
@kaustavroy65427 ай бұрын
That is such a good use case. Thanks Kevin.
@TheLastSeason7 ай бұрын
Thank you Kevin! I love your videos)
@markboots_7 ай бұрын
Am I a nerd already knowing those values?
@KevinPowell7 ай бұрын
Most definitely 😆. But that's okay, at least you remember them. I actually did a short on `space` awhile back, and then completely forgot it existed until recently 😅.
@marsovac7 ай бұрын
This is very overcomplicated for something that just needs to show from 1 to 5 stars :P