Working with text and images: How to add a CSS gradient overlay to a background image
Learn about the CSS background-image property. Click “show more” for links to extra resources and examples.
Codepen example: https://codepen.io/christinatruong/pe...
How to use CSS text-shadow: • How to use the CSS text-shadow proper...
Bonus HTML & CSS Overview video: • Video
Stock photography: https://unsplash.com, https://shutterstock.com, https://stock.adobe.com
Colour tools: https://colours.neilorangepeel.com, https://rgb.to
CSS color property: / the-color-and-property-values
CSS gradient function: https://developer.mozilla.org/en-US/d...
Chapters:
0:00 Intro
0:34 How to choose an image
0:50 Edit images in Photoshop
2:10 Codepen example
2:30 color and text-shadow
3:28 background-color
7:18 background-image
10:00 Longhand vs shorthand syntax
📚 Want to read an article instead? Check out the companion post on Medium: / how-to-add-a-css-gradient-overlay-to-a-bac...
-----------------------------------------------------------------------------------------
✊🏼 SUPPORT THE CHANNEL
Grab my 11-page CSS Selectors Reference Guide (PDF), grab some CSS merch or contribute to my coffee fund!
☕️ https://ko-fi.com/christinatruong/shop
🛍️ https://madeby.christinatruong.com
-----------------------------------------------------------------------------------------
👀 CHECK OUT MY COURSES!
If you're looking to start a career in web development or refresh your knowledge, check out my courses. Signup below for a 1 month free trial OR check with your local public library or university. Many offer free access!
⭐️ CSS Essential Training - http://christina.fyi/css
⭐️ CSS Layouts: From Float to Flexbox and Grid - http://christina.fyi/css-layouts
⭐️ Getting Your First Job as a Web Developer - http://christina.fyi/dev-jobs
⭐️ Programming Foundations: Version Control with Git - http://christina.fyi/git
⭐️ CSS: Design Systems and Architectures - http://christina.fyi/css-design-systems
⭐️ Getting Your Website Online - http://christina.fyi/website-online
⭐️ Workflow Tools for Web Developers - http://christina.fyi/workflow-tools
-----------------------------------------------------------------------------------------
📚 READ MY MONTHLY NEWSLETTER
Subscribe on Substack: https://bychristina.substack.com
Subscribe on LinkedIn: / decoded-by-christina-6877029256371716096
-----------------------------------------------------------------------------------------
👋🏼 FOLLOW
/ christinatruong
/ christina.is.online
/ christinatruong
#DecodedByChristina #HTML #CSS
Watch video Working with text and images: How to add a CSS gradient overlay to a background image online without registration, duration hours minute second in high quality. This video was added by user Made by Christina Truong 12 August 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,694 once and liked it 42 people.