Transition - Course Cascading Style Sheets (CSS/CSS3) - Part 20 | web Developer courses

Duration: 17:45 minutes

Summary: In this video, we will discuss transitions. Transitions are effects that let an element gradually change from one style to another. We start by indicating the property we want to add the effect to, and then the duration of the effect. The effect will start when the specified property changes value. We will start with a Mr Bool image that has some predefined properties. Then when the user hovers over the image we will have some “hover” properties that we will transition to in 5 seconds. In addition to the transition, we will talk about the border image. The leaf image will be applied as a border image to the article header. Considering that this property is different between browsers, we will see how to apply the border image in Firefox (using -moz) and Chrome (using -webkit).

Technologies and Resources: CSS3, HTML 5, Notepad++, article, width, border, background, transition, hover, box-shadow, border-radius, border-image, url.