Today’s goals:
- Fix the image size problem with our CSSgram pages
- Have fun with CSS blend modes and filters to create Insta-like filters for images
Today’s featured website:
From Wednesday: CSSgram:
- 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.
CSS Filters and Blend Modes
- Let’s check out CSS filters
- Let’s practice
- Set up a new page in Notepad++ (opening and closing html, head, title, and body tags)
- Add this image to the body section https://www.mhswebdesign.com/storage/2015/11/3.jpg or use one of your own (remember to use the image code)
- Go to the CSS filters page and play around until you have properties you like
- Now, copy that big line of code that was generated for you
- Go back to Notepad++, and set up a style sheet in the head section (peek at your past pages for help)
- Add img { } to your style sheet and then paste the code between the curly brackets; make sure to delete -webkit- and just leave the word filter
- Need help? Scroll to the bottom of the codeshare to check out the demo code.
- Now that you can see what it does, try another one on your own with a different image
- Let’s check out CSS blend modes
- Let’s practice- check this out here