- Level: Advanced
- Duration: 01h 56m
- Release date: 2021-02-16
- Author: Morten Rand-Hendriksen
- Provider: Lynda
CSS: Images
CSS is a toolkit for image manipulation. Whether you want to create distinctive visual effects or simply make the most of available bandwidth, the options for manipulating images in CSS will let you create reusable graphics solutions. In this course, instructor Morten Rand-Hendriksen shows you how much you can edit images in a browser using pure CSS. Morten explains the importance of proper HTML image markup and how to crop, fit, and position an image. He discusses how to use the clip-path property to create a variety of shapes. Morten shows how you can use and combine filters to edit and add effects to your image. He concludes by walking you through several practical examples of how to use what you learned, as well as some important best practices and caveats.
- Introduction02m 54s
- Working with images in CSS00m 54s
- Exercise files02m
- 1. Basics43m 07s
- Modern image markup05m 55s
- Getting rid of the space underneath an image04m 03s
- Fitting an image inside any container05m 45s
- Create a square (or other proportion) image05m 48s
- Position an image inside a container03m 04s
- Use CSS to crop an image03m 18s
- Fitting an image inside a grid cell03m 08s
- Fitting an image inside flexbox04m 38s
- Fitting background images to any container02m 33s
- Position background image within a container04m 55s
- 2. Shapes33m 38s
- Rounded corners with border-radius03m 23s
- Cropping images to a perfect circle02m 37s
- Custom shapes using clip-path00m 44s
- Clip-path: Circle03m 02s
- Clip-path: Ellipse01m 36s
- Clip-path: Polygon04m 33s
- Clip-path: Inset02m 06s
- Clip-path: Path02m 50s
- Custom shapes using SVG04m 51s
- Masking an image with another image02m 38s
- Image text01m 48s
- Browser compatibility03m 30s
- 3. Filters and Blending19m 11s
- Filtering and blending00m 39s
- Filters overview06m 37s
- Combining filters02m 20s
- Using custom SVG filters03m 31s
- Mix-blend-mode01m 33s
- Experimenting with blend modes03m 16s
- Background-blend-mode01m 15s
- 4. Practical Use16m 47s
- 45° grid gallery05m 33s
- Animated effects03m 04s
- Blend mode image enhancement03m 12s
- Things to keep in mind04m 58s
- Conclusion01m 06s
- Thanks!01m 06s
- Build 6 Real World MYSQL Database Management Projects 2021
- Mona Chalabi
- Advanced Design VMware vSphere 7.x | VCAP-DCV Design 2021
- AWS SysOps Admin: Implement Data and Infrastructure Protection Strategies
- AZ-400 Microsoft Azure DevOps Solutions Practice Tests -2022
- Docker for the Absolute Beginner - Hands On - DevOps
- Hypnotherapy Treatment Foundation
- Analyzing Data with Microsoft Power BI - DA100 Practice Exam
- Becoming an Inspiring Mentor
- HTML and CSS: Creating a Basic Website (Interactive)
- Ember.js: The Documentary
- GraphQL: The Documentary
- AWS Certified Solutions Architect - Professional (SAP-C01) Cert Prep: 1 Design for Organizational Complexity
- CCSP Cert Prep: 4 Cloud Application Security
- What Business Leaders Need to Know about Web3 (+ Metaverse)
- Building No-Code Apps with AppSheet: Implementation
- Automation Anywhere: The Big Picture
- Protective Technology with Apache Kafka
- Coding for Visual Learners: Learning JavaScript from Scratch
- StringBuilder Internals