freeCodeCamp's Create a More Complex Shape Using CSS and HTML

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=z_spTXdXBhs


Duration: 3:24
209 views
6

In this lesson from freeCodeCamp's Applied Visual Design section we look at another cool shape we can create with CSS. In the last lesson we looked at creating a crescent moon shape with our CSS and in this lesson we look at creating a heart shape. We utilize psedo classes to create a heart shape. We use the ::before and ::after pseduo classes to make our heart. The before and after pseduo classes allow us to add something after and before an element we select. We learn that in order for the before and after pseduo-elements to work correctly they need a defined content property which is often used to add things like text or a photo to the element that is selected. For our challenge we leave the content property defined as an empty string.



Other Videos By We Will Code


2018-10-28freeCodeCamp's Learn How Bezier Curves Work, Applied Visual Design
2018-10-26freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design
2018-10-25freeCodeCamp's Animate Multiple Elements at Variable Rates, Applied Visual Design
2018-10-25freeCodeCamp's Animate Elements at Variable Rates, Applied Visual Design
2018-10-14freeCodeCamp's Make a CSS Heartbeat using an Infinite Animation Count
2018-10-14freeCodeCamp's Animate Elements Continually Using an Infinite Animation Count
2018-10-10freeCodeCamp's Create Visual Direction by Fading an Element From Left To Right
2018-10-09freeCodeCamp's Create Movement Using CSS Animation, Applied Visual Design
2018-10-04freeCodeCamp's Modify Fill Mode of an Animation, Applied Visual Design
2018-10-04freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design
2018-10-01freeCodeCamp's Create a More Complex Shape Using CSS and HTML
2018-09-30freeCodeCamp's Create a Graphic Using CSS, Applied Visual Design
2018-09-28freeCodeCamp's Use the CSS Transform Property skewY to Skew
2018-09-28freeCodeCamp's Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Scale an Element on Hover
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Change the Size of an Element
2018-09-26freeCodeCamp's Create Texture by Adding a Subtle Pattern as a Background Image, url function
2018-09-25freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element
2018-09-24freeCodeCamp's Create a Gradual CSS Linear Gradient, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Tone of a Color, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design


Tags:
heart css
create a graphic
css graphics
graphics css
css heart
css shapes