Complex CSS Backgrounds with a Single Property!?

[@DesignCourse]

Do me a sweet ol' favor and sub up already!

[@user-og9nl5mt1b]

@@sahithyanschannel2071 no fap is the secret of his knowledge.

[@ypn.official]

Can we use these to make rain drop background? Very thin-long seemingly irregular spaced? We may then maybe animate it to make raining animation?

[@PrasannaMestha]

I built a npm package called react-gradient-progress for adding gradient to circular progress bars. Do check it out

[@MarcJensan]

Only if you also buy a blue screen and switch between the two depending on what you are wearing.

[@Voyagermusix]

I subbed the shit out of your channel. this stuff is pure gold. thanks so much for the amazing content!

[@jayrajz7986]

.garry_simon's_t-shirt { background: transparent; }

[@ErrorDebug]

opacity: 0;

[@SnakeTwix]

rgba(0,0,0,0)

[@SnakeTwix]

@@neeronb Ids suck. Use classes even if u r using them once

[@SnakeTwix]

@@neeronb Yep, they functioning the same as classes. But since you can't use IDs again their usage becomes like, nothing. Even if you're using it only once, it doesn't mean that you won't need it again. Using classes everytime is a better idea, thzn using IDs. (Except forms)

[@patrickt975]

@@SnakeTwix Well, in reality you will have allways some container around, and use it like .idontcarecontainer #myid { background..

[@alfredoluengas5761]

Your a life saver! I thought it was going to take me forever to wrap my head around this. Thanks 🙏

[@bjmgraphics617]

The last one is like an Oriental rug. I can see a use for a gradient background showcasing wedding photos, a rock band website or even an RPG website like a Final Fantasy or Zelda showcase. Thanks

[@kapa4208]

Change your green screen background to repeating gradient.

[@aleksd286]

You can also do something like linear-gradient(circle, rgb.....)

[@charlieketchem266]

Good stuff, taught me about 2 gradient types I didn't know about. Very cool. 🙂

[@abhishreymittal]

I am already watching one of the reasons I subscribed your channel a long time ago... Great work and also nice funny starting...😁

[@MB-zj3er]

As a novice this was very interesting. Thank you for taking the time to make the video. I subbed to "pay" you back, I'll be checking out some of your other stuff.

[@allluckyseven]

Just to clarify: The values after the colors, in pixels, percentages, etc. are the positions of the color stops, not the amount of that color.

[@raggebatman]

That makes more sense, I thought it was a little weird when he said it was how much of the container it took up

[@jckf]

Yeah the way he explains this makes it seem like he doesn't understand it himself

[@sjn_]

Useful stuffs, I never actually thought of using gradients to create such. Thanks!

[@fernandorochaolivera2404]

Can't believe how much I can learn watching your videos. Thanks a lot bro, you're awesome.

[@19Blackrobot96]

Very Cool! I've tried conic gradients and my background is kind of hard to look at :D background: repeating-conic-gradient(at 111% -11%,transparent, white 0.02%, #bbbbbb 0.52%, #3a6d57 0.54%, #40bd96 1%, transparent 1.02%, transparent 1.7%), radial-gradient(at 100% 0%, #35a774 0%, #2a736f 100%) ;

[@-TheOddity]

how in tf, that looks awesome

[@elglact]

man i'm gonna make some animations with that, u mind?

[@FirstPersonOnUtube]

In vscode, you can hit alt-z to make all the code wrap into view if it’s longer than the window.

[@-ct-celcomtechniques2566]

2:10 Got me ! That was actually funny :-D

[@TheShouldersurfer]

Great work. I have a question. Does it effects web performance?

[@andrewravenholm3170]

I am currently learning how to do full stack coding and your channel is really cool

[@FullStackMaster]

Excellent tips on css! Background with one property

[@lewisone]

Super cool explaination.

[@mikul3122]

A javascript function to spit out a randomized css line that follows this pattern would be cool.

[@Diavolexxa97]

Gorgeous!! Dreaming about having a teacher like this...

[@morganbaker6894]

Scottish developers are delighted... A great video, I was unaware of how powerful linear gradient could be

[@variablemvp4288]

