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
Смотрите видео Working with text and images: How to add a CSS gradient overlay to a background image онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Made by Christina Truong 12 Август 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,694 раз и оно понравилось 42 людям.