title
Style Fancy Buttons: CSS Tutorial (Day 1 of CSS3 in 30 Days)

description
Learn how to style fancy buttons using CSS in this tutorial for beginners. ⭐️Files you need ⭐️ 💻Fancy Buttons Code: https://www.dropbox.com/sh/hk6mxsmrc4pa4cq/AABgDxxRrsaganm0QVjVuTJZa?dl=0 💻All tutorials in this series need this "_theme-styles" directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0 This video works as a stand-alone tutorial but is also day 1 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU CSS3 in 30 days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Style Fancy Buttons: CSS Tutorial (Day 1 of CSS3 in 30 Days)', 'heatmap': [{'end': 720.168, 'start': 676.785, 'weight': 0.728}, {'end': 931.063, 'start': 887.642, 'weight': 0.765}, {'end': 2586.622, 'start': 2535.646, 'weight': 0.76}, {'end': 3170.882, 'start': 3124.918, 'weight': 1}, {'end': 3339.391, 'start': 3296.205, 'weight': 0.792}], 'summary': 'This css tutorial covers day one of css3 in 30 days, demonstrating the creation of various fancy buttons, including facebook-style buttons with box shadow and 3d effects, 3d buttons, stylish css buttons with hover effects and animations, toggle switch ui buttons, and form element styling, with practical examples and detailed guidance.', 'chapters': [{'end': 187.527, 'segs': [{'end': 32.338, 'src': 'embed', 'start': 0.049, 'weight': 1, 'content': [{'end': 3.453, 'text': "Hey, what's up? Welcome to day one of CSS3 in 30 days.", 'start': 0.049, 'duration': 3.404}, {'end': 12.202, 'text': "My name is Brad Hussey and I'm gonna be helping you out over the next 30 days or so to learn CSS3 by actually building a bunch of things.", 'start': 3.493, 'duration': 8.709}, {'end': 17.328, 'text': "So day one is the very beginning and we're gonna be getting started with some pretty cool stuff.", 'start': 12.342, 'duration': 4.986}, {'end': 20.772, 'text': "So let me show you what we're gonna be doing right here in the browser.", 'start': 17.668, 'duration': 3.104}, {'end': 26.135, 'text': "So right here over in the browser, this is day one CSS3 fancy buttons, I'm calling it.", 'start': 21.272, 'duration': 4.863}, {'end': 32.338, 'text': "We're going to be making some buttons exclusively with CSS3, just to kind of whet your whistle and get you excited about what's to come.", 'start': 26.155, 'duration': 6.183}], 'summary': 'Day one of css3 in 30 days, brad hussey teaches making css3 fancy buttons.', 'duration': 32.289, 'max_score': 0.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k49.jpg'}, {'end': 104.529, 'src': 'embed', 'start': 74.189, 'weight': 0, 'content': [{'end': 78.292, 'text': 'You can see that here, the border of these buttons have gradients.', 'start': 74.189, 'duration': 4.103}, {'end': 81.494, 'text': "That's a CSS3 kind of hacking there.", 'start': 78.572, 'duration': 2.922}, {'end': 87.358, 'text': 'Animated buttons, so when you hover over the buttons, you get some cool animation effects and then adding an element in there.', 'start': 81.974, 'duration': 5.384}, {'end': 89.38, 'text': 'We got toggle switches.', 'start': 88.319, 'duration': 1.061}, {'end': 97.067, 'text': 'changes, the text and the button and the color and all that sort of thing the position of the inside switch and then you click to activate a button,', 'start': 90.305, 'duration': 6.762}, {'end': 97.907, 'text': 'those sorts of things.', 'start': 97.067, 'duration': 0.84}, {'end': 104.529, 'text': "So that is what we're gonna be building in our lesson today for day one, CSS3 Fancy Buttons.", 'start': 98.628, 'duration': 5.901}], 'summary': 'Building css3 fancy buttons with cool animation effects and toggle switches.', 'duration': 30.34, 'max_score': 74.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k74189.jpg'}, {'end': 187.527, 'src': 'embed', 'start': 123.618, 'weight': 3, 'content': [{'end': 130.064, 'text': "It's going to have a sandbox.css file which you're going to be using to add your own CSS,", 'start': 123.618, 'duration': 6.446}, {'end': 134.77, 'text': 'and a final.css file which has everything that you need to reference.', 'start': 130.064, 'duration': 4.706}, {'end': 140.336, 'text': "If you go through the code, you mess something up or you're not quite sure about something, that right there is going to help you out.", 'start': 134.99, 'duration': 5.346}, {'end': 144.421, 'text': "You can use that for reference while you're building your projects.", 'start': 140.977, 'duration': 3.444}, {'end': 149.971, 'text': 'And that final CSS is what styles over here in the browser this stuff over here.', 'start': 145.402, 'duration': 4.569}, {'end': 156.342, 'text': 'So the sandbox styles this section, the final result is right here.', 'start': 150.552, 'duration': 5.79}, {'end': 162.018, 'text': "So those are the three files that you're gonna get in the course files for this lesson.", 'start': 157.293, 'duration': 4.725}, {'end': 165.122, 'text': 'And what you need to do is just open up your index file in your browser.', 'start': 162.559, 'duration': 2.563}, {'end': 172.19, 'text': "I'm using Atom as my code editor, so I got my course files in that code editor right here.", 'start': 165.282, 'duration': 6.908}, {'end': 178.037, 'text': 'but then it also has a feature where you can open up the index HTML file in the preview over here.', 'start': 172.19, 'duration': 5.847}, {'end': 181.36, 'text': "So that's what I'm doing, but you can open it up in a browser like Safari or Chrome.", 'start': 178.077, 'duration': 3.283}, {'end': 187.527, 'text': 'So I suggest you go ahead and do that and then open up your code editor, open up your sandbox.css.', 'start': 182.101, 'duration': 5.426}], 'summary': 'Course includes sandbox.css, final.css, index file for building projects.', 'duration': 63.909, 'max_score': 123.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k123618.jpg'}], 'start': 0.049, 'title': 'Css3 fancy buttons and course files', 'summary': 'Introduces day one of css3 in 30 days, with brad hussey guiding through building various css3 fancy buttons and discusses the process of downloading the course files, which includes a zip file with three essential files.', 'chapters': [{'end': 104.529, 'start': 0.049, 'title': 'Day 1: css3 fancy buttons', 'summary': 'Introduces day one of css3 in 30 days, where brad hussey will guide through building various css3 fancy buttons such as 3d buttons, gradient bordered buttons, animated buttons, and toggle switches, providing practical knowledge for immediate use in websites.', 'duration': 104.48, 'highlights': ['Brad Hussey will guide through building various CSS3 fancy buttons The instructor, Brad Hussey, will provide guidance on creating various CSS3 fancy buttons throughout the course.', 'Provides practical knowledge for immediate use in websites The lesson offers practical knowledge for immediate use in websites, including 3D buttons, gradient bordered buttons, animated buttons, and toggle switches.', 'Introduction to day one of CSS3 in 30 days The chapter introduces day one of CSS3 in 30 days, where practical learning will be provided over the next 30 days by building CSS3 fancy buttons.']}, {'end': 187.527, 'start': 104.569, 'title': 'Downloading and accessing course files', 'summary': 'Discusses the process of downloading the course files, which includes a zip file with three essential files, and the steps to access and use these files for building projects.', 'duration': 82.958, 'highlights': ['The course files include a zip file with a folder containing an index file, sandbox.css, and final.css. The zip file contains three essential files: index file, sandbox.css, and final.css.', 'The final CSS file styles the content in the browser, while the sandbox.css is used for reference and adding custom CSS. The final.css styles the content in the browser, while the sandbox.css is used for reference and adding custom CSS to the projects.', 'The process involves opening the index file in the browser and using a code editor like Atom to work on the project. The process involves opening the index file in the browser and using a code editor like Atom to work on the project.']}], 'duration': 187.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k49.jpg', 'highlights': ['The lesson offers practical knowledge for immediate use in websites, including 3D buttons, gradient bordered buttons, animated buttons, and toggle switches.', 'The instructor, Brad Hussey, will provide guidance on creating various CSS3 fancy buttons throughout the course.', 'The chapter introduces day one of CSS3 in 30 days, where practical learning will be provided over the next 30 days by building CSS3 fancy buttons.', 'The zip file contains three essential files: index file, sandbox.css, and final.css.', 'The final.css styles the content in the browser, while the sandbox.css is used for reference and adding custom CSS to the projects.', 'The process involves opening the index file in the browser and using a code editor like Atom to work on the project.']}, {'end': 756.618, 'segs': [{'end': 234.677, 'src': 'embed', 'start': 187.787, 'weight': 2, 'content': [{'end': 191.091, 'text': "Now that we're here, we should be at the same spot.", 'start': 187.787, 'duration': 3.304}, {'end': 194.614, 'text': "What we're gonna start doing now is styling up these Facebook style buttons.", 'start': 191.591, 'duration': 3.023}, {'end': 196.336, 'text': "Let's just jump in, not waste any more time.", 'start': 194.675, 'duration': 1.661}, {'end': 206.223, 'text': "So in the index file you're gonna see the CSS classes that I used for the Facebook style buttons Facebook style button and then Facebook style dark and light.", 'start': 197.117, 'duration': 9.106}, {'end': 208.784, 'text': "So let's just jump right in.", 'start': 207.604, 'duration': 1.18}, {'end': 221.813, 'text': "We're gonna say Facebook style BTN, and then we're gonna say border radius, two pixels, Let's do font size 0.9 Rem.", 'start': 208.804, 'duration': 13.009}, {'end': 226.054, 'text': "That's referencing the root font size rather than the parent font size.", 'start': 221.873, 'duration': 4.181}, {'end': 227.295, 'text': "That's a cool CSS3 feature.", 'start': 226.074, 'duration': 1.221}, {'end': 232.517, 'text': "Padding, we're gonna go six pixels on the top and bottom, 12 pixels on the left and the right.", 'start': 227.935, 'duration': 4.582}, {'end': 234.677, 'text': 'Save that, pop over into your browser.', 'start': 232.837, 'duration': 1.84}], 'summary': 'Styling facebook style buttons with css classes for border radius, font size, and padding.', 'duration': 46.89, 'max_score': 187.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k187787.jpg'}, {'end': 364.083, 'src': 'embed', 'start': 334.518, 'weight': 0, 'content': [{'end': 341.861, 'text': 'And where it works, it works in these versions of IE, Firefox, Chrome, Safari, and you can kinda see.', 'start': 334.518, 'duration': 7.343}, {'end': 348.843, 'text': 'So basically it says, unprefixed, so this is prefixed styles over here in the code editor.', 'start': 341.901, 'duration': 6.942}, {'end': 350.424, 'text': 'These are prefixed styles.', 'start': 349.143, 'duration': 1.281}, {'end': 360.648, 'text': "So technically we don't even really need to do that because it looks like 94.88% of browsers are going to support the unprefixed box shadow.", 'start': 350.704, 'duration': 9.944}, {'end': 364.083, 'text': "So that's pretty cool.", 'start': 362.702, 'duration': 1.381}], 'summary': '94.88% of browsers support unprefixed box shadow in ie, firefox, chrome, safari.', 'duration': 29.565, 'max_score': 334.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k334518.jpg'}, {'end': 455.541, 'src': 'embed', 'start': 429.857, 'weight': 3, 'content': [{'end': 435.72, 'text': 'And then the second, the third number here is the blur radius.', 'start': 429.857, 'duration': 5.863}, {'end': 438.732, 'text': "and that's how blurry you want that box shadow.", 'start': 436.949, 'duration': 1.783}, {'end': 445.244, 'text': 'Zero would mean a sharp line, and like 10 pixels would be a blurry box shadow, depending on the effect you want.', 'start': 439.193, 'duration': 6.051}, {'end': 447.968, 'text': 'And this one is the spread radius.', 'start': 446.065, 'duration': 1.903}, {'end': 455.541, 'text': "so if you want it to be a really big the box shadow to spread, then you'd have a higher number if you don't want it to do anything than zero.", 'start': 447.968, 'duration': 7.573}], 'summary': 'Css box shadow can be adjusted with blur and spread radius for various effects.', 'duration': 25.684, 'max_score': 429.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k429857.jpg'}, {'end': 733.08, 'src': 'heatmap', 'start': 676.785, 'weight': 6, 'content': [{'end': 680.747, 'text': "And all we're gonna do is change the background to E9EBEE.", 'start': 676.785, 'duration': 3.962}, {'end': 683.248, 'text': "And then we're gonna copy this whole rule.", 'start': 681.408, 'duration': 1.84}, {'end': 692.62, 'text': "and change this one to active, and then we're just gonna change the background to D8, D-A-D-E,", 'start': 684.697, 'duration': 7.923}, {'end': 698.182, 'text': "copy that and what we're gonna do is change the border color to the same.", 'start': 692.62, 'duration': 5.562}, {'end': 703.244, 'text': 'Save that, check it out, interact with it, hover a little bit darker, click, darker still.', 'start': 698.522, 'duration': 4.722}, {'end': 704.224, 'text': 'Looks great, I like it.', 'start': 703.344, 'duration': 0.88}, {'end': 705.145, 'text': 'All right.', 'start': 704.244, 'duration': 0.901}, {'end': 707.825, 'text': 'So those are the Facebook style buttons.', 'start': 705.965, 'duration': 1.86}, {'end': 712.106, 'text': "We're gonna be coding the 3D CSS 3 buttons.", 'start': 708.626, 'duration': 3.48}, {'end': 716.528, 'text': "We're still in the fancy button section of the course, day one, but we're gonna do the 3D buttons now.", 'start': 712.146, 'duration': 4.382}, {'end': 720.168, 'text': "So here in the browser, you can see the two 3D buttons that we're gonna be styling up.", 'start': 716.588, 'duration': 3.58}, {'end': 721.009, 'text': "So let's just do that.", 'start': 720.268, 'duration': 0.741}, {'end': 722.049, 'text': 'Go to our code editor.', 'start': 721.289, 'duration': 0.76}, {'end': 727.05, 'text': "I'm gonna add a CSS comment flag here so we know where we are.", 'start': 722.969, 'duration': 4.081}, {'end': 730.459, 'text': 'So the 3D button, you can do what you want.', 'start': 728.939, 'duration': 1.52}, {'end': 731.98, 'text': 'You can do a simpler comment if you want.', 'start': 730.479, 'duration': 1.501}, {'end': 733.08, 'text': 'This is what I like to do.', 'start': 732.26, 'duration': 0.82}], 'summary': 'Styling facebook-style and 3d css buttons with specific color codes and browser interaction.', 'duration': 56.295, 'max_score': 676.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k676785.jpg'}], 'start': 187.787, 'title': 'Styling facebook buttons with css3, box shadow, and 3d effects', 'summary': 'Discusses styling facebook-style buttons using css3 and box shadow, detailing border radius, font size, padding, and browser compatibility. it also covers the usage of prefixed styles and 3d button styling with a 94.88% browser support for unprefixed box shadow.', 'chapters': [{'end': 385.962, 'start': 187.787, 'title': 'Styling facebook buttons with css3', 'summary': 'Discusses styling facebook-style buttons using css3, including setting border radius, font size, padding, and box shadows, and explains browser compatibility and usage of prefixed styles, with 94.88% of browsers supporting unprefixed box shadow.', 'duration': 198.175, 'highlights': ['Box Shadow is used with prefixed styles for Mozilla, WebKit, and as a fallback for modern browsers, with 94.88% of browsers supporting the unprefixed box shadow.', 'Explanation of browser compatibility for CSS3 Box Shadow, with 94.88% of browsers supporting the unprefixed box shadow.', 'Setting border radius, font size, and padding for the Facebook-style buttons.', 'Explanation of the usage of prefixed styles and the unnecessary need due to the high browser support for the unprefixed box shadow.']}, {'end': 756.618, 'start': 386.042, 'title': 'Css box shadow and button styling', 'summary': 'Explains the concept of box shadow in css, detailing the values for horizontal offset, vertical offset, blur radius, spread radius, and shadow color, followed by the process of styling facebook-style buttons, including hover and active effects, and then transitioning to 3d button styling.', 'duration': 370.576, 'highlights': ['The chapter explains the concept of box shadow in CSS, detailing the values for horizontal offset, vertical offset, blur radius, spread radius, and shadow color. It details the values for horizontal offset, vertical offset, blur radius, spread radius, and shadow color.', 'The process of styling Facebook-style buttons, including hover and active effects. It discusses styling Facebook-style buttons, including hover and active effects.', 'Transitioning to 3D button styling. The chapter transitions to 3D button styling.']}], 'duration': 568.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k187787.jpg', 'highlights': ['Box Shadow is used with prefixed styles for Mozilla, WebKit, and as a fallback for modern browsers, with 94.88% of browsers supporting the unprefixed box shadow.', 'Explanation of browser compatibility for CSS3 Box Shadow, with 94.88% of browsers supporting the unprefixed box shadow.', 'Setting border radius, font size, and padding for the Facebook-style buttons.', 'The chapter explains the concept of box shadow in CSS, detailing the values for horizontal offset, vertical offset, blur radius, spread radius, and shadow color.', 'The process of styling Facebook-style buttons, including hover and active effects. It discusses styling Facebook-style buttons, including hover and active effects.', 'Explanation of the usage of prefixed styles and the unnecessary need due to the high browser support for the unprefixed box shadow.', 'Transitioning to 3D button styling. The chapter transitions to 3D button styling.']}, {'end': 1532.695, 'segs': [{'end': 786.517, 'src': 'embed', 'start': 756.658, 'weight': 0, 'content': [{'end': 761.141, 'text': "We're gonna style that position, relative important because we're gonna be doing a little bit of movement.", 'start': 756.658, 'duration': 4.483}, {'end': 765.644, 'text': 'Background is gonna be orange-red, nice and simple.', 'start': 762.322, 'duration': 3.322}, {'end': 766.684, 'text': 'No border.', 'start': 766.164, 'duration': 0.52}, {'end': 769.886, 'text': 'Color of the text is gonna be white.', 'start': 768.245, 'duration': 1.641}, {'end': 772.588, 'text': "Padding's gonna be 15 pixels, woo.", 'start': 770.807, 'duration': 1.781}, {'end': 777.335, 'text': '15 pixels top and bottom, 24 pixels on the left and the right.', 'start': 774.114, 'duration': 3.221}, {'end': 780.076, 'text': "The font size, we're going to do 1.4 Rem.", 'start': 777.895, 'duration': 2.181}, {'end': 786.517, 'text': "When you're using M, it's relative to the parent element, whereas when you're using Rem, it's relative to the root.", 'start': 781.396, 'duration': 5.121}], 'summary': 'Styling position with 15px padding, 1.4 rem font size, and orange-red background.', 'duration': 29.859, 'max_score': 756.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k756658.jpg'}, {'end': 835.309, 'src': 'embed', 'start': 808.866, 'weight': 1, 'content': [{'end': 815.368, 'text': 'HSL, so 16, 100%, and then 30%.', 'start': 808.866, 'duration': 6.502}, {'end': 819.172, 'text': '16 is the hue, 100 is the saturation, and then 30% is the lightness.', 'start': 815.368, 'duration': 3.804}, {'end': 824.398, 'text': 'So we want it to be this kind of like blood red sort of color for the shadow.', 'start': 819.192, 'duration': 5.206}, {'end': 827.202, 'text': 'And then the outline, we want no outline.', 'start': 825.46, 'duration': 1.742}, {'end': 835.309, 'text': 'If I save that and we head over to our sandbox here, you can see we have the 3D button, it has the shadow over here.', 'start': 827.702, 'duration': 7.607}], 'summary': 'Configuring hsl values for shadow color with 16 hue, 100 saturation, and 30% lightness, while no outline is set.', 'duration': 26.443, 'max_score': 808.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k808866.jpg'}, {'end': 971.461, 'src': 'heatmap', 'start': 887.642, 'weight': 2, 'content': [{'end': 893.383, 'text': 'to negative three pixels, three pixels, zero, and then HSL the same here.', 'start': 887.642, 'duration': 5.741}, {'end': 900.165, 'text': "So what that's going to do is when you click it, or when you hover it, let's check it out.", 'start': 896.564, 'duration': 3.601}, {'end': 905.126, 'text': "See how it pops down? That's pretty cool.", 'start': 900.885, 'duration': 4.241}, {'end': 906.747, 'text': "Actually, I don't want that to do it on hover.", 'start': 905.346, 'duration': 1.401}, {'end': 908.067, 'text': 'I want that to do it on active.', 'start': 906.767, 'duration': 1.3}, {'end': 910.847, 'text': "So that's going to actually be the active state.", 'start': 908.387, 'duration': 2.46}, {'end': 915.269, 'text': 'And now above this, I want to do the button 3D hover, button 3D 1 hover.', 'start': 911.288, 'duration': 3.981}, {'end': 931.063, 'text': "And that's gonna be simple, we're just gonna change the background to HSL 16, 145 for lightness, so it's gonna be a little bit lighter.", 'start': 919.133, 'duration': 11.93}, {'end': 936.708, 'text': "So hover, it's actually a little bit darker, so there we go.", 'start': 931.483, 'duration': 5.225}, {'end': 940.691, 'text': 'And when we click, it moves that button down, so cool.', 'start': 936.888, 'duration': 3.803}, {'end': 947.693, 'text': 'Now what we want to do is we want to give those corners, we want to add those little corners to connect these two.', 'start': 941.969, 'duration': 5.724}, {'end': 952.756, 'text': 'so it gives the illusion that they are one entire uniform box.', 'start': 947.693, 'duration': 5.063}, {'end': 956.738, 'text': 'So we can do that by doing the before.', 'start': 954.017, 'duration': 2.721}, {'end': 958.399, 'text': 'Let me show you here.', 'start': 957.619, 'duration': 0.78}, {'end': 960.921, 'text': "So we're going to do three button, 3D1.", 'start': 958.479, 'duration': 2.442}, {'end': 966.679, 'text': 'And then two colons.', 'start': 964.318, 'duration': 2.361}, {'end': 971.461, 'text': "if we go before, it's like a virtual, it's like a pseudo element of the.", 'start': 966.679, 'duration': 4.782}], 'summary': 'Styling buttons with hsl and creating 3d hover effect on active state.', 'duration': 63.074, 'max_score': 887.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k887642.jpg'}, {'end': 1199.529, 'src': 'embed', 'start': 1176.099, 'weight': 4, 'content': [{'end': 1188.764, 'text': 'A little bit of magic gives the illusion that that element is connected just by creating a little CSS3 triangle with borders and moving it with positioning into that corner right here to give the illusion.', 'start': 1176.099, 'duration': 12.665}, {'end': 1191.686, 'text': 'which is cool.', 'start': 1190.205, 'duration': 1.481}, {'end': 1199.529, 'text': "okay, so we're going to do the same thing for that bottom right corner, but because we've already used the before pseudo element,", 'start': 1191.686, 'duration': 7.843}], 'summary': 'Creating css3 triangle to give illusion of connection in corners.', 'duration': 23.43, 'max_score': 1176.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1176099.jpg'}, {'end': 1417.492, 'src': 'embed', 'start': 1391.118, 'weight': 6, 'content': [{'end': 1396.14, 'text': "we need to shrink those triangles so that it still gives the effect to the illusion that it's a full box.", 'start': 1391.118, 'duration': 5.022}, {'end': 1397.64, 'text': "So that's quite simple.", 'start': 1396.54, 'duration': 1.1}, {'end': 1400.361, 'text': 'All we need to do is add a couple extra things here.', 'start': 1397.96, 'duration': 2.401}, {'end': 1406.543, 'text': "I'm gonna say button 3D1 active and then before.", 'start': 1400.381, 'duration': 6.162}, {'end': 1408.244, 'text': "So this means when it's active,", 'start': 1406.643, 'duration': 1.601}, {'end': 1415.63, 'text': "I want to select the before pseudo element and we're going to change the border to solid 3 pixels rather than 6 pixels,", 'start': 1408.644, 'duration': 6.986}, {'end': 1417.492, 'text': 'because it needs to be the size of the border width.', 'start': 1415.63, 'duration': 1.862}], 'summary': 'Shrink triangles to create illusion of full box by changing border size.', 'duration': 26.374, 'max_score': 1391.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1391118.jpg'}, {'end': 1514.141, 'src': 'embed', 'start': 1489.369, 'weight': 5, 'content': [{'end': 1495.034, 'text': "Now we've got a perfectly working 3D button with all of the corners and the triangles working perfectly in sync.", 'start': 1489.369, 'duration': 5.665}, {'end': 1497.837, 'text': 'Awesome That is beautiful.', 'start': 1495.855, 'duration': 1.982}, {'end': 1502.632, 'text': "All right, now let's do the second 3D button here, the circle.", 'start': 1499.329, 'duration': 3.303}, {'end': 1504.053, 'text': 'It looks a little bit like this.', 'start': 1502.992, 'duration': 1.061}, {'end': 1506.475, 'text': "It's a circle, it's got a radial gradient.", 'start': 1504.273, 'duration': 2.202}, {'end': 1510.438, 'text': "When you, it's got this back here, this kind of depth to it.", 'start': 1506.515, 'duration': 3.923}, {'end': 1514.141, 'text': "So when you, it looks like it's popping off the background.", 'start': 1510.458, 'duration': 3.683}], 'summary': 'Successfully created a 3d button with radial gradient, appearing to pop off the background.', 'duration': 24.772, 'max_score': 1489.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1489369.jpg'}], 'start': 756.658, 'title': 'Styling 3d button with css and creating css3 triangles', 'summary': 'Covers styling a 3d button with css, including specific color values and pixel measurements, and details the process of creating css3 triangles in a button element while addressing hover and active state issues.', 'chapters': [{'end': 990.188, 'start': 756.658, 'title': 'Styling 3d button with css', 'summary': 'Covers styling a 3d button with css, including setting background color, padding, font size, box shadow, and hover/active states, with specific color values and pixel measurements provided.', 'duration': 233.53, 'highlights': ['The chapter emphasizes the importance of relative positioning for creating movement and specifies the styling details for a 3D button, such as setting the background color to orange-red, text color to white, padding to 15 pixels top and bottom, 24 pixels left and right, and using a font size of 1.4 Rem.', 'It details the use of HSL (Hue, Saturation, Lightness) values for box shadow and outlines the specific HSL values for creating a blood-red shadow color, with hue at 16, saturation at 100%, and lightness at 30%.', "The chapter explains the implementation of hover and active states for the 3D button, utilizing HSL values for background color and specifying pixel measurements for positioning elements when hovered or clicked, with a demonstration of the button's behavior.", "It demonstrates the use of a pseudo-element 'before' to connect the corners of the 3D button, providing a detailed explanation of its role and the process of positioning it to create a uniform box illusion."]}, {'end': 1532.695, 'start': 991.155, 'title': 'Creating css3 triangles and 3d buttons', 'summary': 'Details the process of creating css3 triangles in a button element, using borders and positioning to create an illusion of connection, and then proceeds to build a 3d button with radial gradient and depth effect, addressing issues with hover and active states.', 'duration': 541.54, 'highlights': ['Creating CSS3 triangles with borders and positioning to give the illusion of connection between elements The speaker demonstrates using borders and positioning to create a CSS3 triangle, achieving the illusion of connection between the button and its shadow.', 'Building a 3D button with radial gradient and depth effect The chapter explains the process of creating a 3D button with a radial gradient and depth effect to achieve a popping and sinking effect on click.', 'Addressing issues with hover and active states by adjusting the size and position of the triangles The speaker addresses issues with hover and active states by adjusting the size and position of the triangles in the 3D button to maintain the illusion of a full box.']}], 'duration': 776.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k756658.jpg', 'highlights': ['The chapter emphasizes the importance of relative positioning for creating movement and specifies the styling details for a 3D button, such as setting the background color to orange-red, text color to white, padding to 15 pixels top and bottom, 24 pixels left and right, and using a font size of 1.4 Rem.', 'It details the use of HSL (Hue, Saturation, Lightness) values for box shadow and outlines the specific HSL values for creating a blood-red shadow color, with hue at 16, saturation at 100%, and lightness at 30%.', "The chapter explains the implementation of hover and active states for the 3D button, utilizing HSL values for background color and specifying pixel measurements for positioning elements when hovered or clicked, with a demonstration of the button's behavior.", "It demonstrates the use of a pseudo-element 'before' to connect the corners of the 3D button, providing a detailed explanation of its role and the process of positioning it to create a uniform box illusion.", 'Creating CSS3 triangles with borders and positioning to give the illusion of connection between elements The speaker demonstrates using borders and positioning to create a CSS3 triangle, achieving the illusion of connection between the button and its shadow.', 'Building a 3D button with radial gradient and depth effect The chapter explains the process of creating a 3D button with a radial gradient and depth effect to achieve a popping and sinking effect on click.', 'Addressing issues with hover and active states by adjusting the size and position of the triangles The speaker addresses issues with hover and active states by adjusting the size and position of the triangles in the 3D button to maintain the illusion of a full box.']}, {'end': 2348.48, 'segs': [{'end': 1663.827, 'src': 'embed', 'start': 1641.155, 'weight': 3, 'content': [{'end': 1650.94, 'text': "and then we're going to go ahead and do some text shadows and that's going to be zero, negative one pixel, zero, and then c, three, a, f, zero, seven.", 'start': 1641.155, 'duration': 9.785}, {'end': 1652.681, 'text': "uh, what's that negative one pixel do?", 'start': 1650.94, 'duration': 1.741}, {'end': 1656.263, 'text': "that's the vertical offset for the text shadow.", 'start': 1652.681, 'duration': 3.582}, {'end': 1663.827, 'text': 'so if i had a positive number like one pixel, the text shadow would be one pixel below the text.', 'start': 1656.263, 'duration': 7.564}], 'summary': 'Demonstrating text shadow with zero, negative one pixel, zero, and c3af07.', 'duration': 22.672, 'max_score': 1641.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1641155.jpg'}, {'end': 1741.831, 'src': 'embed', 'start': 1711.369, 'weight': 4, 'content': [{'end': 1713.39, 'text': "That's gonna be 100% for a full circle.", 'start': 1711.369, 'duration': 2.021}, {'end': 1714.91, 'text': 'Height, 120 pixels.', 'start': 1714.21, 'duration': 0.7}, {'end': 1722.888, 'text': 'width 120 pixels.', 'start': 1717.865, 'duration': 5.023}, {'end': 1724.029, 'text': 'z index 4.', 'start': 1722.888, 'duration': 1.141}, {'end': 1731.274, 'text': "uh, because we're going to be playing with some positioning of the z index, because we're going to have that background behind it.", 'start': 1724.029, 'duration': 7.245}, {'end': 1733.875, 'text': "we want to make sure it's above.", 'start': 1731.274, 'duration': 2.601}, {'end': 1735.817, 'text': "you know there's a method to my madness.", 'start': 1733.875, 'duration': 1.942}, {'end': 1739.27, 'text': 'okay. So Z index four.', 'start': 1735.817, 'duration': 3.453}, {'end': 1740.43, 'text': "now let's check it out in the browser.", 'start': 1739.27, 'duration': 1.16}, {'end': 1741.831, 'text': 'Perfect circle, looks great.', 'start': 1740.79, 'duration': 1.041}], 'summary': '100% full circle, 120x120 pixels, z index 4, positioned background, z index 4, perfect circle.', 'duration': 30.462, 'max_score': 1711.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1711369.jpg'}, {'end': 1808.151, 'src': 'embed', 'start': 1779.731, 'weight': 1, 'content': [{'end': 1784.255, 'text': "I don't usually like to remove outlines for accessibility reasons, but in this case, it's gone.", 'start': 1779.731, 'duration': 4.524}, {'end': 1785.616, 'text': "We're going to do something else.", 'start': 1784.275, 'duration': 1.341}, {'end': 1788.674, 'text': "All right, we're gonna do some box shadows.", 'start': 1786.772, 'duration': 1.902}, {'end': 1790.816, 'text': "We're gonna create this effect right here over in the browser.", 'start': 1788.694, 'duration': 2.122}, {'end': 1795.3, 'text': "It gives this cascading effect that makes it look like it's lifted off of the background.", 'start': 1790.836, 'duration': 4.464}, {'end': 1797.542, 'text': "We're gonna do that right now with a bunch of box shadows.", 'start': 1795.32, 'duration': 2.222}, {'end': 1801.425, 'text': "So let's go back to the code editor and start off with box shadow.", 'start': 1797.582, 'duration': 3.843}, {'end': 1808.151, 'text': "I'm not gonna do the browser prefixes because box shadow is pretty widely accepted and I don't wanna write this out so many times.", 'start': 1802.666, 'duration': 5.485}], 'summary': 'Creating a cascading box shadow effect for lifting content off the background.', 'duration': 28.42, 'max_score': 1779.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1779731.jpg'}, {'end': 1980.597, 'src': 'embed', 'start': 1949.65, 'weight': 0, 'content': [{'end': 1950.65, 'text': "I'm going to leave the fallback.", 'start': 1949.65, 'duration': 1}, {'end': 1951.651, 'text': "I don't need to change that.", 'start': 1950.67, 'duration': 0.981}, {'end': 1952.911, 'text': 'If you want, you can.', 'start': 1952.211, 'duration': 0.7}, {'end': 1959.693, 'text': "And I'm going to change the radial gradient all around so that when you hover, it changes the color of it.", 'start': 1952.931, 'duration': 6.762}, {'end': 1963.894, 'text': "So HSL 54, 100, that's going to stay the same.", 'start': 1961.313, 'duration': 2.581}, {'end': 1972.589, 'text': "But we're going to change the lightness to 45 on here and 35.", 'start': 1963.914, 'duration': 8.675}, {'end': 1978.995, 'text': 'Copy that, the two HSL values, paste them in each of the styles here.', 'start': 1972.589, 'duration': 6.406}, {'end': 1980.597, 'text': 'Save your typing.', 'start': 1979.896, 'duration': 0.701}], 'summary': 'Adjust radial gradient for hover effect, set lightness to 45 and 35.', 'duration': 30.947, 'max_score': 1949.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1949650.jpg'}, {'end': 2125.565, 'src': 'embed', 'start': 2099.417, 'weight': 2, 'content': [{'end': 2108.222, 'text': 'You can see we got this one, kind of this orangey red to yellow from the bottom left-hand corner up into the right-hand corner there.', 'start': 2099.417, 'duration': 8.805}, {'end': 2111.603, 'text': 'You see the point here is that the border has a gradient on it.', 'start': 2108.262, 'duration': 3.341}, {'end': 2114.325, 'text': 'And then when you hover, you get the gradient on the inside.', 'start': 2111.663, 'duration': 2.662}, {'end': 2119.702, 'text': 'But the point here is that you can make borders have gradients, which is cool.', 'start': 2114.385, 'duration': 5.317}, {'end': 2125.565, 'text': "And then the second example, we actually have this, I don't know if it's necessarily practical, but it's just a cool practice.", 'start': 2119.762, 'duration': 5.803}], 'summary': 'Borders can have gradients, demonstrated with an orangey red to yellow gradient, and shown as a cool practice.', 'duration': 26.148, 'max_score': 2099.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2099417.jpg'}], 'start': 1532.955, 'title': 'Css styling and button effects', 'summary': 'Covers creating radial gradients with hsl colors for text styling, and implementing 3d button effects using box shadows with hover effects and different color transitions.', 'chapters': [{'end': 1741.831, 'start': 1532.955, 'title': 'Css radial gradient and text styling', 'summary': 'Discusses how to create radial gradients using css, utilizing hsl for color and specifying text styling parameters, resulting in a perfect circle with specific dimensions and styling effects.', 'duration': 208.876, 'highlights': ['Creating radial gradients using CSS with HSL for color and specifying text styling parameters. radial gradients, HSL color (hue: 54, saturation: 100%, lightness: 40%)', 'Explaining the use of text shadow with specific parameters and effects. text shadow parameters (vertical offset: -1 pixel, blur: 0)', 'Defining the dimensions and positioning parameters for creating a perfect circle. height: 120 pixels, width: 120 pixels, z-index: 4']}, {'end': 2348.48, 'start': 1742.271, 'title': 'Creating 3d button and gradient bordered buttons', 'summary': 'Covers creating a 3d button effect using box shadows with a cascading effect, and implementing gradient bordered buttons with different color transitions and hover effects.', 'duration': 606.209, 'highlights': ['Creating a 3D button effect using box shadows The speaker demonstrates using multiple box shadow values to create a cascading effect, giving the illusion of a three-dimensional button.', 'Implementing gradient bordered buttons with color transitions and hover effects The speaker explains how to use linear gradients and border image slice to create gradient bordered buttons with color transitions and hover effects.']}], 'duration': 815.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k1532955.jpg', 'highlights': ['Creating radial gradients using CSS with HSL for color and specifying text styling parameters. radial gradients, HSL color (hue: 54, saturation: 100%, lightness: 40%)', 'Creating a 3D button effect using box shadows The speaker demonstrates using multiple box shadow values to create a cascading effect, giving the illusion of a three-dimensional button.', 'Implementing gradient bordered buttons with color transitions and hover effects The speaker explains how to use linear gradients and border image slice to create gradient bordered buttons with color transitions and hover effects.', 'Explaining the use of text shadow with specific parameters and effects. text shadow parameters (vertical offset: -1 pixel, blur: 0)', 'Defining the dimensions and positioning parameters for creating a perfect circle. height: 120 pixels, width: 120 pixels, z-index: 4']}, {'end': 2719.789, 'segs': [{'end': 2428.373, 'src': 'embed', 'start': 2396.127, 'weight': 0, 'content': [{'end': 2402.529, 'text': "So transition ease in out works fine for me, but you won't see it until we use it on the hover.", 'start': 2396.127, 'duration': 6.402}, {'end': 2403.73, 'text': "So we're going to tab in here.", 'start': 2402.589, 'duration': 1.141}, {'end': 2408.071, 'text': "We're going to say gradient button dash one.", 'start': 2403.77, 'duration': 4.301}, {'end': 2411.746, 'text': "And that's going to be hover.", 'start': 2410.325, 'duration': 1.421}, {'end': 2422.35, 'text': "And we're just going to say background image, linear gradient, we're going to do linear gradient as well.", 'start': 2414.207, 'duration': 8.143}, {'end': 2428.373, 'text': "And then to top right, and we're just going to fill out the same style gradient.", 'start': 2423.751, 'duration': 4.622}], 'summary': 'Applying transition ease in out on hover for gradient button dash one.', 'duration': 32.246, 'max_score': 2396.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2396127.jpg'}, {'end': 2485.163, 'src': 'embed', 'start': 2455.734, 'weight': 1, 'content': [{'end': 2456.614, 'text': 'So that looks pretty cool.', 'start': 2455.734, 'duration': 0.88}, {'end': 2460.136, 'text': 'The point here was the gradient border around the button itself.', 'start': 2456.654, 'duration': 3.482}, {'end': 2464.779, 'text': "Okay, so now let's jump down to gradient button two.", 'start': 2461.477, 'duration': 3.302}, {'end': 2466.32, 'text': "Let's do that one real quick here.", 'start': 2465.219, 'duration': 1.101}, {'end': 2480.677, 'text': "So we're gonna do gradient button dash two And we're going to do position, relative, z index one, that should do the trick.", 'start': 2466.34, 'duration': 14.337}, {'end': 2485.163, 'text': "Padding, let's see, we could probably just copy a lot of this actually.", 'start': 2482.319, 'duration': 2.844}], 'summary': 'Creating a gradient border around a button, using position: relative and z-index: 1 for the effect.', 'duration': 29.429, 'max_score': 2455.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2455734.jpg'}, {'end': 2619.521, 'src': 'heatmap', 'start': 2535.646, 'weight': 2, 'content': [{'end': 2540.089, 'text': 'This is gonna be to transparent and that should do the trick.', 'start': 2535.646, 'duration': 4.443}, {'end': 2541.49, 'text': "Well, let's see what happens.", 'start': 2540.629, 'duration': 0.861}, {'end': 2543.191, 'text': 'Save it, check it out in your browser.', 'start': 2541.67, 'duration': 1.521}, {'end': 2545.673, 'text': 'Looks good so far when I hover.', 'start': 2543.972, 'duration': 1.701}, {'end': 2548.875, 'text': "Whoops, what's going on there? A border shows up on the right side.", 'start': 2545.693, 'duration': 3.182}, {'end': 2551.197, 'text': 'What we need to do on hover is remove that border.', 'start': 2549.235, 'duration': 1.962}, {'end': 2557.801, 'text': "So let's go back to our code editor and simply say border right style none.", 'start': 2551.237, 'duration': 6.564}, {'end': 2560.023, 'text': 'That should do the trick.', 'start': 2558.242, 'duration': 1.781}, {'end': 2561.104, 'text': 'Go back here, hover.', 'start': 2560.203, 'duration': 0.901}, {'end': 2563.064, 'text': 'Perfect There you go.', 'start': 2561.923, 'duration': 1.141}, {'end': 2566.107, 'text': 'So we have gradient border button one and gradient border button two.', 'start': 2563.084, 'duration': 3.023}, {'end': 2569.83, 'text': 'Very simple, nice little trick using border images and linear gradients.', 'start': 2566.567, 'duration': 3.263}, {'end': 2571.031, 'text': 'I like it.', 'start': 2570.47, 'duration': 0.561}, {'end': 2573.994, 'text': "All right, now let's do these animated buttons here.", 'start': 2571.852, 'duration': 2.142}, {'end': 2575.575, 'text': 'You can see the first example animated button.', 'start': 2574.014, 'duration': 1.561}, {'end': 2576.736, 'text': 'We got a background pattern.', 'start': 2575.595, 'duration': 1.141}, {'end': 2577.457, 'text': 'And then, when you hover,', 'start': 2576.756, 'duration': 0.701}, {'end': 2586.622, 'text': 'it just kind of slightly animates from the left to the right and continually goes infinitely until you just kind of take your mouse off the button.', 'start': 2577.457, 'duration': 9.165}, {'end': 2590.445, 'text': 'You use that, this is just a simple example.', 'start': 2587.863, 'duration': 2.582}, {'end': 2598.309, 'text': 'You could do anything from gradients to background patterns to background images to when you hover over a button, you could do different interactions.', 'start': 2590.505, 'duration': 7.804}, {'end': 2605.153, 'text': 'But this is just an idea just to give you so that you can play with it and see what you can come up with it yourself in your own sites.', 'start': 2598.349, 'duration': 6.804}, {'end': 2611.336, 'text': 'Animated button number two, is simply just playing with padding.', 'start': 2605.513, 'duration': 5.823}, {'end': 2612.837, 'text': "So it's a little bit of an illusion.", 'start': 2611.657, 'duration': 1.18}, {'end': 2619.521, 'text': 'So it looks like this actually animates from the right towards the left and then the chevron comes in from the right.', 'start': 2612.877, 'duration': 6.644}], 'summary': 'Demonstration of creating gradient border buttons and animated buttons using css, with examples and tips for customization.', 'duration': 83.875, 'max_score': 2535.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2535646.jpg'}, {'end': 2688.114, 'src': 'embed', 'start': 2641.689, 'weight': 6, 'content': [{'end': 2648.133, 'text': 'What are the classes that we use here? Animated buttons, animated button one and two, perfect.', 'start': 2641.689, 'duration': 6.444}, {'end': 2653.555, 'text': 'Simple Animated button dash one.', 'start': 2649.733, 'duration': 3.822}, {'end': 2663.941, 'text': "Let's start off position relative and then we're gonna go display inline block.", 'start': 2654.796, 'duration': 9.145}, {'end': 2675.284, 'text': "We're gonna add some padding and then say oh, 20 pixels top and bottom, 40 pixels left and right.", 'start': 2667.739, 'duration': 7.545}, {'end': 2680.648, 'text': "Font size, let's do 1.4 rim.", 'start': 2676.485, 'duration': 4.163}, {'end': 2688.114, 'text': 'And then background color 00B3B4.', 'start': 2682.25, 'duration': 5.864}], 'summary': 'Styling classes include animated buttons, animated button one and two with specific css properties and values.', 'duration': 46.425, 'max_score': 2641.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2641689.jpg'}], 'start': 2348.5, 'title': 'Creating stylish css buttons', 'summary': 'Demonstrates creating gradient border buttons with hover effects and animated buttons utilizing css, including techniques such as linear gradients, transition properties, and different animations.', 'chapters': [{'end': 2560.023, 'start': 2348.5, 'title': 'Creating gradient buttons with hover effects', 'summary': 'Demonstrates the creation of gradient border buttons with hover effects, utilizing linear gradients and transition properties to achieve interactive visual elements, while also focusing on the design and positioning of the buttons.', 'duration': 211.523, 'highlights': ["The chapter focuses on creating gradient border buttons with interactive hover effects by utilizing linear gradients and transition properties, such as 'transition ease in out' with a duration of 0.3 seconds, to enhance user experience.", "The demonstration includes the design and positioning of the buttons, specifically adjusting the border size and colors, such as changing the border size from 10 pixels to 4 pixels and utilizing colors like 'orange red' and 'transparent' for the gradient effect.", "The process involves addressing issues related to hover effects, such as removing unwanted borders on hover by specifying 'border right style none' to enhance the visual appearance and functionality of the buttons."]}, {'end': 2719.789, 'start': 2560.203, 'title': 'Creating animated buttons with css', 'summary': 'Discusses creating animated buttons using css, including techniques such as using border images, linear gradients, and background patterns, with examples of different animations and illusions achieved through padding and transitions.', 'duration': 159.586, 'highlights': ['The chapter demonstrates creating gradient border buttons and animated buttons using CSS, with techniques including border images, linear gradients, and background patterns.', 'An example of an animated button is shown where it slightly animates from left to right on hover and continues infinitely until the mouse is removed, allowing for various interactions like gradients, background patterns, and images on button hover.', 'Another animated button example involves creating an illusion of animating from right to left using padding and transitions.', 'Details about CSS properties and values used for creating the animated buttons, such as position, display, padding, font size, background color, and background image, are provided, including the source of the pattern image used.']}], 'duration': 371.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2348500.jpg', 'highlights': ["The chapter focuses on creating gradient border buttons with interactive hover effects by utilizing linear gradients and transition properties, such as 'transition ease in out' with a duration of 0.3 seconds, to enhance user experience.", "The demonstration includes the design and positioning of the buttons, specifically adjusting the border size and colors, such as changing the border size from 10 pixels to 4 pixels and utilizing colors like 'orange red' and 'transparent' for the gradient effect.", "The process involves addressing issues related to hover effects, such as removing unwanted borders on hover by specifying 'border right style none' to enhance the visual appearance and functionality of the buttons.", 'The chapter demonstrates creating gradient border buttons and animated buttons using CSS, with techniques including border images, linear gradients, and background patterns.', 'An example of an animated button is shown where it slightly animates from left to right on hover and continues infinitely until the mouse is removed, allowing for various interactions like gradients, background patterns, and images on button hover.', 'Another animated button example involves creating an illusion of animating from right to left using padding and transitions.', 'Details about CSS properties and values used for creating the animated buttons, such as position, display, padding, font size, background color, and background image, are provided, including the source of the pattern image used.']}, {'end': 3188.918, 'segs': [{'end': 2762.92, 'src': 'embed', 'start': 2720.55, 'weight': 0, 'content': [{'end': 2727.432, 'text': "Beauty, background size, we're going to go for 40 pixels by 40 pixels.", 'start': 2720.55, 'duration': 6.882}, {'end': 2739.797, 'text': "The border of the button itself, let's just go for solid one pixel, triple five, just to give it a little bit of, I don't know, definition.", 'start': 2729.693, 'duration': 10.104}, {'end': 2747.25, 'text': 'Color white transition.', 'start': 2741.946, 'duration': 5.304}, {'end': 2753.954, 'text': "We're going to go all ease 0.3 seconds.", 'start': 2747.27, 'duration': 6.684}, {'end': 2760.378, 'text': "And now if we save that and check it out, it's going to look like this.", 'start': 2756.235, 'duration': 4.143}, {'end': 2762.92, 'text': "You're going to have your pattern here.", 'start': 2760.398, 'duration': 2.522}], 'summary': 'Designing a button with 40x40 pixels, white color, and 0.3 seconds transition.', 'duration': 42.37, 'max_score': 2720.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2720550.jpg'}, {'end': 2818.835, 'src': 'embed', 'start': 2793.168, 'weight': 1, 'content': [{'end': 2799.309, 'text': "But what we're gonna do is we're gonna call the animation loading button animation.", 'start': 2793.168, 'duration': 6.141}, {'end': 2802.21, 'text': "It's gonna go over two seconds.", 'start': 2799.329, 'duration': 2.881}, {'end': 2807.092, 'text': "It's gonna be a linear animation.", 'start': 2803.411, 'duration': 3.681}, {'end': 2809.732, 'text': "So it's not gonna have like an ease in out.", 'start': 2807.692, 'duration': 2.04}, {'end': 2811.413, 'text': "It's just gonna be a linear movement.", 'start': 2809.752, 'duration': 1.661}, {'end': 2814.587, 'text': 'and infinite, never stops.', 'start': 2813.405, 'duration': 1.182}, {'end': 2818.835, 'text': 'So now what we need to do is create the keyframes.', 'start': 2815.429, 'duration': 3.406}], 'summary': 'Create a linear animation loading button lasting 2 seconds, infinite loop.', 'duration': 25.667, 'max_score': 2793.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2793168.jpg'}, {'end': 3029.517, 'src': 'embed', 'start': 2999.472, 'weight': 5, 'content': [{'end': 3008.195, 'text': 'but if you want the chevron in the final CSS, you could just go down to a line 300 ish and then copy the chevron and paste it into here.', 'start': 2999.472, 'duration': 8.723}, {'end': 3010.035, 'text': 'All right.', 'start': 3009.695, 'duration': 0.34}, {'end': 3020.048, 'text': "And, and then after that, we're going to transition all Ease 0.3 seconds.", 'start': 3010.475, 'duration': 9.573}, {'end': 3023.551, 'text': "And now let's see what this does so far.", 'start': 3020.668, 'duration': 2.883}, {'end': 3024.812, 'text': 'So it shows up here.', 'start': 3023.631, 'duration': 1.181}, {'end': 3029.517, 'text': "So 50% apparently doesn't quite get it in the right position.", 'start': 3025.413, 'duration': 4.104}], 'summary': 'Instructions for adding chevron to css with transition effect.', 'duration': 30.045, 'max_score': 2999.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2999472.jpg'}, {'end': 3191.961, 'src': 'heatmap', 'start': 3124.918, 'weight': 3, 'content': [{'end': 3131.383, 'text': "And what we're going to do now is add in that after pseudo element.", 'start': 3124.918, 'duration': 6.465}, {'end': 3139.029, 'text': 'So animated, button two, hover and then the after pseudo element.', 'start': 3132.244, 'duration': 6.785}, {'end': 3140.601, 'text': "It's going to be right.", 'start': 3139.718, 'duration': 0.883}, {'end': 3142.305, 'text': "We're going to move it in from the right.", 'start': 3140.621, 'duration': 1.684}, {'end': 3144.552, 'text': "We're going to change it to something like 1.2m rather than 0.6m.", 'start': 3142.325, 'duration': 2.227}, {'end': 3153.95, 'text': 'So double the distance, and then opacity will be one.', 'start': 3148.726, 'duration': 5.224}, {'end': 3157.332, 'text': "Save that, let's check it out, let's hover over that button.", 'start': 3154.891, 'duration': 2.441}, {'end': 3160.455, 'text': 'Boom, look at that, it slides over.', 'start': 3158.233, 'duration': 2.222}, {'end': 3166.439, 'text': 'It looks like the chevron is sliding in and the text is sliding over to accommodate it.', 'start': 3160.495, 'duration': 5.944}, {'end': 3167.82, 'text': "and that's the illusion we're getting.", 'start': 3166.439, 'duration': 1.381}, {'end': 3170.882, 'text': "but really what's happening is that we're changing the padding on the left and the right.", 'start': 3167.82, 'duration': 3.062}, {'end': 3176.867, 'text': "I'm making the chevron appear just by changing those measurements.", 'start': 3170.882, 'duration': 5.985}, {'end': 3185.575, 'text': "But because we have transition, it's actually animating those padding adjustments, giving the illusion that we're sliding the text over,", 'start': 3177.027, 'duration': 8.548}, {'end': 3187.617, 'text': 'sliding in the chevron from thin air.', 'start': 3185.575, 'duration': 2.042}, {'end': 3188.918, 'text': "So it's pretty cool effect.", 'start': 3187.957, 'duration': 0.961}, {'end': 3191.961, 'text': 'And then this one is that sliding background pattern.', 'start': 3188.978, 'duration': 2.983}], 'summary': 'Adding an after pseudo element to animate a button, doubling the distance to 1.2m and changing opacity to one, resulting in a sliding effect, creating an illusion by adjusting padding and utilizing transitions.', 'duration': 67.043, 'max_score': 3124.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k3124918.jpg'}], 'start': 2720.55, 'title': 'Css button animation and hover effect', 'summary': 'Discusses creating css animated buttons with specific size, border, color transition, and keyframes, along with creating an animated hover effect for a button using css, resulting in visually appealing and interactive button design with sliding text and chevron illusion, and opacity changing from 0 to 100 percent on hover.', 'chapters': [{'end': 2979.703, 'start': 2720.55, 'title': 'Css animated buttons', 'summary': 'Discusses creating css animated buttons with specific size, border, color transition, and keyframes for button animations, including a chevron pop-in effect, and a linear movement animation, resulting in a visually appealing and interactive button design.', 'duration': 259.153, 'highlights': ['Creating CSS animated buttons with specific size, border, and color transition The transcript discusses setting the button size to 40 pixels by 40 pixels, applying a solid one-pixel border with color triple five, and adding a white color transition with ease over 0.3 seconds.', 'Creating keyframes for button animations The chapter explains creating keyframes for button animations, including a linear movement animation with infinite looping and a chevron pop-in effect using pseudo-elements and absolute positioning.', "Applying linear movement animation with infinite looping The chapter details the creation of a linear movement animation called 'loading button animation' with a duration of two seconds, resulting in a visually appealing and interactive button design."]}, {'end': 3188.918, 'start': 2979.763, 'title': 'Creating animated hover effect', 'summary': 'Discusses creating an animated hover effect for a button using css, transitioning properties, and adjusting padding to achieve the illusion of sliding text and chevron, with the opacity changing from 0 to 100 percent on hover.', 'duration': 209.155, 'highlights': ['The chapter discusses adjusting padding to create an animated hover effect, with the chevron appearing with an opacity change from 0 to 100 percent on hover, providing a cool illusion.', 'It covers transitioning properties in CSS, specifically using transition all ease 0.3 seconds to achieve smooth animation on hover.', 'The transcript also explains the process of copying a chevron into the clipboard and pasting it into the CSS, along with adjusting padding to create the illusion of sliding text and chevron on hover.']}], 'duration': 468.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k2720550.jpg', 'highlights': ['Creating CSS animated buttons with specific size, border, and color transition', 'Creating keyframes for button animations', 'Applying linear movement animation with infinite looping', 'Adjusting padding to create an animated hover effect', 'Transitioning properties in CSS for smooth animation on hover', 'Copying a chevron into the clipboard and pasting it into the CSS']}, {'end': 3632.604, 'segs': [{'end': 3273.172, 'src': 'embed', 'start': 3230.29, 'weight': 0, 'content': [{'end': 3231.751, 'text': "And so let's go back over here to the browser.", 'start': 3230.29, 'duration': 1.461}, {'end': 3236.113, 'text': "And if I go up to the sandbox, you're gonna see toggle switch UI buttons.", 'start': 3232.231, 'duration': 3.882}, {'end': 3238.454, 'text': "So they're actually just checkboxes.", 'start': 3236.153, 'duration': 2.301}, {'end': 3242.335, 'text': "So this one's the click me to activate one, and this one is just the toggle.", 'start': 3239.014, 'duration': 3.321}, {'end': 3250.579, 'text': "So we're gonna be using CSS to manipulate the view of this checkbox into an actual switch.", 'start': 3242.775, 'duration': 7.804}, {'end': 3253.94, 'text': "This is what's cool about CSS3 is you can do really cool things like this.", 'start': 3251.499, 'duration': 2.441}, {'end': 3263.565, 'text': 'You can take an element itself and completely transform it into something totally different to serve the purpose of your website or your application.', 'start': 3254.4, 'duration': 9.165}, {'end': 3265.966, 'text': "So let's jump into our code editor again.", 'start': 3263.585, 'duration': 2.381}, {'end': 3273.172, 'text': "We're gonna go to our sandbox And let's go right to the bottom here below our last bit of code, animated buttons.", 'start': 3265.986, 'duration': 7.186}], 'summary': 'Using css3 to transform checkboxes into toggle switch ui buttons.', 'duration': 42.882, 'max_score': 3230.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k3230290.jpg'}, {'end': 3339.391, 'src': 'heatmap', 'start': 3296.205, 'weight': 0.792, 'content': [{'end': 3299.385, 'text': 'And then toggle two uses the same naming conventions, just with toggle two.', 'start': 3296.205, 'duration': 3.18}, {'end': 3301.406, 'text': "All right, so let's jump in here.", 'start': 3300.065, 'duration': 1.341}, {'end': 3307.547, 'text': "We're gonna start off and say toggle dash one and we're gonna start off because this is not a button.", 'start': 3301.426, 'duration': 6.121}, {'end': 3311.468, 'text': "it's not grabbing the Helvetica font family that we've been using.", 'start': 3307.547, 'duration': 3.921}, {'end': 3314.529, 'text': "it's falling back to the bodies font family, which is like Roboto or something.", 'start': 3311.468, 'duration': 3.061}, {'end': 3322.871, 'text': "So we're gonna change the font family and override that to a simple Helvetica, Arial, and then Sans Serif, just a nice and simple font stack.", 'start': 3314.989, 'duration': 7.882}, {'end': 3325.954, 'text': "Display, inline block, we're gonna need to use that.", 'start': 3323.551, 'duration': 2.403}, {'end': 3330.019, 'text': 'Vertical align top, this is just some housekeeping right here.', 'start': 3326.415, 'duration': 3.604}, {'end': 3334.465, 'text': 'Margin, zero, oops, zero, 15 pixels, zero, zero.', 'start': 3330.36, 'duration': 4.105}, {'end': 3335.066, 'text': 'Save that.', 'start': 3334.585, 'duration': 0.481}, {'end': 3339.391, 'text': "If I go over here to my browser, you're gonna see it just kinda went a little bit wonky.", 'start': 3335.106, 'duration': 4.285}], 'summary': 'Using toggle two with specific styling, causing display issues in the browser.', 'duration': 43.186, 'max_score': 3296.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k3296205.jpg'}], 'start': 3188.978, 'title': 'Coding and styling toggle switch ui buttons', 'summary': 'Discusses the coding of toggle switch ui buttons using labels and checkboxes, showcasing the transformation of an element using css3, and the styling of toggle switch in css to achieve a consistent look across different browsers.', 'chapters': [{'end': 3314.529, 'start': 3188.978, 'title': 'Coding toggle switch ui buttons', 'summary': 'Discusses coding toggle switch ui buttons using labels and checkboxes, showcasing the transformation of an element using css3 and the use of toggle classes and naming conventions.', 'duration': 125.551, 'highlights': ['The buttons are different than the previous examples, using labels wrapping the entire thing, an input, and a span, which is a checkbox input to toggle CSS when checked and unchecked.', 'The toggle switch UI buttons are actually just checkboxes, and CSS is used to manipulate the view of the checkbox into an actual switch.', 'CSS3 allows for transforming an element into something totally different to serve the purpose of the website or application, demonstrated through the toggle switch UI buttons.', 'The classes used for the toggle switch UI buttons are toggle one and toggle two, following the same naming conventions for toggle one input and toggle one button.']}, {'end': 3632.604, 'start': 3314.989, 'title': 'Styling toggle switch in css', 'summary': 'Explains how to style a toggle switch in css to achieve a consistent look across different browsers and demonstrates the use of properties like vertical-align, display, position, and transition to create the switch.', 'duration': 317.615, 'highlights': ['The chapter explains how to style a toggle switch in CSS to achieve a consistent look across different browsers Demonstrates the need for consistent styling across browsers to avoid inconsistencies and ensure a similar working state.', 'The use of properties like vertical-align, display, position, and transition to create the switch Demonstrates the use of specific CSS properties such as vertical-align, display, position, and transition to create a styled toggle switch.', 'Explanation of using font family and font size properties to style the switch Explains the use of font family, font size, and text transform properties to style the toggle switch for consistent appearance.']}], 'duration': 443.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k3188978.jpg', 'highlights': ['CSS3 allows for transforming an element into something totally different to serve the purpose of the website or application, demonstrated through the toggle switch UI buttons.', 'The chapter explains how to style a toggle switch in CSS to achieve a consistent look across different browsers Demonstrates the need for consistent styling across browsers to avoid inconsistencies and ensure a similar working state.', 'The use of properties like vertical-align, display, position, and transition to create the switch Demonstrates the use of specific CSS properties such as vertical-align, display, position, and transition to create a styled toggle switch.']}, {'end': 4223.4, 'segs': [{'end': 4135.005, 'src': 'embed', 'start': 4105.966, 'weight': 1, 'content': [{'end': 4114.412, 'text': "And then the adjacent sibling selector, toggle dash two, button, and then the before pseudo element, we're selecting this thing right here.", 'start': 4105.966, 'duration': 8.446}, {'end': 4117.874, 'text': 'When the check box has been checked.', 'start': 4115.332, 'duration': 2.542}, {'end': 4126.299, 'text': "And we're gonna style that up by saying the background is gonna change to 00B3B4.", 'start': 4119.274, 'duration': 7.025}, {'end': 4131.002, 'text': 'The border color is gonna change to the same color.', 'start': 4127.88, 'duration': 3.122}, {'end': 4135.005, 'text': 'And the color of the text will be white.', 'start': 4133.163, 'duration': 1.842}], 'summary': 'Styling changes when checkbox is checked: background becomes 00b3b4, border color matches, and text color becomes white.', 'duration': 29.039, 'max_score': 4105.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k4105966.jpg'}, {'end': 4213.713, 'src': 'embed', 'start': 4184.877, 'weight': 0, 'content': [{'end': 4188.304, 'text': 'Changes to white and then goes back to gray, white, gray.', 'start': 4184.877, 'duration': 3.427}, {'end': 4189.867, 'text': 'So those are your buttons.', 'start': 4188.564, 'duration': 1.303}, {'end': 4190.247, 'text': 'There we go.', 'start': 4189.886, 'duration': 0.361}, {'end': 4191.79, 'text': 'We did a lot of CSS3 there.', 'start': 4190.287, 'duration': 1.503}, {'end': 4193.051, 'text': 'We did the Facebook style buttons.', 'start': 4191.81, 'duration': 1.241}, {'end': 4195.136, 'text': 'We did the 3D buttons like that.', 'start': 4193.433, 'duration': 1.703}, {'end': 4196.678, 'text': 'The gradient border buttons.', 'start': 4195.496, 'duration': 1.182}, {'end': 4203.645, 'text': 'animated buttons, with the background moving and then that kind of manipulating the padding and doing some transitions.', 'start': 4198.121, 'duration': 5.524}, {'end': 4206.988, 'text': 'we did the toggle switches and, uh, this toggle switch here.', 'start': 4203.645, 'duration': 3.343}, {'end': 4213.713, 'text': "so a nice little intro to css3, doing something that's practical that you can use in your websites right now.", 'start': 4206.988, 'duration': 6.725}], 'summary': 'Demonstrated various css3 buttons, including facebook-style, 3d, gradient border, and animated buttons, as well as toggle switches, providing a practical introduction to css3 with immediate application.', 'duration': 28.836, 'max_score': 4184.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k4184877.jpg'}], 'start': 3633.065, 'title': 'Styling form elements with css', 'summary': 'Demonstrates how to manipulate the style of checkboxes and buttons using css, including changing the background color, position, and various properties for creating different button styles, with detailed steps and practical examples.', 'chapters': [{'end': 3940.771, 'start': 3633.065, 'title': 'Css checkbox manipulation', 'summary': 'Demonstrates how to manipulate the style of checkboxes using css, including changing the background color and position based on the checkbox state, with detailed steps and visual examples.', 'duration': 307.706, 'highlights': ['The chapter demonstrates how to manipulate the style of checkboxes using CSS. The transcript provides a detailed explanation of manipulating checkbox styles using CSS, showcasing practical examples and step-by-step instructions.', 'Changing the background color and position based on the checkbox state. The speaker explains how to change the background color and position of the checkbox using CSS, providing specific color codes and pixel measurements for visual changes.', 'Step-by-step instructions and visual examples. The chapter includes step-by-step instructions and visual demonstrations of the CSS manipulation, making it easy for the audience to follow and implement the techniques.']}, {'end': 4223.4, 'start': 3941.552, 'title': 'Css3 button styling', 'summary': 'Covers the detailed process of styling buttons using css3, including setting properties for text, background, border, padding, transitions, cursor, and pseudo elements. it also demonstrates the use of checked state selectors and practical examples of creating various button styles.', 'duration': 281.848, 'highlights': ['The chapter covers the detailed process of styling buttons using CSS3, including setting properties for text, background, border, padding, transitions, cursor, and pseudo elements. The transcript provides a comprehensive guide on styling buttons using CSS3, covering various properties and elements.', 'It also demonstrates the use of checked state selectors and practical examples of creating various button styles. The transcript showcases the application of checked state selectors and practical examples for creating different button styles using CSS3.', "The chapter concludes with a preview of upcoming content for day two's session. The conclusion of the chapter includes a preview of the content for the next session, providing a glimpse of what to expect on day two."]}], 'duration': 590.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pmKyG3NBY_k/pics/pmKyG3NBY_k3633065.jpg', 'highlights': ['The chapter covers the detailed process of styling buttons using CSS3, including setting properties for text, background, border, padding, transitions, cursor, and pseudo elements.', 'The chapter demonstrates how to manipulate the style of checkboxes using CSS, providing specific color codes and pixel measurements for visual changes.', 'It also demonstrates the use of checked state selectors and practical examples of creating various button styles.']}], 'highlights': ['The lesson offers practical knowledge for immediate use in websites, including 3D buttons, gradient bordered buttons, animated buttons, and toggle switches.', 'The instructor, Brad Hussey, will provide guidance on creating various CSS3 fancy buttons throughout the course.', 'The chapter introduces day one of CSS3 in 30 days, where practical learning will be provided over the next 30 days by building CSS3 fancy buttons.', 'Box Shadow is used with prefixed styles for Mozilla, WebKit, and as a fallback for modern browsers, with 94.88% of browsers supporting the unprefixed box shadow.', 'The chapter emphasizes the importance of relative positioning for creating movement and specifies the styling details for a 3D button, such as setting the background color to orange-red, text color to white, padding to 15 pixels top and bottom, 24 pixels left and right, and using a font size of 1.4 Rem.', 'Creating radial gradients using CSS with HSL for color and specifying text styling parameters. radial gradients, HSL color (hue: 54, saturation: 100%, lightness: 40%)', "The chapter focuses on creating gradient border buttons with interactive hover effects by utilizing linear gradients and transition properties, such as 'transition ease in out' with a duration of 0.3 seconds, to enhance user experience.", 'Creating CSS animated buttons with specific size, border, and color transition', 'CSS3 allows for transforming an element into something totally different to serve the purpose of the website or application, demonstrated through the toggle switch UI buttons.', 'The chapter covers the detailed process of styling buttons using CSS3, including setting properties for text, background, border, padding, transitions, cursor, and pseudo elements.']}