From the course: CSS Shorts
Unlock this course with a free trial
Join today to access over 22,700 courses taught by industry experts.
Add perspective to an element - CSS Tutorial
From the course: CSS Shorts
Add perspective to an element
- [Chris] Hi this is Chris Converse, and in this episode we're going to add some perspective to our sidebar just to add a little visual interest to our layout. So if you'd like to follow along download the exercise files and let's begin by opening the HTML file in a text editor. And so once you have the HTML file open up in the head area you'll see a link to style.css. We'll be opening this in a moment. And if we scroll down inside of the HTML, what I've done here is I have an H1 at the top and then I have a main element. And inside of the main element is an article element and an aside. So these are laid out in columns using CSS flex properties. So what we're gonna do first is we're gonna add an additional element inside of the aside so that we can skew and rotate that particular element. We don't want to rotate the aside again because it is part of the flex element that is flexing against the article element. So inside of the aside let's come in here and let's add a div. Next I'll…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- CSS_creating_a_star.zip
- CSS_curved_header.zip
- CSS_attribute_content.zip
- CSS_color_SVG.zip
- CSS_progress_bar.zip
- CSS_diamond_image_crop.zip
- CSS_perspective_sidebar.zip
- CSS_3d_product_box.zip
- CSS_responsive_iframes.zip
- CSS_required_fields.zip
- CSS_striped_background.zip
- CSS_filtering_a_list.zip
- CSS_Background.zip
- CSS_layout_patterns.zip
- CSS_multiple_background_images.zip
- CSS_photo_gallery.zip
- CSS_accordion.zip
- CSS_aspect_ratio.zip
- CSS_border_image.zip
- CSS_download_type.zip
- CSS_variables.zip
- CSS_not_selector.zip
- CSS_creating_a_vignette.zip
- CSS_parallax_scroll_effect.zip
- CSS_spanning_flex_columns.zip
- CSS_speech_bubble.zip
- CSS_gradients_and_blend_modes.zip
- CSS_see_more_links.zip
- CSS_animating_SVG_elements.zip
- CSS_clip_image.zip
- CSS_focus_on_rollover.zip
- CSS_gradient_text.zip
- CSS_vertically_align_with_flex.zip
- CSS_PNG_shadow.zip
- CSS_placeholder_text.zip
- CSS_Position.zip
- CSS_Float.zip
- CSS_link_buttons.zip
- CSS_visited_links.zip
- CSS_blockquote.zip
- CSS_shadow_effects.zip
- CSS_logo_hyperlink.zip
- CSS_first_last_of_type.zip
- CSS_less_sass_color_vars.zip
- CSS_calc_columns.zip
- CSS_nested_hover_states.zip
- CSS_row_of_links.zip
- CSS_tool_tips.zip
- CSS_table_rows_columns.zip
- CSS_Adjusting_Colors_SASS_and_LESS.zip
- CSS_expandable_mobile_menu.zip
- CSS_vertically_align_text.zip
- CSS_dividing_columns.zip
- CSS_creating_a_grid.zip
- CSS_drop_cap.zip
- CSS_SASS_nesting.zip
- CSS_LESS_nesting.zip
- CSS_flex_columns.zip
- CSS_focus_selector.zip
- CSS_position_center.zip
- CSS_responsive_footer.zip
- CSS_SASS_mixins.zip
- CSS_LESS_mixins.zip
- CSS_checkboxes_to_switches.zip
- CSS_blurring_images.zip
- CSS_overlapping_heading_rule.zip
- CSS_offsite_links.zip
- CSS_pie_chart.zip
- CSS_numbering_items.zip
- CSS_animating_background_images.zip
- CSS_text_indents.zip
- CSS_flex_pseudo_element.zip
- CSS_grayscale_images.zip
- CSS_angled_header.zip
- CSS_creating_polka_dots.zip
- CSS_custom_radio_buttons.zip
- CSS_outlined_text.zip
- CSS_images_with_pseudo_elements.zip
- CSS_gradient_horizontal_rule.zip
- CSS_embed_SVG_in_CSS.zip
- CSS_styling_big_list_numbers.zip
- CSS_detecting_screen_resolution.zip
- CSS_continuing_numbered_list.zip
- CSS_qrcode_for_print.zip
- CSS_interactive_tabbed_panels.zip
- CSS_grid_of_images.zip
- CSS_sticky_footer.zip
- CSS_selection_color.zip
- CSS_transition_mobile_menu.zip
- CSS_animate_sprite_sheet.zip
- CSS_style_telephone_links.zip
- CSS_circular_text_wrap.zip
- CSS_box_sizing.zip
- CSS_text_on_angle.zip
- CSS_triangle_bullets.zip
- CSS_word_wrap.zip
- CSS_3D_text_shadow.zip
- CSS_display_hyperlink_url.zip
- CSS_style_breadcrumb_links.zip
- CSS_nth_child.zip
Contents
-
-
-
-
-
-
Diamond-shaped image crop5m 50s
-
(Locked)
Add perspective to an element5m 55s
-
(Locked)
Responsive iframes5m 42s
-
(Locked)
Create a star10m 33s
-
(Locked)
Color SVG with CSS5m 45s
-
(Locked)
Style a progress bar10m 48s
-
Indicating required form fields6m 47s
-
(Locked)
3D product box: Create the box sides9m 25s
-
(Locked)
3D product box: Add graphics to sides4m 32s
-
(Locked)
3D product box: Resize and position box4m 56s
-
(Locked)
Curve your header4m 4s
-
(Locked)
Add content from attribute values4m 34s
-
(Locked)
Striped pattern with CSS4m 46s
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-