Class hours: 9:40 – 2:05
- Today is an EHS BDay
- HTML Resume & Flexbox gallery – call me over when you have it
9:45 Position Properties + Some Blending Modes + Image Basics
The position property specifies the type of positioning method used for an element.
There are five different position values:
- static //this is the Default, element renders in order as they appear in the flow of the document
- relative //element is positioned relative to the normal position it would be in relative to itself
- fixed //the element behaves the same as absolute, the element is positioned relative to the browser window
- absolute //the element is positioned relative to its first positioned ancestor element
- sticky //The element is positioned based on the user’s scroll position
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
We can make sense of all this by fumbling about in CodePen. That is why we use it – it’s a sandbox!
/* mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; */ /*We'll also play with some blending modes. To get a cool cut out effect we'll use the screen blending mode on an <h3> with a white background
Image Format Summary
- Smooth transitions between colors
- No Transparency Support
- Images with flat colors or hard edges
- Logos and illustrations without gradients
- Images with transparency. 8 bit can provide one color transparency and 24 bit for variable transparency
- File size correlates with the number of colors used: 2,4,8,16,32,64,128,256
- Your image has to fit on your screen – check your monitor at DPI Love
- Common display widths range from 1920 to 2560 pixels.
- A good rule is to make everything fit into a 1024 pixel display screen. (The exception if you are using large or full page width background images)
- Usually your images are much smaller in size
- In almost all cases, larger image sizes result in larger image files
- All images should be optimized before we put them in our websites. In Photoshop we use the Save for Web process.
- Did you Know that most digital phones save photos at much higher resolution than we need on the web
- Pay attention to the pixel dimensions of the image, you can see this in Photoshop by going to image>image Size
- Compress your Images further than Photoshop using Tiny PNG or Kraken
- Use the right file format for the image
A nice updated blog article about best image sizes for your screens and layouts
10:45 English with Mx. Yopp
11:30 Parallax Website Dev
Let’s continue with our work with classes and <divs> (generic block elements). We’ll learn about:
- setting background images in CSS
- positioning fundamentals
- setting background properties including repeat, positioning and cover
- More scrolling FX – called parallax
Parallax scrolling happens when background content on a webpage moves at a different speed than the foreground content. The effect is applied using one simple CSS declaration: background-attachment.
This is a very nice way to build a multi-page website into one single website.
Activity, using the files provided, we are going to build out a procedure for making a vinaigrette. A vinaigrette is a salad dressing. The focus here is on the positioning of the divs, creating classes and using the proper CSS. Commenting will be helpful. We’ll build this together so you know what it all means.
Link to download the files to your desktop.
Week Twelve Project – Parallax
Think of a procedure or task (walking the dog, brushing teeth, learning to code, drawing a circle, making mac and cheese…..)
Then, create a 5 image parallax scrolling website documenting that procedure or task. Include the appropriate images and sections of documentation. To earn the A you should consider adding custom fonts and styling to enhance your document’s appearance.
If you can, take your own photos. Original content is best.
Remember to include meta data in the head of your project. Along with author and title.
FTP your entire project folder to the server:
- Name it your folder Parallax.
- This project is due Monday, November 28th.
- Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!
Make it nice.
12:45 Text Shadows & Other Text Effects
Fun with text shadows and CSS.
/* text-shadow requires a h value and v value and blur radius */
1:20 20% Production Time & Guided Support
- 20% – Week Twelve
- HTML Resume – Show me for credit
- Flexbox PhotoGallery – Show me for credit
- About Me draft – due today
- About Me Headshot – due today
- Parallax Website