From the course: CSS Shorts
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Create a vignette - CSS Tutorial
From the course: CSS Shorts
Create a vignette
- [Chris] Hi, this is Chris Converse, and in this episode we'll create a vignette effect for a photo by combining a background image with the box shadow properties. So if you'd like to follow along, download the exercise files and I'll begin by opening the HTML file in the text editor. And so once you have the HTML file open, up in the head area you'll see we have a link to style.css, which we'll be opening in a moment. Inside of the body area we have an article element, and inside of the article element is an h1, a div with a class of photo, and a paragraph element. So what we're going to be doing is taking this div with a class of photo, using a pseudo-element to give it some dimension, and applying a background image and then combining those with the css inset properties to create the vignette. So the first thing we'll do is add the background image in the HTML here. So after class equals photo, let's add a style attribute. We're going to set this equal to background image, colon…
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