Join Chris Converse for an in-depth discussion in this video Styles for the panel content, part of Creating an Interactive Animated Timeline with jQuery.
Next, we're going to set some CSS rules for the panel content.…So, at the bottom of our CSS file, let's add a few more rules.…Let's start with .timeline .panel_content, beginning bracket.…Let's set padding: 75 on the top, 10 on the right, 0 on the bottom, 40 on the left.…Then position to relative, end the rule. Next, .timeline panel_content h2,…beginning bracket. Let's set the font size to 1em.…
Color, to white, so, three f's. Then margin: 0 on the top, 0 on the right,…8 pixels on the bottom, and 0 on the left. Next, timeline .panel_content p.…We'll set a margin: 0 on the top, 0 on the right, 1em on the bottom, and 0 pixels on…the left. Position set to relative.…Color, we're going to use rgba: 255, 255, 255; which is white.…And then 0.55 for 55% alpha. Next, we'll starlet timelines,…panel_content .label. Let's set position to absolute.…
Top to 12 pixels, right to 0 pixels, font size 4 ems.…Color, we're going to set this to white as well with a 0.2 alpha.…Text align to right. Then font family, we're going to set that…
- 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.