Join Chris Converse for an in-depth discussion in this video Creating a gradient background for the panel container, part of Creating an Interactive Animated Timeline with jQuery.
Next, we're going to style the panel container.…Let's hit a few Returns. We'll start with .timeline….panel_container, beginning bracket. First property is going to be position set…to relative. Margin, we're going to set 10 on the top,…0 on the right, 0 on the bottom, 0 on the left.…Width, we're going to set to 100%. And height, we're going to set to 300 pixels.…Now, inside the panel container, we're going to have that background graphic, and…our background graphic fades from a bluish color to a reddish color.…
So, what we want to do in the background is set a gradient.…So, if somebody's browser can open up wider than the actual graphic, we want to…have a graphic fade to orange on the right and to blue on the left.…So, we're going to need to create a gradient.…Now, in the snippets, I did include all of the CSS to create a gradient in all of the…major browsers. But if you want to create your own…gradient, you can go to ColorZilla.com. Now, in the home page, I'm going to come…over and click on the Gradient Generator. Inside of here, we have a very visual…
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features
Skill Level Intermediate
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.