title
Complex CSS Backgrounds with a Single Property!? #repeatinggradients

description
https://promo.linode.com/designcourse/ - Use code 'DESIGNC19' to get $20 credit on your new Linode account! https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, we're going to check out some crazy CSS backgrounds you can create while harnessing the power of repeating linear (or radial) gradients. This affect gives you the ability to create very complex and interesting backgrounds for your projects. Browser support is quite good! (97%) https://caniuse.com/#feat=css-repeating-gradients Here's the site referenced in the video: http://gradientmagic.com Let's get started! #css #frontend #ohwow - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Complex CSS Backgrounds with a Single Property!? #repeatinggradients', 'heatmap': [{'end': 149.56, 'start': 124.585, 'weight': 1}, {'end': 669.643, 'start': 653.059, 'weight': 0.742}], 'summary': "Explores css background magic, linear gradients, repeating linear gradients, and using rgba, demonstrating diverse backgrounds with a single css property and showcasing linode's one-click apps and pricing starting at $5 per month, with details on color stops, percentages, units, transparent values, rotation, and adjusting gradient values.", 'chapters': [{'end': 65.772, 'segs': [{'end': 65.772, 'src': 'embed', 'start': 24.219, 'weight': 0, 'content': [{'end': 28.961, 'text': "Simple pricing starting at $5 per month ensures there's no hidden fees or surprise bills.", 'start': 24.219, 'duration': 4.742}, {'end': 35.204, 'text': 'So sign up with the link below and use this code right here to receive a free $20 credit on your Linode account.', 'start': 29.281, 'duration': 5.923}, {'end': 37.306, 'text': "Hey everyone, what's up? Gary Simon of courseetra.com.", 'start': 35.444, 'duration': 1.862}, {'end': 42.73, 'text': "So today we're going to be talking about backgrounds and the interesting things that you can do with them with CSS background property.", 'start': 37.326, 'duration': 5.404}, {'end': 44.672, 'text': 'So, just to give you a few examples,', 'start': 43.211, 'duration': 1.461}, {'end': 54.801, 'text': "at gradientmagic.com there's a lot of interesting backgrounds that probably some of you didn't even know you could create solely with a single CSS background property.", 'start': 44.672, 'duration': 10.129}, {'end': 65.772, 'text': 'And these backgrounds are achievable through the linear gradient property and also the repeating linear gradient and also repeating radial gradient as well.', 'start': 55.501, 'duration': 10.271}], 'summary': 'Linode offers simple pricing starting at $5 per month with a $20 credit for new sign-ups. css background properties are explored for creating interesting backgrounds.', 'duration': 41.553, 'max_score': 24.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw24219.jpg'}], 'start': 0.089, 'title': 'Css background magic', 'summary': "Explores creating diverse backgrounds with a single css property and highlights linode's one-click apps and pricing starting at $5 per month.", 'chapters': [{'end': 65.772, 'start': 0.089, 'title': 'Css background magic', 'summary': "Discusses the possibilities of creating various backgrounds using a single css property and mentions the sponsor linode's one-click apps and simple pricing starting at $5 per month.", 'duration': 65.683, 'highlights': ["The chapter discusses the possibilities of creating various backgrounds using a single CSS property and mentions the sponsor Linode's one-click apps and simple pricing starting at $5 per month.", 'At gradientmagic.com, there are interesting backgrounds achievable through linear and repeating gradients using a single CSS background property.', 'Linode provides servers for deploying apps, sites, and services with simple pricing starting at $5 per month and a free $20 credit using a specific code.']}], 'duration': 65.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw89.jpg', 'highlights': ['Linode offers servers for deploying apps, sites, and services with simple pricing starting at $5 per month and a free $20 credit using a specific code.', 'Gradientmagic.com showcases interesting backgrounds achievable through linear and repeating gradients using a single CSS background property.', "The chapter explores the possibilities of creating various backgrounds using a single CSS property and mentions Linode's one-click apps and simple pricing starting at $5 per month."]}, {'end': 532.432, 'segs': [{'end': 117.021, 'src': 'embed', 'start': 87.212, 'weight': 4, 'content': [{'end': 91.776, 'text': "has sent me a green t-shirt and therefore I'm using a green screen so it gets keyed out.", 'start': 87.212, 'duration': 4.564}, {'end': 94.095, 'text': 'Cool stuff.', 'start': 93.595, 'duration': 0.5}, {'end': 95.195, 'text': "All right, so let's begin.", 'start': 94.415, 'duration': 0.78}, {'end': 100.837, 'text': "So all we're doing here, I have an index dot HTML, no HTML tags we're using for this tutorial.", 'start': 95.275, 'duration': 5.562}, {'end': 104.858, 'text': "And we're just using, uh, we're just linking here to our CSS main CSS file.", 'start': 101.297, 'duration': 3.561}, {'end': 107.939, 'text': "And I'm using SAS here, although we're not using any features.", 'start': 105.218, 'duration': 2.721}, {'end': 108.919, 'text': "I don't even know why I did it.", 'start': 107.999, 'duration': 0.92}, {'end': 112.08, 'text': "It's just kind of a, um, you know, a creature of habit.", 'start': 108.939, 'duration': 3.141}, {'end': 117.021, 'text': "So let's go ahead and we're going to start with very absolute basics.", 'start': 112.5, 'duration': 4.521}], 'summary': 'Tutorial on setting up green screen, linking css file, and using sas for basics.', 'duration': 29.809, 'max_score': 87.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw87212.jpg'}, {'end': 152.203, 'src': 'heatmap', 'start': 124.585, 'weight': 1, 'content': [{'end': 128.007, 'text': "it's a little bit late, my brain's not working too well.", 'start': 124.585, 'duration': 3.422}, {'end': 130.128, 'text': 'background red all right.', 'start': 128.007, 'duration': 2.121}, {'end': 132.611, 'text': "that's the tutorial, and i hope you learned a lot.", 'start': 130.128, 'duration': 2.483}, {'end': 137.534, 'text': "i'm gonna go and i'll see you guys soon, all right.", 'start': 132.611, 'duration': 4.923}, {'end': 138.835, 'text': "so that's me trying to be funny.", 'start': 137.534, 'duration': 1.301}, {'end': 141.357, 'text': "i probably shouldn't do that ever again.", 'start': 138.835, 'duration': 2.522}, {'end': 143.498, 'text': "let's go ahead and get started for the real purpose.", 'start': 141.357, 'duration': 2.141}, {'end': 146.18, 'text': "so we're going to start with linear gradient.", 'start': 143.498, 'duration': 2.682}, {'end': 146.54, 'text': 'all right.', 'start': 146.18, 'duration': 0.36}, {'end': 149.56, 'text': 'so linear gradient.', 'start': 146.54, 'duration': 3.02}, {'end': 152.203, 'text': "we're not going to start with the repeating linear gradient.", 'start': 149.56, 'duration': 2.643}], 'summary': 'Tutorial on linear gradient with some humor, but not repeating linear gradient.', 'duration': 27.618, 'max_score': 124.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw124585.jpg'}, {'end': 253.204, 'src': 'embed', 'start': 216.689, 'weight': 0, 'content': [{'end': 221.338, 'text': 'So to right, for instance, Very, very simple.', 'start': 216.689, 'duration': 4.649}, {'end': 235.322, 'text': 'We can also put in, along with each of the color stops, we can specify a unit or a value of some sort in terms of percentages.', 'start': 222.078, 'duration': 13.244}, {'end': 239.383, 'text': 'So we want this to go 80% to show mostly red.', 'start': 235.702, 'duration': 3.681}, {'end': 245.859, 'text': 'And then we can just put in, maybe blue will be at 90%.', 'start': 239.403, 'duration': 6.456}, {'end': 246.199, 'text': 'All right.', 'start': 245.859, 'duration': 0.34}, {'end': 253.204, 'text': 'So you can control how much of the color is occupying the available space in the container.', 'start': 246.54, 'duration': 6.664}], 'summary': 'Demonstrating color control using percentages for red and blue.', 'duration': 36.515, 'max_score': 216.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw216689.jpg'}, {'end': 336.565, 'src': 'embed', 'start': 307.7, 'weight': 1, 'content': [{'end': 310.141, 'text': 'So linear, repeating linear gradients.', 'start': 307.7, 'duration': 2.441}, {'end': 321.126, 'text': 'So this will allow you to specify linear gradients essentially, but you can separate them and you can repeat them a bunch of times.', 'start': 310.161, 'duration': 10.965}, {'end': 326.548, 'text': "So you create like a pattern effect of your gradients, right? So let's get an example.", 'start': 321.306, 'duration': 5.242}, {'end': 329.209, 'text': "So let's just do red, purple.", 'start': 326.648, 'duration': 2.561}, {'end': 331.695, 'text': 'All right.', 'start': 331.414, 'duration': 0.281}, {'end': 336.565, 'text': "so if you don't, basically it's only going to repeat once.", 'start': 331.695, 'duration': 4.87}], 'summary': 'Explaining the concept of repeating linear gradients with an example of red and purple colors.', 'duration': 28.865, 'max_score': 307.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw307700.jpg'}, {'end': 478.685, 'src': 'embed', 'start': 448.397, 'weight': 3, 'content': [{'end': 455.799, 'text': "and also working with what's called transparent as a substitute for one of these color values.", 'start': 448.397, 'duration': 7.402}, {'end': 459.88, 'text': "That's where you can really get into the interesting checkered pattern sort of thing.", 'start': 456.459, 'duration': 3.421}, {'end': 468.142, 'text': "All right, so let's go ahead and let's put in first a linear gradient.", 'start': 460.44, 'duration': 7.702}, {'end': 473.003, 'text': "So what's cool about the background property is you can specify.", 'start': 468.262, 'duration': 4.741}, {'end': 478.685, 'text': 'multiple different things as such as linear gradient.', 'start': 473.983, 'duration': 4.702}], 'summary': 'Working with transparent as a color substitute for a checkered pattern in a linear gradient.', 'duration': 30.288, 'max_score': 448.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw448397.jpg'}], 'start': 65.792, 'title': 'Css linear gradients', 'summary': 'Covers the basics of linear gradients, specifying color stops, percentages, and units, and then delves into repeating linear gradients, including the use of multiple color values, pixel specifications, and rotating gradients.', 'chapters': [{'end': 156.547, 'start': 65.792, 'title': 'Css basics tutorial', 'summary': "Explains the basics of css, including using a green screen for the sponsor's ad, linking css files, and demonstrating linear gradient.", 'duration': 90.755, 'highlights': ['The speaker uses a green screen due to a sponsor sending a green t-shirt for the pre-roll ad videos.', 'Explains the process of linking to a CSS main file and using SAS, despite not using any features.', 'Demonstrates the use of linear gradient in CSS.']}, {'end': 532.432, 'start': 156.547, 'title': 'Css linear gradients and repeating linear gradients', 'summary': 'Covers the basics of linear gradients, specifying color stops, percentages, and units, and then delves into repeating linear gradients, including the use of multiple color values, pixel specifications, and rotating gradients.', 'duration': 375.885, 'highlights': ['The chapter covers the basics of linear gradients, specifying color stops, percentages, and units. Describes the process of creating a simple linear gradient from one color to another, specifying color stops, percentages, and units for the gradient.', 'Repeating linear gradients are discussed, including the use of multiple color values, pixel specifications, and rotating gradients. Explains the concept of repeating linear gradients, the use of multiple color values, pixel specifications, and the ability to rotate gradients for creating more complex patterns.', 'Transparent can be used as a substitute for color values in creating interesting checkered patterns. Demonstrates the use of the transparent value as a substitute for color values to create interesting checkered patterns in gradients.']}], 'duration': 466.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw65792.jpg', 'highlights': ['Covers the basics of linear gradients, specifying color stops, percentages, and units.', 'Repeating linear gradients are discussed, including the use of multiple color values, pixel specifications, and rotating gradients.', 'Demonstrates the use of linear gradient in CSS.', 'Transparent can be used as a substitute for color values in creating interesting checkered patterns.', 'Explains the process of linking to a CSS main file and using SAS, despite not using any features.']}, {'end': 822.961, 'segs': [{'end': 562.564, 'src': 'embed', 'start': 532.432, 'weight': 0, 'content': [{'end': 537.696, 'text': "so let's start to mix this with a repeating linear gradient as well.", 'start': 532.432, 'duration': 5.264}, {'end': 547.902, 'text': "so i'm going to get rid of that and put a comma here and we're going to specify repeating linear gradient.", 'start': 537.696, 'duration': 10.206}, {'end': 548.722, 'text': 'all right.', 'start': 547.902, 'duration': 0.82}, {'end': 551.324, 'text': "so we're going to put in 45 degrees as well.", 'start': 548.722, 'duration': 2.602}, {'end': 554.025, 'text': "you don't have to, but i'm just choosing to do that.", 'start': 551.324, 'duration': 2.701}, {'end': 562.564, 'text': "we're going to put an rgb 183, 0 and 255, and after that we're going to put zero percent.", 'start': 554.025, 'duration': 8.539}], 'summary': 'Using repeating linear gradient with 45° angle and rgb 183, 0, 255 for 0% position.', 'duration': 30.132, 'max_score': 532.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw532432.jpg'}, {'end': 669.643, 'src': 'heatmap', 'start': 596.871, 'weight': 1, 'content': [{'end': 603.053, 'text': 'Nothing has really changed, but what we need to do is specify an actual color value right before repeating linear gradient.', 'start': 596.871, 'duration': 6.182}, {'end': 608.375, 'text': "So I'm going to put in RGB 216, 118, and 255.", 'start': 603.574, 'duration': 4.801}, {'end': 611.617, 'text': 'That happens to be like this pinkish color.', 'start': 608.375, 'duration': 3.242}, {'end': 613.077, 'text': "It's a little bit lighter than this.", 'start': 611.657, 'duration': 1.42}, {'end': 615.398, 'text': 'Save that.', 'start': 614.898, 'duration': 0.5}, {'end': 624.118, 'text': "And we're not seeing anything quite yet because we need to fill this out a little bit more.", 'start': 619.275, 'duration': 4.843}, {'end': 627.319, 'text': 'So we have it rotated at 45 degrees.', 'start': 624.238, 'duration': 3.081}, {'end': 633.503, 'text': "We have a color stop from 0% and also to 5%, but they're the same color.", 'start': 627.78, 'duration': 5.723}, {'end': 637.085, 'text': 'Next, what we want to do is add in transparent.', 'start': 634.143, 'duration': 2.942}, {'end': 641.277, 'text': "We'll say going from 5%.", 'start': 638.386, 'duration': 2.891}, {'end': 653.059, 'text': "And this will create kind of like a hard color stop because we're going 5% and then 5% is going to end or start off where this one ends and then put transparent again 10%.", 'start': 641.277, 'duration': 11.782}, {'end': 658.041, 'text': "So there's going to be from five, basically a total of 5%.", 'start': 653.059, 'duration': 4.982}, {'end': 662.862, 'text': "It's going to be just transparent and there's going to be a hard color stop just like that.", 'start': 658.041, 'duration': 4.821}, {'end': 669.643, 'text': "Very, very cool stuff, isn't it? So you may be wondering like this value right here, we remove that.", 'start': 664.102, 'duration': 5.541}], 'summary': 'Specified rgb 216, 118, 255 for a pinkish color, added transparent for a hard color stop, and rotated at 45 degrees.', 'duration': 61.17, 'max_score': 596.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw596871.jpg'}, {'end': 757.327, 'src': 'embed', 'start': 725.756, 'weight': 2, 'content': [{'end': 727.116, 'text': "We're just gonna have two anyways.", 'start': 725.756, 'duration': 1.36}, {'end': 728.517, 'text': 'Did I just change that color? Yeah, I did.', 'start': 727.196, 'duration': 1.321}, {'end': 729.317, 'text': 'Stop that.', 'start': 728.957, 'duration': 0.36}, {'end': 730.618, 'text': 'There we go.', 'start': 730.298, 'duration': 0.32}, {'end': 734.12, 'text': "All right, so now we're gonna have a repeating linear gradient as well.", 'start': 731.058, 'duration': 3.062}, {'end': 740.462, 'text': "And this time we're gonna change the direction in terms of the rotation.", 'start': 734.96, 'duration': 5.502}, {'end': 741.603, 'text': 'So linear gradient.', 'start': 740.542, 'duration': 1.061}, {'end': 744.999, 'text': "So this time it's gonna be negative 45 degrees.", 'start': 743.069, 'duration': 1.93}, {'end': 751.422, 'text': "And then we're going to have our RGBA.", 'start': 747.179, 'duration': 4.243}, {'end': 757.327, 'text': "It's going to be the same exact, except we're going to be using alpha this time, if that makes sense.", 'start': 751.542, 'duration': 5.785}], 'summary': 'Applying repeating linear gradient with rotation at -45 degrees and rgba with alpha.', 'duration': 31.571, 'max_score': 725.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw725756.jpg'}], 'start': 532.432, 'title': 'Repeating linear gradient', 'summary': 'Demonstrates creating and adding a repeating linear gradient with specific color stops, degrees, transparent values, rotation angle, and alpha value, allowing visibility of the underlying layer, and adjusting color stops.', 'chapters': [{'end': 687.635, 'start': 532.432, 'title': 'Creating repeating linear gradient', 'summary': 'Demonstrates how to create a repeating linear gradient with specific color stops and degrees, including the use of transparent values to create a hard color stop.', 'duration': 155.203, 'highlights': ['The chapter explains how to create a repeating linear gradient with specific color stops and degrees, including the use of transparent values to create a hard color stop.', 'The tutorial details the process of specifying color stops using RGB values and percentages to create a desired gradient effect.', 'It also highlights the importance of specifying an actual color value before the repeating linear gradient to ensure the desired visual outcome.']}, {'end': 822.961, 'start': 687.635, 'title': 'Adding repeating linear gradient', 'summary': 'Demonstrates the process of adding a repeating linear gradient to the design, including specifying the rotation angle and alpha value, allowing visibility of the underlying layer, and adjusting color stops.', 'duration': 135.326, 'highlights': ['The chapter demonstrates the process of adding a repeating linear gradient, including specifying the rotation angle and alpha value, allowing visibility of the underlying layer, and adjusting color stops.', 'The repeating linear gradient is specified with a rotation angle of -45 degrees and an RGBA color value of 183, 0, 255 with an alpha value of 0.5, enabling visibility of the underlying layer.', 'Color stops are adjusted to 5% and 10% transparency, allowing for a gradual transition in the gradient.']}], 'duration': 290.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw532432.jpg', 'highlights': ['The chapter explains how to create a repeating linear gradient with specific color stops and degrees, including the use of transparent values to create a hard color stop.', 'The tutorial details the process of specifying color stops using RGB values and percentages to create a desired gradient effect.', 'The repeating linear gradient is specified with a rotation angle of -45 degrees and an RGBA color value of 183, 0, 255 with an alpha value of 0.5, enabling visibility of the underlying layer.', 'Color stops are adjusted to 5% and 10% transparency, allowing for a gradual transition in the gradient.', 'It also highlights the importance of specifying an actual color value before the repeating linear gradient to ensure the desired visual outcome.']}, {'end': 1215.528, 'segs': [{'end': 884.443, 'src': 'embed', 'start': 849.48, 'weight': 2, 'content': [{'end': 849.74, 'text': 'All right.', 'start': 849.48, 'duration': 0.26}, {'end': 857.063, 'text': "so let's experiment a little bit further, just to show that you can do a lot more than just a boring little checkered pattern like this,", 'start': 849.74, 'duration': 7.323}, {'end': 862.185, 'text': "even though it looks kind of cool, because we do have this cool gradient where it's more so than just a checkered pattern.", 'start': 857.063, 'duration': 5.122}, {'end': 865.947, 'text': "Let's take a look at our middle line right here, our first one.", 'start': 863.106, 'duration': 2.841}, {'end': 868.909, 'text': "Let's add a few more color stops to it.", 'start': 866.787, 'duration': 2.122}, {'end': 879.098, 'text': "So we're going to begin at the end here and we're going to specify an RGB value using the same values right here.", 'start': 869.57, 'duration': 9.528}, {'end': 884.443, 'text': "I'm just going to copy this and let's see here.", 'start': 879.118, 'duration': 5.325}], 'summary': 'Experimenting with adding more color stops to create a cool gradient effect.', 'duration': 34.963, 'max_score': 849.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw849480.jpg'}, {'end': 1003.399, 'src': 'embed', 'start': 974.49, 'weight': 4, 'content': [{'end': 982.074, 'text': 'And you could see if you, for instance, A lot of this is all about experimenting with these values big time, by the way.', 'start': 974.49, 'duration': 7.584}, {'end': 982.734, 'text': 'So like.', 'start': 982.454, 'duration': 0.28}, {'end': 995.443, 'text': "if you change this to like 18%, it's going to decrease the amount of times that the pattern repeats, especially when you're using percentage values.", 'start': 982.734, 'duration': 12.709}, {'end': 1000.678, 'text': "So if you shoot this all the way up to like, I don't know, 30%.", 'start': 995.703, 'duration': 4.975}, {'end': 1003.399, 'text': 'We only see it changing a couple times.', 'start': 1000.678, 'duration': 2.721}], 'summary': 'Experimenting with percentage values impacts pattern repetition.', 'duration': 28.909, 'max_score': 974.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw974490.jpg'}, {'end': 1098.125, 'src': 'embed', 'start': 1064.933, 'weight': 3, 'content': [{'end': 1067.915, 'text': "So we'll save it, see what that has done there.", 'start': 1064.933, 'duration': 2.982}, {'end': 1075.16, 'text': 'Now we can really start to see them interact and have yourself a little bit more of a not necessarily a dynamic,', 'start': 1068.095, 'duration': 7.065}, {'end': 1078.222, 'text': 'but a more interesting looking background gradient.', 'start': 1075.16, 'duration': 3.062}, {'end': 1082.86, 'text': "now let's get to the part where we change these to pixel values.", 'start': 1078.959, 'duration': 3.901}, {'end': 1089.362, 'text': "now, all right, so we have our bottom line, which is what we're going to focus on now, and we have a rgba.", 'start': 1082.86, 'duration': 6.502}, {'end': 1098.125, 'text': "we're going to change this here from percentages to pixels and we are going to do this for each one so that you can see how these interact with each other,", 'start': 1089.362, 'duration': 8.763}], 'summary': 'Changing background gradient from percentages to pixels for interactive effect.', 'duration': 33.192, 'max_score': 1064.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw1064933.jpg'}, {'end': 1162.954, 'src': 'embed', 'start': 1109.309, 'weight': 0, 'content': [{'end': 1113.491, 'text': "And then for transparent right here, this is going to go from 30 pixels to let's say 45 pixels.", 'start': 1109.309, 'duration': 4.182}, {'end': 1122.998, 'text': 'And there you go.', 'start': 1122.338, 'duration': 0.66}, {'end': 1136.322, 'text': 'So you can see how drastically it changed just by experimenting with and adjusting the values from the relative unit of percentages here to the more absolute unit of pixels.', 'start': 1123.118, 'duration': 13.204}, {'end': 1147.506, 'text': "And that's how you can really begin to expand on and create some of the crazy, um really intricate background patterns that you can see.", 'start': 1137.122, 'duration': 10.384}, {'end': 1154.09, 'text': 'that you can see, for instance, on sites like this, gradientmagic.com, which is really cool, these checkered patterns.', 'start': 1147.506, 'duration': 6.584}, {'end': 1157.872, 'text': 'these are all created using the methods that i just showed you.', 'start': 1154.09, 'duration': 3.782}, {'end': 1162.954, 'text': 'um, as you can see, you can get quite crazy with a lot of these.', 'start': 1157.872, 'duration': 5.082}], 'summary': 'Experimenting with unit values can create intricate background patterns, as seen on gradientmagic.com.', 'duration': 53.645, 'max_score': 1109.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw1109309.jpg'}, {'end': 1215.528, 'src': 'embed', 'start': 1197.154, 'weight': 6, 'content': [{'end': 1199.015, 'text': 'of course it does work in the browser.', 'start': 1197.154, 'duration': 1.861}, {'end': 1201.559, 'text': 'Awesome, awesome stuff.', 'start': 1200.558, 'duration': 1.001}, {'end': 1204.18, 'text': 'All right, so hopefully you found that interesting.', 'start': 1202.479, 'duration': 1.701}, {'end': 1208.723, 'text': 'If you did, as always, make sure to subscribe and click on the bell notification icon.', 'start': 1204.24, 'duration': 4.483}, {'end': 1214.367, 'text': 'I upload a couple videos per week on front-end development, graphic design, and all that cool stuff.', 'start': 1209.124, 'duration': 5.243}, {'end': 1215.208, 'text': 'All right, see you guys soon.', 'start': 1214.387, 'duration': 0.821}, {'end': 1215.528, 'text': 'Goodbye.', 'start': 1215.228, 'duration': 0.3}], 'summary': 'Browser-compatible content; 2+ weekly videos on front-end dev and graphic design.', 'duration': 18.374, 'max_score': 1197.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw1197154.jpg'}], 'start': 822.961, 'title': 'Using rgba and changing gradient values', 'summary': 'Covers using rgba for gradient patterns, exploring the impact of adjusting rgb values and experimenting with percentage values. it also delves into changing gradient values from percentage to pixel units, resulting in intricate background patterns similar to those found on gradientmagic.com.', 'chapters': [{'end': 1003.399, 'start': 822.961, 'title': 'Using rgba in creating gradient patterns', 'summary': 'Discusses the use of rgba in creating gradient patterns, demonstrating the impact of adjusting rgb values on pattern appearance and the ability to experiment with percentage values to modify pattern repetition.', 'duration': 180.438, 'highlights': ['The use of RGBA values to create gradient patterns and the impact of adjusting RGB values on pattern appearance.', 'Experimenting with percentage values to modify pattern repetition and the impact of changing these values on the pattern appearance.', 'Demonstrating the process of adding color stops to create a gradient effect and the use of RGBA and transparent values to achieve the desired pattern appearance.']}, {'end': 1215.528, 'start': 1003.939, 'title': 'Changing gradient values to pixel units', 'summary': 'Demonstrates the process of changing gradient values from percentage to pixel units, resulting in a significant visual impact, ultimately enabling the creation of intricate background patterns similar to those found on gradientmagic.com.', 'duration': 211.589, 'highlights': ['The process of changing gradient values from percentage to pixel units results in a significant visual impact, enabling the creation of intricate background patterns similar to those found on gradientmagic.com.', 'Experimenting with and adjusting the values from percentages to pixels leads to drastic changes in the background gradient, for example, from 30 pixels to 45 pixels.', 'The methods demonstrated can be utilized to create complex background patterns, as seen on sites like gradientmagic.com, showcasing the versatility and potential of the technique.', 'The speaker encourages viewers to subscribe for more videos on front-end development and graphic design, signaling the educational nature of the content.']}], 'duration': 392.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/muE2B0Zylbw/pics/muE2B0Zylbw822961.jpg', 'highlights': ['Changing gradient values from percentage to pixel units results in significant visual impact, enabling creation of intricate background patterns similar to those found on gradientmagic.com.', 'Experimenting with and adjusting values from percentages to pixels leads to drastic changes in the background gradient, for example, from 30 pixels to 45 pixels.', 'Demonstrating the process of adding color stops to create a gradient effect and the use of RGBA and transparent values to achieve the desired pattern appearance.', 'The use of RGBA values to create gradient patterns and the impact of adjusting RGB values on pattern appearance.', 'Experimenting with percentage values to modify pattern repetition and the impact of changing these values on the pattern appearance.', 'The methods demonstrated can be utilized to create complex background patterns, as seen on sites like gradientmagic.com, showcasing the versatility and potential of the technique.', 'The speaker encourages viewers to subscribe for more videos on front-end development and graphic design, signaling the educational nature of the content.']}], 'highlights': ['Linode offers servers for deploying apps, sites, and services with simple pricing starting at $5 per month and a free $20 credit using a specific code.', 'Gradientmagic.com showcases interesting backgrounds achievable through linear and repeating gradients using a single CSS background property.', "The chapter explores the possibilities of creating various backgrounds using a single CSS property and mentions Linode's one-click apps and simple pricing starting at $5 per month.", 'Covers the basics of linear gradients, specifying color stops, percentages, and units.', 'Repeating linear gradients are discussed, including the use of multiple color values, pixel specifications, and rotating gradients.', 'Transparent can be used as a substitute for color values in creating interesting checkered patterns.', 'The chapter explains how to create a repeating linear gradient with specific color stops and degrees, including the use of transparent values to create a hard color stop.', 'The tutorial details the process of specifying color stops using RGB values and percentages to create a desired gradient effect.', 'The repeating linear gradient is specified with a rotation angle of -45 degrees and an RGBA color value of 183, 0, 255 with an alpha value of 0.5, enabling visibility of the underlying layer.', 'Color stops are adjusted to 5% and 10% transparency, allowing for a gradual transition in the gradient.', 'It also highlights the importance of specifying an actual color value before the repeating linear gradient to ensure the desired visual outcome.', 'Changing gradient values from percentage to pixel units results in significant visual impact, enabling creation of intricate background patterns similar to those found on gradientmagic.com.', 'Experimenting with and adjusting values from percentages to pixels leads to drastic changes in the background gradient, for example, from 30 pixels to 45 pixels.', 'Demonstrating the process of adding color stops to create a gradient effect and the use of RGBA and transparent values to achieve the desired pattern appearance.', 'The use of RGBA values to create gradient patterns and the impact of adjusting RGB values on pattern appearance.', 'Experimenting with percentage values to modify pattern repetition and the impact of changing these values on the pattern appearance.', 'The methods demonstrated can be utilized to create complex background patterns, as seen on sites like gradientmagic.com, showcasing the versatility and potential of the technique.']}