How to get this in full page

[@MohsenFarajYT]

this is what i call a great video :) thanks! i think you could use css in Qt so i think its use full even for app developing!

[@angelmarie2281]

I have that green linode tee shirt. I live in the same city their office is at and people confuse me for an employee.

[@hypergavs12]

Thanks for the first 2 minutes I learned a lot.. :D

[@Philliprgarcia]

Awesome information here.

[@VinceAggrippino]

11:13 "That value allows us to override..." It doesn't "override" anything. You're using the `background` shorthand property. _That_ value sets the `background-color` property while the rest of the parts you're using set the `background-image` property. I'm not sure if using a shorthand property counts as a single property.

[@bojannikolovski7250]

Hello. How to make a simple square repeating pattern with gradients?

[@OmnivusMusic]

Love the music choice.

[@xtunasil0]

2:18 ok dude, you have just won my thumbs up so easily.... I hope that the rest of the video is as good as this joke was! :D

[@dipsikhadutta6412]

Videos on icons plz!!

[@Charlie_904]

you should paint your neck green so we can floating head gary teaching us!

[@jason-bacalla]

how to put background image with this??

[@PaulMcCannWebBuilder]

You can simplify your code a bit - you can specify multiple color stops for adjacent colors that are the same. So: repeating-linear-gradient( 45deg, rgb(183, 0, 255) 0% 5%, transparent 5% 10% ); ... is equivalent to what you have on screen for the repeating-linear-gradient at 11:21. edit: double position color stops don't work in IE, Edge, : (

[@garlar]

Of course it doesn't.

[@namesare4fools]

MY GOD THIS IS GOOD

[@michaelharings9913]

Like the humor. You should do tutorials on vines. 5 second tutorials!

[@chase2496]

The self bashing after your fake ending convinced me to subscribe. I love goofy stuff like that for some reason :D Keep up the great work!a

[@RommelCuneta97]

Very interesting css property!

[@willtubestilo]

¡Genial, muchísismas gracias por compartir :)!

[@adityashinde3864]

Please make more videos on CSS.

[@j.almadhaji]

Awesome video .. thank you coach!

[@masond4856]

How does your page auto-reload?

[@queenslurp2018]

Live server. Basically any text editor has some plugin, or extension, or package that you can download and install and use for a live server. So everytime you save code or make a change in your project folder, the local server will refresh the page

[@aidanwansbrough7495]

That is brilliant, love that pattern :-)

[@DawnChatman]

Love what they've done with gradients, wish I had a project where I could actually use them. By the way, what editor are you using?

[@justinflowers9380]

He is using Visual Studio Code

[@DawnChatman]

@@justinflowers9380 Thanks!

[@justinflowers9380]

Np

[@PaulMcCannWebBuilder]

You need to get a green turtle neck shirt, so it's just you're head floating on screen!

[@babyyoda756]

haha LOL

[@Deeeeeeeeeeeeeeeeeeeeeeeeez]

It was a good one, dude :D

[@hulkmarcopolo]

What PC app do you use for the coding?

[@hetiikzclan]

visual studio from microsoft

[@jacquesduplessis6175]

Haha, cool stuff. We'll just call you background: red; from now on then!

[@bw2962]

Are all these effects which you implementing bad for page speed?

[@NikhilAdiga]

Really cool video!

[@reallight_]

Im pretty new to coding so i need some help, everytime i try to make a code background: linear-gradient(red,blue) repeat - * - it automaticly makes it this, on save background: linear-gradient(red,blue), repeat - * -

[@reallight_]

how do i turn this off

[@yassinesafraoui4540]

I guess using this and with the help of computer calculations we can make some designs that are done using SVG, will it affect performances of paint.

[@passord1d493]

tnx you have help me

[@maximoarauz8115]

There's a video in your ad tho

[@yassinesafraoui4540]

you didn't talk about the radial gradient, as you said in the beginning of the video.

[@Ghostfancoder]

Thank you sir!

[@HuynhLuong227]

wow amazing, thank pro

[@stefanolencina]

what kind of sl is this?

[@georgeliss4015]

a flying head? it's not Halloween, yet!! #Spooky

