Have you ever wondered why certain elements work in one browser, but not in another browser? We wish they could all be the same, but the fact is, they never will be. Browsers read HTML in different ways, which means that designers have to know how to manipulate their codes to work no matter what browser someone may be looking at. This lesson is about learning to add effects to a box element, but it’s also about learning how to include vendor prefixes into elements that may not read in all browsers.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• When CSS3 came out in 2012, not all of the browsers were compatible with certain properties like transform (6.13) and animation (6.14), so web designers had to add vendor prefixes to the beginning of these questionable properties (like -webkit-transform:… instead of just transform:…).
• Since 2012, however, most browsers have improved enough to read just about all CSS3 properties without the need for prefixes, but it’s good to still include them when coding a webpage with transformations and animations.
• The vendor prefix for Internet Explorer is -ms-. The vendor prefix for Firefox is -moz-. The vendor prefix for Chrome, Safari, and Opera is -webkit-.
• If you add a vendor prefix for a property, you must also include the non-prefixed property. Otherwise, the property will only activate in whatever vendor browser you asked it to work instead of all browsers.
• Opacity refers to the level of transparency that an object has (solid, see-through, or somewhere in between). Adding the opacity property, values most range between 0 (invisible) and 1 (solid). Examples might be opacity: 0.5; or opacity: 0.25;.
• The box-shadow property works just like the text-shadow property from 6.4 where the first value is the x/horizontal direction, the second value is the y/vertical direction, the third value is the blur radius, and the last value is the color of that shadow.
• The filter property is one of the best kept secrets in CSS3 because it isn’t promoted in most CSS3 resources, but it can be used to pass web images through the same filters used on image manipulation programs. For now, it’s best to use the filter property with vendor prefixes like -webkit-filter:…

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.

44. Introduction to CSS3
45. Vendor Prefixes
46. Rounded Corners
47. Box Shadow
48. Box Shadow Techniques
49. Transparency Effect
50. Text Shadow

Assignment #2 (3 Points): Design Project
Within just a couple of minutes, the SoloLearn videos described the purpose of Vendor Prefixes, but they weren’t very specific. Your challenge in this design is to create a website that explains three different browsers (Chrome, Firefox, and IE), but also explains the Vendor Prefix for that browser. Your website must have four things… (1) links to each page must be an image of the browser logo, like the example on the right… (2) at least two shadow effects (either on text or boxes)… (3) a link to the source or sources of your information… (4) information about the browser as well as the appropriate Vendor Prefix.

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): eCampus Checkin
You no longer have any review sheets or review quizzes other than the final ICT Exam at the end of the semester. But if you have gotten this far, you still need to check in on eCampus and complete the quiz question that asks whether you finished all the assignments in this lesson. Once you’ve done that, you’re all set for the next lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.9. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.