Today’s goals:
- Have fun with CSS blend modes and filters to create Insta-like filters for images
- Prepare for a restful short break!
Today’s featured website:
CSSgram:
- We’re going to use this CSS library to add Instagram-like filters to images.
- The effects are achieved by using CSS filters and CSS blend modes. We are also going to use HTML’s figure element.
- Get started:
- Open Notepad++ and start a new page. Call this cssgram.html and save it.
- Begin a new webpage with the basic tags– html, head, title, body. Make sure to include both opening and closing tags.
- Find an image to use from https://www.pexels.com/ or https://unsplash.com/; use any size that is 1200px or less. Download and save the image in the same place as your new webpage. Make sure you rename it to something short and simple.
- Go to the CSSgram library to check out all of the visual effects. Pick one you want to try; just remember the name.
- To use the effect we want, we must first link to the CSSgram style sheet by adding a line of code to our head section. Go here to grab the link.
- We must now grab the HTML to apply the effect to our image. Again, go to the codeshare to get the code. Paste the code into your body section and change the class name to the one you want.
- Looks good but there is a problem, isn’t there? What has happened to the size of your image?
- Add the basic opening and closing tags for a style sheet in the head section (peek at another page to help yourself out).
- To fix this, let’s set up a page wrapper and a container for our image. Go to the codeshare again to grab the code. Copy and paste the code into the style sheet you just created. Change the dimensions of the image div to match the size of your own image (Use your web developer plug-in for Firefox; go to Images, then view image information to get the width and height).
- Finally, add some div tags in your body section for the wrapper and image container.