[@TH4445]

can i do half image and half color on %

[@Arctect]

Awesome!!!

[@randygean9531]

What extension did you use for the color?

[@yetanothr]

You mean for the rgb circle? None, it's default VS code feature. You have to hover over the color code and it shows up.

[@nicoregules]

pro tip: tab each property inside each function so you don't end up with a endless line of characters

[@sreyasc.v4802]

How do you automatically refresh the page?

[@bhupinderbhattarai244]

its live server extension in vscode

[@SolidousMdz]

Really cool. That against an SVG or some other image type, what are the advantages? Can you animate that?

[@laxsjo.]

It's mostly cool. It's purely CSS! At least I'm not aware of any real advantages.

[@alexandros-markovits]

Wo, very very interesting :)

[@lenseeing829]

what app is he using?

[@maiz9153]

What app are u using?

[@temporalsavior1311]

What kind of addon is he using to show all the changes in-live in Microsoft Visual Code?

[@Draxen]

In VS code, look up live server :)

[@netsaosa4973]

This is cool

[@mourchidsoufian899]

How to create theme wordpress

[@khushisaraswat8902]

Will it work on notepad ++ also ??

[@enchanted_games]

yeah but it's way easier in vs code

[@charlieketchem266]

I thought that first part was funny af.😆

[@anuraghazra4772]

Your head is floating :D

[@SuperMichael996]

What software are you using for editing css? (I see at 2:40 that you actually get a drop-down list, which is a thing that I most desire) Visual Studio apparently. Thanks , nobody!

[@iclick5616]

You can show php

[@bigbrave2440]

Ok here is a dumb question for you not for me. Ok, so im a 26 years old just into the world of programming and coding. I want to learn front end developer because it seem the easiest compare to the other jobs but i know when i get to the use of this i could study the for back end developer i really want to be a full stack developer or maybe software engineer( there are couple of ppl on youtube that dont have college degree and they are software engineer). As for now i have to start front end developer. Here is what i know i need to learn HTML, CSS, JAVASCRIPT, a FRAMEWORK(there are three angular, react, i forgot the one name), SASS, JAVASCRIPT LIBRARY, COMMAND LINE(idk what that is), WORDPRESS, IMAGE EDITOR, WIREFRAME TOOLS, MODULE LOADING/BUNDLING TOOLS PROJECTS. Is there anything thatbim missing before i start learning? P.s i found couple of websites to learn, to practice from beginner to advance, and questions what they ask you in interview. Im organizing so i could study correctly. As well, when im comfortable with my knowledge ill ask for an internship

[@MarshallSC1]

Just join the "Free Code Camp" and do the curriculum. It will guide you and teach you everything about FrontEnd from start to finish. learn.freecodecamp.org/

[@prince9816]

Super Bro

[@gautamsjain]

2:02 Can't blame you for forgetting the body. You don't have one in this video.

[@nummerzeven7031]

Why do you want this if you can make/choose other backgrounds :)

[@M36-v9l]

In fact, it is just CSS function~~

[@Omniwoof]

It was funny!

[@TheGeekosDen]

you need to fix your camera angles, as a film maker, my eyes hurt. Other than that, good video as always!

[@ТюзМайский]

not bad

[@CristianAlexandruRadu]

great 🙃

[@TheShawn_v]

2:20😂😂😂😂😂

[@ilhamsa01]

wow.. i recently know

[@weshuiz1325]

do me a favor and keep those jokes in it's something else this time :D

[@decayd5305]

Are you wearing green t shirt?

[@priyammascharak8400]

That got real confusing real fast

[@rohansuggala2540]

first! great video

[@Horoe]

I find this mildly interesting but other videos are.

[@frat8853]

Actually, that was funny

[@iamalittler]

Bro, your head is ready too low in the centre.

[@qwerty9118]

"boring little checkered pattern" me: :(

[@MightyIndians]

You pretty much looks like Bear Grills!!

[@spectralquill1810]

Man its really hard to create complex css backgrounds

[@MightyIndians]

Someone please write the whole background property from the video to copy

[@yunusdurdygulyyew9270]

yeah you are funny:)