CSS: Images

Focused View

Morten Rand-Hendriksen

1:56:43

0 View

01 Introduction

001 Working with images in CSS.mp4

00:54

002 Exercise files.mp4

02:00

02 Basics

001 Modern image markup.mp4

05:55

002 Getting rid of the space underneath an image.mp4

04:03

003 Fitting an image inside any container.mp4

05:45

004 Create a square (or other proportion) image.mp4

05:48

005 Position an image inside a container.mp4

03:04

006 Use CSS to crop an image.mp4

03:18

007 Fitting an image inside a grid cell.mp4

03:08

008 Fitting an image inside flexbox.mp4

04:38

009 Fitting background images to any container.mp4

02:33

010 Position background image within a container.mp4

04:55

03 Shapes

001 Rounded corners with border-radius.mp4

03:23

002 Cropping images to a perfect circle.mp4

02:37

003 Custom shapes using clip-path.mp4

00:44

004 Clip-path Circle.mp4

03:02

005 Clip-path Ellipse.mp4

01:36

006 Clip-path Polygon.mp4

04:33

007 Clip-path Inset.mp4

02:06

008 Clip-path Path.mp4

02:50

009 Custom shapes using SVG.mp4

04:51

010 Masking an image with another image.mp4

02:38

011 Image text.mp4

01:48

012 Browser compatibility.mp4

03:30

04 Filters and Blending

001 Filtering and blending.mp4

00:39

002 Filters overview.mp4

06:37

003 Combining filters.mp4

02:20

004 Using custom SVG filters.mp4

03:31

005 Mix-blend-mode.mp4

01:33

006 Experimenting with blend modes.mp4

03:16

007 Background-blend-mode.mp4

01:15

05 Practical Use

001 grid gallery.mp4

05:33

002 Animated effects.mp4

03:04

003 Blend mode image enhancement.mp4

03:12

004 Things to keep in mind.mp4

04:58

06 Conclusion

001 Thanks.mp4

01:06

Description

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.

This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Morten Rand-Hendriksen

Instructor's Courses

Since joining forces with lynda.com (now LinkedIn Learning) in 2010, I've 60+ published courses on WordPress, front end web design and development, and web standards, reaching hundreds of thousands of viewers from all over the world. I also contribute to the web community as a public speaker, author, educator, web developer, and design philosopher. I help the web make sense by helping people understand and get the most out of the web, and contribute to the debates about ownership and democratization of information, design philosophy, and the open web.

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.