所有动态

CSS User Interface CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset CSS Resize The resize property specifies if (and how) an element can be resized by a user. This property can have one of the following values: horizontal - user can resize the element horizontally (the width) vertical - user can resize the element vertically (the height) both - user can resize the element both vertically and horizontally none - user cannot resize the element You can resize this div element in a vertical way! To resize: Click and drag at the bottom-right corner! CSS Resize - Only Width The following example lets the user resize only the width of a <div> element: Example div { resize: horizontal; overflow: auto; } Try it Yourself » CSS Resize - Only Height The following example lets the user resize only the height of a <div> element: Example div { resize: vertical; overflow: auto; } Try it Yourself » CSS Resize - Both Width and Height The following example lets the user resize both the width and height of a <div> element: Example div { resize: both; overflow: auto; } Try it Yourself » CSS Disable Resize in Textarea A <textarea> is often resizable by default. Here, we have used the resize property to disable the resizability in <textarea>: Example textarea { resize: none; } Try it Yourself » CSS Outline Offset The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: This paragraph has a black border and a red outline 15px outside the border edge. Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. The following example uses the outline-offset property to add space between the border and the outline: Example div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; } div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; } Try it Yourself » CSS User Interface Properties The following table lists all the user interface properties: Property Description outline-offset Adds space between an outline and the edge or border of an element resize Specifies whether or not an element is resizable by the user ★ +1 Sign in to track progress

CSS Multiple Columns CSS Multi-column Layout The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers: Multi Column Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. CSS Multi-column Properties In this chapter you will learn about the following multi-column properties: column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width CSS Create Multiple Columns The CSS column-count property specifies the number of columns an element should be divided into. Example Divide the text in the <div> element into 3 columns: div { column-count: 3; } Try it Yourself » CSS Column Gap The CSS column-gap property specifies the space between the columns. Example Specify a 40 pixels gap between the columns: div { column-gap: 40px; } Try it Yourself » Column Subpages Continue learning about CSS multiple columns: Column Rules - column-rule, column-span, column-width CSS Multi-columns Properties The following table lists all the multi-columns properties: Property Description column-count Specifies the number of columns an element should be divided into column-fill Specifies how to fill columns column-gap Specifies the gap between the columns column-rule A shorthand property for setting all the column-rule-* properties column-rule-color Specifies the color of the rule between columns column-rule-style Specifies the style of the rule between columns column-rule-width Specifies the width of the rule between columns column-span Specifies how many columns an element should span across column-width Specifies a suggested, optimal width for the columns columns A shorthand property for setting column-width and column-count ★ +1 Sign in to track progress

CSS Pagination Examples CSS Pagination Learn how to create a responsive pagination using CSS. If you have a website with lots of pages, you may want to add some sort of pagination on each page. Pagination is typically a series of links, wrapped in an unordered list (<ul>). Each link represents an individual page number. In addition there are "previous" and "next" controls: « 1 2 3 4 5 » Example A simple pagination: .pagination { display: flex; justify-content: center; list-style: none; /* remove list bullets */ padding: 0px; } .pagination li a { display: block; /* let links fill the list item */ padding: 8px 12px; text-decoration: none; border: 1px solid gray; color: black; margin: 0 4px; border-radius: 5px; /* add rounded borders */ } Try it Yourself » Example Explained Style the pagination container with: display: flex; to arrange the page numbers horizontally justify-content: center; to center align them list-style: none; to remove the list bullets The style the <a> elements within the <li> elements for the look of the page numbers, with properties like display, padding, text-decoration, border, background-color, color, font-size, and border-radius. Pagination With an Active Class Highlight the currently active page with an .active class, to indicate which page the user is on: « 1 2 3 4 5 » Example Pagination with an .active class: .pagination li a.active { background-color: #4CAF50; color: white; } Try it Yourself » Pagination With a Disabled Class If the user are currently on the last page, the "Next" button should be disabled. Here, we add a .disabled class, and sets the color , cursor and pointer-events properties, to make the "Next" button disabled: « 1 2 3 4 5 » Example Pagination with a .disabled class: .pagination li a.disabled { color: #dddddd; cursor: not-allowed; pointer-events: none; } Try it Yourself » Pagination Subpages Continue learning about CSS pagination: Pagination Styles - hover effects, transitions, breadcrumbs ★ +1 Sign in to track progress

CSS Styling Buttons CSS Styling Buttons With CSS, different HTML buttons can be styled in many ways. The most common CSS properties for styling buttons are: background-color - defines the background color of a button color - defines the text color of a button border - defines the border of a button padding - defines the space between the text and the border of a button border-radius - adds rounded corners to a button box-shadow - adds shadows to a button text-align - centers the text of a button font-size - defines the font size of the text on a button text-decoration - removes the underline for <a> elements used as buttons cursor - changes the mouse cursor when hovering over the button Buttons are typically created with the HTML <button> element, the <input type="button"> element, or an <a> element styled as a button. CSS Basic Button Styling Default Button CSS Button Example A basic button styling for different HTML elements: .button { background-color: red; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } Try it Yourself » CSS Button Colors The CSS background-color property is used to define the background color of a button. The CSS color property is used to define the text color of a button. Green Blue Red Gray Black Example Buttons with different colors: .button1 {background-color: #04AA6D;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ Try it Yourself » CSS Button Sizes The CSS font-size property is used to define the font size for the text on a button: 10px 12px 16px 20px 24px Example Buttons with different font size: .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} Try it Yourself » The CSS padding property is used to define the space between the text and the border of a button: 10px 24px 12px 28px 14px 40px 32px 16px 16px Example Buttons with different padding: .button1 {padding: 10px 24px;} .button2 {padding: 12px 28px;} .button3 {padding: 14px 40px;} .button4 {padding: 32px 16px;} .button5 {padding: 16px;} Try it Yourself » CSS Rounded Buttons The CSS border-radius property is used to add rounded corners to a button: 2px 4px 8px 12px 50% Example Buttons with different rounded corners: .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} Try it Yourself » CSS Button Borders The CSS border property is used to define the border of a button: Green Blue Red Gray Black Example Buttons with different borders: .button1 {border: 2px solid #04AA6D;} .button2 {border: 2px dotted #008CBA;} .button3 {border: 2px dashed #f44336;} .button4 {border: 1px solid #e7e7e7;} .button5 {border: 1px solid #555555;} Try it Yourself » Button Subpages Continue learning about CSS buttons: Button Hover Effects - hover, shadow, disabled, width Button Groups - horizontal/vertical groups, animated buttons ★ +1 Sign in to track progress

CSS Masking The CSS mask-image Property CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element. The CSS mask-image property specifies a mask layer image. The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element. Use a PNG Image as the Mask Layer To use a PNG image as the mask layer, use a url() value to pass in the mask layer image. The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent. Here is the mask image ("w3logo.png") we will use: Here is an image from Cinque Terre, in Italy: Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy: Example Here is the source code: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; } Try it Yourself » The mask-image property specifies the image to be used as a mask layer for an element. The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once). Repeat the Mask Layer Image If we omit the mask-repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy: Example Omit the mask-repeat property: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); } Try it Yourself » Position the Mask Layer Image The mask-position property sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Here, we position the mask image in center: Example Position the mask layer image: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; mask-position: center; } Try it Yourself » CSS All Masking Properties The following table lists all the CSS masking properties: Property Description mask-clip Specifies which area is affected by a mask image mask-composite Specifies a compositing operation used on the current mask layer with the mask layers below it mask-image Specifies an image to be used as a mask layer for an element mask-mode Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask-origin Specifies the origin position (the mask position area) of a mask layer image mask-position Sets the starting position of a mask layer image (relative to the mask position area) mask-repeat Specifies how the mask layer image is repeated mask-size Specifies the size of a mask layer image mask-type Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask ★ +1 Sign in to track progress

CSS object-position Property CSS object-position Property The CSS object-position property is used together with the object-fit property to specify how an <img> or <video> should be positioned with x/y coordinates within its container. The first value controls the x-axis and the second value controls the y-axis. The value can be a string (left, center or right), or a number (in px or %). Negative values are also allowed. Using the object-position Property Let's say that the part of the image that is shown, is not the part that we want. To position the image, we will use the object-position property. Here we position the image so that the great old building is in center: Example .image-container { width: 200px; height: 300px; border: 1px solid black; } .image-container img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 100%; } Try it Yourself » Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center: Example .image-container { width: 200px; height: 300px; border: 1px solid black; } .image-container img { width: 100%; height: 100%; object-fit: cover; object-position: 15% 100%; } Try it Yourself » CSS Object-* Properties The following table lists the CSS object-* properties: Property Description object-fit Specifies how an <img> or <video> should be resized to fit its container object-position Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" ★ +1 Sign in to track progress

CSS object-fit Property CSS object-fit Property The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property can take one of the following values: fill - This is default. Does not preserve the aspect ratio. The image is resized to fill the container (the image will be stretched or squeezed to fit). cover - Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed. contain - Preserves the aspect ratio, and fits the image inside the container, without cutting - leaves empty space if needed. none - The image is not resized. scale-down - the image is scaled down to the smallest version of none or contain. Using object-fit: fill; The object-fit: fill; value does not preserve the aspect ratio, and the image is resized to fill the container (the image will be stretched or squeezed to fit): Example .image-container { width: 200px; height: 300px; border: 1px solid black; margin-bottom: 25px; } .image-container img { width: 100%; height: 100%; object-fit: fill; } Try it Yourself » Using object-fit: cover; The object-fit: cover; value preserves the aspect ratio, and the image fills the container. The image will be clipped to fit: Example .image-container { width: 200px; height: 300px; border: 1px solid black; margin-bottom: 25px; } .image-container img { width: 100%; height: 100%; object-fit: cover; } Try it Yourself » Using object-fit: contain; The object-fit: contain; value preserves the aspect ratio, and fits the image inside the container, without cutting - will leave empty space if needed: Example .image-container { width: 200px; height: 300px; border: 1px solid black; margin-bottom: 25px; } .image-container img { width: 100%; height: 100%; object-fit: contain; } Try it Yourself » Using object-fit: none; The object-fit: none; value does not resize or scale the image: Example .image-container { width: 200px; height: 300px; border: 1px solid black; margin-bottom: 25px; } .image-container img { width: 100%; height: 100%; object-fit: none; } Try it Yourself » Using object-fit: scale-down; The object-fit: scale-down; value scales the image down to the smallest version of none or contain: Example .image-container { width: 200px; height: 300px; border: 1px solid black; margin-bottom: 25px; } .image-container img { width: 100%; height: 100%; object-fit: scale-down; } Try it Yourself » Another Example Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height of the container. In the following example we do NOT use object-fit, so when we resize the browser window, the aspect ratio of the images will be destroyed: Example Try it Yourself » In the next example, we use object-fit: cover;, so when we resize the browser window, the aspect ratio of the images is preserved: Example Try it Yourself » CSS object-* Properties The following table lists the CSS object-* properties: Property Description object-fit Specifies how an <img> or <video> should be resized to fit its container object-position Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" ★ +1 Sign in to track progress

CSS Image Shapes With CSS it is easy to shape (clip) images to circles, ellipses and polygons. CSS clip-path Property and the circle() Function The clip-path property lets you clip an element to a basic shape. The circle() function defines a circle with a radius and a position. Here we clip an image to a circle with 50% radius: Example Clip an image to a circle with 50% radius: img { clip-path: circle(50%); } Try it Yourself » We can also specify the center of the circle. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center. Here we clip an image to a circle with 50% radius and position the center of the circle to the right: Example Clip an image to a circle with 50% radius and position the center of the circle to the right: img { clip-path: circle(50% at right); } Try it Yourself » CSS shape-outside and circle() The shape-outside property lets you define a shape for the wrapping of the inline content. The circle() function defines a circle with a radius and a position. Here we clip an image to a circle with 40% radius, and set the shape-outside to a circle with 45% radius (to shape the text): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis. Example Use of circle(), clip-path and shape-outside: img { float: left; clip-path: circle(40%); shape-outside: circle(45%); } Try it Yourself » CSS clip-path and ellipse() The clip-path property lets you clip an element to a basic shape. The ellipse() function defines an ellipse with two radii x and y. Here we clip an image to an ellipse with 50% radius x and 35% radius y: Example Clip an image to an ellipse with 50% radius x and 35% radius y: img { clip-path: ellipse(50% 35%); } Try it Yourself » We can also specify the center of the ellipse. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center. Here we clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right: Example Clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right: img { clip-path: ellipse(50% 35% at right); } Try it Yourself » CSS shape-outside and ellipse() Here we clip an image to an ellipse with 40% radius x and 50% radius y, and set the shape-outside to an ellipse with 45% radius x and 50% radius y (to shape the text): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis. Example Use of ellipse(), clip-path and shape-outside: img { float: left; clip-path: ellipse(40% 50%); shape-outside: ellipse(45% 50%); } Try it Yourself » CSS polygon() Function The polygon() function defines a polygon. This function contains points that define the polygon. This can be a length or percentage value. Each point is a pair of x and y coordinates. 0 0 defines the left top corner and 100% 100% defines the right bottom corner. The polygon() function is used within the clip-path property and the shape-outside property. Here we clip an image to a polygon: Example Clip an image to a polygon: img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Try it Yourself » CSS Properties and Functions The following table lists the CSS properties and functions used in this chapter: Property/Function Description clip-path Lets you clip an element to a basic shape or to an SVG source shape-outside Lets you define a shape for the wrapping of the inline content circle() Defines a circle with a radius and a position ellipse() Defines an ellipse with two radii x and y polygon() Defines a polygon ★ +1 Sign in to track progress

CSS Image Filter Effects CSS Filters The CSS filter property is used to add visual effects (like blur and saturation) to elements. Within the filter property, you can use the following CSS functions: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() The CSS blur() Function The blur() filter function applies a blur effect to an element. A larger value will create more blur. If no value is specified, 0 is used (no effect). Example Apply different blur effects to <img> elements: #img1 { filter: blur(2px); } #img2 { filter: blur(6px); } Try it Yourself » The CSS brightness() Function The brightness() filter function adjusts the brightness of an element. 100% is default, and represents the original brightness Values over 100% will provide brighter results Values under 100% will provide darker results 0% will make the image completely black Example Make an image brighter and darker than the original: #img1 { filter: brightness(150%); } #img2 { filter: brightness(50%); } Try it Yourself » The CSS contrast() Function The contrast() filter function adjusts the contrast of an element. 100% is default, and represents the original contrast Values over 100% increases the contrast Values under 100% decreases the contrast 0% will make the image completely gray Example Increase and decrease the contrast for an image: #img1 { filter: contrast(150%); } #img2 { filter: contrast(50%); } Try it Yourself » The CSS drop-shadow() Function The drop-shadow() filter function applies a drop-shadow effect to an image. Example Add different drop-shadow effects to an image: #img1 { filter: drop-shadow(8px 8px 10px gray); } #img2 { filter: drop-shadow(10px 10px 7px lightblue); } Try it Yourself » The CSS grayscale() Function The grayscale() filter function converts an image to grayscale. 100% (or 1) will make the image completely grayscale 0% (or 0) will have no effect Example Set various grayscale for an image: #img1 { filter: grayscale(1); } #img2 { filter: grayscale(60%); } #img3 { filter: grayscale(0.4); } Try it Yourself » The CSS hue-rotate() Function The hue-rotate() filter function applies a color rotation to an element. This function applies a hue rotation on the image. The value defines the number of degrees around the color circle the image will be adjusted. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. 0deg represents the original image. Example Set various color rotations for an image: #img1 { filter: hue-rotate(200deg); } #img2 { filter: hue-rotate(90deg); } #img3 { filter: hue-rotate(-90deg); } Try it Yourself » The CSS invert() Function The invert() filter function inverts the color of an image. 100% (or 1) will fully invert the colors 0% (or 0) will have no effect Example Invert the colors of an image: #img1 { filter: invert(0.3); } #img2 { filter: invert(70%); } #img3 { filter: invert(100%); } Try it Yourself » The CSS opacity() Function The opacity() filter function applies an opacity effect to an element. 100% (or 1) will have no effect 50% (or 0.5) will make the element 50% transparent 0% (or 0) will make the element completely transparent Example Set various opacity for an image: #img1 { filter: opacity(80%); } #img2 { filter: opacity(50%); } #img3 { filter: opacity(0.2); } Try it Yourself » The CSS saturate() Function The saturate() filter function adjusts the saturation (color intensity) of an element. 100% (or 1) will have no effect 0% (or 0) will make the element completely unsaturated 200% (or 2) will make the element super saturated Example Set various saturations for an image: #img1 { filter: saturate(0); } #img2 { filter: saturate(100%); } #img3 { filter: saturate(200%); } Try it Yourself » The CSS sepia() Function The sepia() filter function converts an image to a sepia tone (a warmer, more brown/yellow color). 0% (or 0) will have no effect 100% (or 1) applies full sepia effect Example Set various sepia for an image: #img1 { filter: sepia(1); } #img2 { filter: sepia(60%); } #img3 { filter: sepia(0.4); } Try it Yourself » CSS Filter Functions The following table lists the CSS filter functions: Function Description blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element contrast() Adjusts the contrast of an element drop-shadow() Applies a drop-shadow effect to an image grayscale() Converts an image to grayscale hue-rotate() Applies a color rotation to an element invert() Inverts the color of an image opacity() Applies an opacity effect to an element saturate() Adjusts the saturation (color intensity) of an element sepia() Converts an image to sepia ★ +1 Sign in to track progress

CSS Centering Images Centering Images With CSS, you can center images with several methods. An image can be centered horizontally, vertically, or both. Center an Image Horizontally To display a horizontally centered image, we can use margin: auto; or display: flex;. 1. Using margin: auto One way to center an image horizontally on a page is to use margin: auto. Since the <img> element is an inline element by default (and margin: auto does not have any effect on inline elements) we must convert the image to a block element, with display: block. In addition, we have to define a width. The width of the image must be smaller than the width of the page. Here is a horizontally centered image using margin: auto: Example Horizontally centered image using margin: auto: img { display: block; margin: auto; width: 50%; } Try it Yourself » 2. Using display: flex Another way to center an image horizontally on a page is to use display: flex. Here, we put the <img> element inside a <div> container. We add the following CSS to the div container: display: flex justify-content: center (centers the image horizontally in the div container) Then, we set a width for the image. The width of the image must be smaller than the width of the page. Here is a horizontally centered image using display: flex: Example Horizontally centered image using display: flex: div { display: flex; justify-content: center; } img { width: 50%; } Try it Yourself » Vertical and Horizontal Centering To display an image that is both vertically and horizontally centered (true centering), we can use display: flex; or display: grid;. 1. Using display: flex To display an image that is both vertically and horizontally centered with flexbox, we use a combination of: display: flex; justify-content: center; (centers the image horizontally in the container) align-items: center; (centers the image vertically in the container) height: 600px; (the height of the container) Here, we also put the <img> element inside a <div> container. Then, we set a width for the image (must be smaller than the width of the container). Here is a vertically and horizontally centered image with flexbox: Example True centering using display: flex: div { display: flex; justify-content: center; align-items: center; height: 600px; border: 1px solid black; } img { width: 50%; } Try it Yourself » 2. Using display: grid To display an image that is both vertically and horizontally centered with grid, we use a combination of: display: grid; place-items: center; (centers the image horizontally and vertically in the container) height: 600px; (the height of the container) Here, we also put the <img> element inside a <div> container. Then, we set a width for the image (must be smaller than the width of the container). Here is a vertically and horizontally centered image with grid: Example True centering using display: grid: div { display: grid; place-items: center; height: 600px; border: 1px solid black; } img { width: 50%; } Try it Yourself » ★ +1 Sign in to track progress

CSS Responsive Modal Images Responsive Modal Image Gallery A modal image gives a user the ability to display a larger version of an image, without navigating away from the current page. When a user clicks on a modal image, it shows a popup window that appears on top of the main content of the webpage, often with a semi-transparent background. The modal must be closed by the user, typically with a "close" button or an "X" sign in top-right corner. This example demonstrates how to use HTML, CSS and JavaScript together, to create a responsive modal image gallery. We use CSS to create a modal window (dialog box), and hide it by default. Then, we use a JavaScript to show the modal window with the correct image inside, when a user clicks on the image: × × × × Example <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } h1 { text-align: center; padding: 20px; } .gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 15px; } .gallery-item { position: relative; width: calc(25% - 20px); height: auto; margin: 10px; cursor: pointer; transition: transform 0.5s ease; } .gallery-item:hover { transform: scale(1.1); } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; transition: opacity 0.5s ease; } /* Modal content (image) */ .modal-content { position: relative; width: 90%; height: auto; max-width: 90%; max-height: 90%; border-radius: 5px; overflow: hidden; animation: zoomIn 0.5s; } @keyframes zoomIn { from {transform: scale(0.6);} to {transform: scale(1);} } .modal.show { display: flex; opacity: 1; } /* Close button */ .close { position: absolute; top: 10px; right: 15px; color: #ffffff; font-size: 35px; font-weight: bold; cursor: pointer; transition: transform 0.3s; } /* Caption of modal image */ .caption { position: absolute; bottom: 15px; width: 100%; text-align: center; color: #ffffff; font-size: 24px; } @media screen and (max-width: 768px) { .gallery-item { width: calc(50% - 20px); } } @media screen and (max-width: 480px) { .gallery-item { width: calc(100% - 20px); } } </style> </head> <body> <h1>Responsive Modal Images</h1> <div class="gallery"> <img src="img_5terre.jpg" alt="Cinque Terre" class="gallery-item"> <img src="img_forest.jpg" alt="Forest" class="gallery-item"> <img src="img_lights.jpg" alt="Northern Lights" class="gallery-item"> <img src="img_mountains.jpg" alt="Mountains" class="gallery-item"> </div> <div id="modal1" class="modal"> <span class="close">&times;</span> <img src="img_5terre.jpg" alt="Cinque Terre" class="modal-content"> <div class="caption"></div> </div> <div id="modal2" class="modal"> <span class="close">&times;</span> <img src="img_forest.jpg" alt="Forest" class="modal-content"> <div class="caption"></div> </div> <div id="modal3" class="modal"> <span class="close">&times;</span> <img src="img_lights.jpg" alt="Northern Lights" class="modal-content"> <div class="caption"></div> </div> <div id="modal4" class="modal"> <span class="close">&times;</span> <img src="img_mountains.jpg" alt="Mountains" class="modal-content"> <div class="caption"></div> </div> <script> function openModal(modalId, caption) { let modal = document.getElementById(modalId); modal.style.display = "flex"; modal.classList.add("show"); let message = modal.querySelector(".caption"); message.innerText = caption; } function closeModal(modalId) { let modal = document.getElementById(modalId); modal.classList.remove("show"); setTimeout(function () { modal.style.display = "none"; modal.querySelector(".caption").innerText = ""; }, 300); } </script> </body> </html> Try it Yourself » ★ +1 Sign in to track progress

CSS Styling Images Learn how to style images using CSS. Rounded Images You can use the border-radius property to create rounded images: Example Rounded Image: img { border-radius: 8px; } Try it Yourself » Example Circled Image: img { border-radius: 50%; } Try it Yourself » Tip: Look at the CSS Image Shapes chapter to learn how to shape (clip) images to circles, ellipses and polygons. Thumbnail Images Use the border property to create thumbnail images: Example img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } Try it Yourself » Thumbnail image as a link: Example img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } Try it Yourself » Responsive Images Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect: If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following: Example img { max-width: 100%; height: auto; } Try it Yourself » Tip: Read more about Responsive Web Design in our CSS RWD Tutorial. Polaroid Images / Cards Cinque Terre Northern Lights Example div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } img {width: 100%} div.container { text-align: center; padding: 10px 20px; } Try it Yourself » Responsive Image Gallery CSS can be used to create responsive image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect: Cinque Terre Green Forest Northern Lights Mountains Example @media only screen and (max-width: 768px) { div.gallery-item { width: calc(50% - 20px); } } @media only screen and (max-width: 480px) { div.gallery-item { width: calc(100% - 20px); } } Try it Yourself » Tip: Read more about Responsive Web Design in our CSS RWD Tutorial. Image Styling Subpages Continue learning about CSS image styling: Image Effects - opacity, text positioning, fade overlays Hover Overlays - slide effects, flip ★ +1 Sign in to track progress

CSS Tooltip CSS Tooltip A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element: Top Tooltip text Right Tooltip text Bottom Tooltip text Left Tooltip text CSS Create a Basic Tooltip Create a tooltip that appears when the user moves the mouse over an element: Example <style> /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* Add dots under the hoverable text */ cursor: pointer; } /* Tooltip text */ .tooltiptext { visibility: hidden; /* Hidden by default */ width: 130px; background-color: black; color: #ffffff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; /* Ensure tooltip is displayed above content */ } /* Show the tooltip text on hover */ .tooltip:hover .tooltiptext { visibility: visible; } </style> <div class="tooltip">Hover over me <span class="tooltiptext">Some tooltip text</span> </div> Try it Yourself » Example Explained HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext". CSS: The tooltip class use position:relative, which is needed to position the tooltip text (position:absolute). Tip: See examples below on how to position the tooltip. The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover. The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip". Positioning the Tooltip You can position the tooltip as you like. Here we will show how to position the tooltip to the left, right, top and bottom. Right- and Left-aligned Tooltip In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (<div>). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left. Example Right-aligned tooltip: .tooltiptext { top: -5px; left: 105%; } Result: Hover over me Tooltip text Try it Yourself » Example Left-aligned tooltip: .tooltiptext { top: -5px; right: 105%; } Result: Hover over me Tooltip text Try it Yourself » Top- and Bottom-aligned Tooltip If you want the tooltip to appear on top or on the bottom, see examples below. Note that we use the margin-left property with a value of minus 65 pixels. This is to center the tooltip above/below the hoverable text. It is set to the half of the tooltip's width (130/2 = 65). Example Top-aligned tooltip: .tooltiptext { width: 130px; bottom: 100%; left: 65%; margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */ } Result: Hover over me Tooltip text Try it Yourself » Example Bottom-aligned tooltip: .tooltiptext { width: 130px; top: 100%; left: 50%; margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */ } Result: Hover over me Tooltip text Try it Yourself » Fade-in Tooltip If you want a tooltip that fades in, use the CSS transition property and the opacity property, and go from being completely invisible to 100% visible, in a number of specified seconds (2 second in our example): Example .tooltiptext { opacity: 0; transition: opacity 2s; } .tooltip:hover .tooltiptext { opacity: 1; } Try it Yourself » Tooltip Subpages Continue learning about CSS tooltips: Tooltip Arrows - arrow styling, fade-in effects ★ +1 Sign in to track progress

CSS Animations CSS Animations CSS allows animation of HTML elements without using JavaScript! CSS What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. CSS animation-name and animation-duration The animation-name property specifies a name for the animation. The animation-duration property defines how long an animation should take to complete. If this property is not specified, no animation will occur, because the default value is 0s (0 seconds). CSS @keyframes Rule When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The following example binds the "myAnimation" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow": Example /* The animation code */ @keyframes myAnimation { from {background-color: red;} to {background-color: yellow;} } /* The element to apply the animation to */ div { width: 100px; height: 100px; background-color: red; animation-name: myAnimation; animation-duration: 4s; } Try it Yourself » In the example above we have used the keywords "from" and "to" in the @keyframes rule, which represents 0% (start) and 100% (complete). It is also possible to use percent. By using percent, you can add as many style changes as you like. The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: Example @keyframes myAnimation { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: myAnimation; animation-duration: 4s; } Try it Yourself » The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: Example @keyframes myAnimation { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; } Try it Yourself » Animation Subpages Continue learning about CSS animations: Animation Timing - delay, iteration count, timing function Animation Properties - direction, fill mode, shorthand ★ +1 Sign in to track progress

CSS Transitions CSS Transitions CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: CSS The CSS transition Property To create a transition effect, you must specify the CSS property you want to add a transition to, and the duration of the transition. The CSS transition property is a shorthand property for: transition-property transition-duration transition-timing-function transition-delay CSS Transition Example The following example shows a 100px * 100px <div> element. The <div> element has specified a transition effect for the width property, with a duration of 2 seconds: Example div { width: 100px; height: 100px; background-color: red; transition: width 2s; } How to Trigger the Transition The transition is triggered when there is a change in the element's properties. This often happens within pseudo-classes (:hover, :active, :focus, or :checked). So, from the code above, the transition effect will start when the width property changes value. Now, we add a div:hover class that specifies a new value for the width property when a user mouses over the <div> element: Example div:hover { width: 300px; } Try it Yourself » Notice that when the cursor mouses out of the element, it will gradually change back to its original style. Change Multiple Property Values You can change multiple properties by separating them by commas. The following example adds a transition effect for the width, height, and background-color properties, with a duration of 2 seconds for the width, 4 seconds for the height, and 3 seconds for the background-color: Example Add a transition effect for the width, height, and background-color properties: div { transition: width 2s, height 4s, background-color 3s; } Try it Yourself » Transition Subpages Continue learning about CSS transitions: Transition Timing - speed curves, delay, shorthand CSS Transition Properties The following table lists all the CSS transition properties: Property Description transition A shorthand property for setting the four transition properties into a single property transition-delay Specifies a delay (in seconds) for the transition effect transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete transition-property Specifies the name of the CSS property the transition effect is for transition-timing-function Specifies the speed curve of the transition effect ★ +1 Sign in to track progress

CSS 3D Transforms CSS 3D Transforms The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. Mouse over the elements below to see the difference between a 2D and a 3D transformation: 2D rotate 3D rotate CSS 3D Transforms Functions With the CSS transform property you can use the following 3D transformation functions: rotateX() rotateY() rotateZ() The CSS rotateX() Function The rotateX() function rotates an element around its X-axis at a given degree: Example #myDiv { transform: rotateX(150deg); } Try it Yourself » The CSS rotateY() Function The rotateY() function rotates an element around its Y-axis at a given degree: Example #myDiv { transform: rotateY(150deg); } Try it Yourself » The CSS rotateZ() Function The rotateZ() function rotates an element around its Z-axis at a given degree: Example #myDiv { transform: rotateZ(90deg); } Try it Yourself » CSS Transform Properties The following table lists all the 3D transform properties: Property Description transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements transform-style Specifies how nested elements are rendered in 3D space perspective Specifies the perspective on how 3D elements are viewed perspective-origin Specifies the bottom position of 3D elements backface-visibility Defines whether or not an element should be visible when not facing the screen CSS 3D Transform Functions Function Description matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values translate3d() Defines a 3D translation translateZ() Defines a 3D translation, using only the value for the Z-axis scale3d() Defines a 3D scale transformation scaleZ() Defines a 3D scale transformation by giving a value for the Z-axis rotate3d() Defines a 3D rotation rotateX() Defines a 3D rotation along the X-axis rotateY() Defines a 3D rotation along the Y-axis rotateZ() Defines a 3D rotation along the Z-axis perspective() Defines a perspective view for a 3D transformed element ★ +1 Sign in to track progress

CSS 2D Transforms CSS 2D Transforms The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. Mouse over the element below to see a 2D transformation: 2D rotate CSS 2D Transforms Functions With the CSS transform property you can use the following 2D transformation functions: translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix() The CSS translate() Function The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position: Example div { transform: translate(50px, 100px); } Try it Yourself » The CSS rotate() Function The rotate() function rotates an element clockwise or counter-clockwise according to a given degree. The following example rotates the <div> element clockwise with 20 degrees: Example div { transform: rotate(20deg); } Try it Yourself » Using negative values will rotate the element counter-clockwise. The following example rotates the <div> element counter-clockwise with 20 degrees: Example div { transform: rotate(-20deg); } Try it Yourself » Transform Subpages Continue learning about CSS 2D transforms: Scale Functions - scale(), scaleX(), scaleY() Skew and Matrix - skew(), skewX(), skewY(), matrix() CSS Transform Properties The following table lists all the 2D transform properties: Property Description transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements CSS 2D Transform Functions Function Description matrix() Defines a 2D transformation, using a matrix of six values translate() Defines a 2D translation, moving the element along the X- and the Y-axis translateX() Defines a 2D translation, moving the element along the X-axis translateY() Defines a 2D translation, moving the element along the Y-axis scale() Defines a 2D scale transformation, scaling the elements width and height scaleX() Defines a 2D scale transformation, scaling the element's width scaleY() Defines a 2D scale transformation, scaling the element's height rotate() Defines a 2D rotation, the angle is specified in the parameter skew() Defines a 2D skew transformation along the X- and the Y-axis skewX() Defines a 2D skew transformation along the X-axis skewY() Defines a 2D skew transformation along the Y-axis ★ +1 Sign in to track progress

CSS Custom Fonts The CSS @font-face Rule The CSS @font-face rule allows you to define and load custom fonts for use on a webpage. The font does not have to be installed on the user's computer. When you have found/bought the font you want to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Common Font Formats The most widely used font formats are WOFF/WOFF2 for web pages and TTF/OTF for desktop. WOFF/WOFF2 (Web Open Font Format) WOFF/WOFF2 are optimized to reduce file size and are the ideal font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF/WOFF2 are supported by all major browsers. TTF (TrueType Fonts) and OTF (OpenType Fonts) TTF was developed in the late 1980s, by Apple. OTF was developed by Apple and Microsoft. TTF is the most common font format for both the Mac OS and Microsoft Windows operating systems. OTF is built on TTF, as a more advanced, scalable format that supports rich typesetting features. Both types are popular because of their accessibility and quality, but they are not optimized for web use. Use Your Custom Font In the @font-face rule; first specify a name for the custom font (e.g. "myFont") in the font-family descriptor, then point to the font file in the src descriptor. Then, to use the custom font in an HTML element, refer to the name of the font ("myFont") through the font-family property: Example @font-face { font-family: myFont; /* set name */ src: url(sansation_light.woff); /* url of the font */ } p { font-family: myFont; /* use font */ } Try it Yourself » Bold Custom Font You must add another @font-face rule containing descriptors for bold text: Example @font-face { font-family: myFont; src: url(sansation_bold.woff); font-weight: bold; } Try it Yourself » The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font. Browsers will use this file whenever a piece of text with the font-family "myFont" should render as bold. Tip: This way you can have many @font-face rules for the same font. CSS @font-face Descriptors The following table lists the font descriptors that can be defined inside the @font-face rule: Descriptor Description font-family Required. Defines a name for the font src Required. Defines the URL of the font file font-stretch Optional. Defines how the font should be stretched. Default is "normal" font-style Optional. Defines how the font should be styled. Default is "normal" font-weight Optional. Defines the weight of the font. Default is "normal" font-display Optional. Defines how the font loads and displays. Default is "auto" unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" ★ +1 Sign in to track progress

CSS Shadow Effects Shadows With CSS you can create shadow effects! Hover over me! CSS Text Shadow The CSS text-shadow property applies a shadow to text. In its simplest use, you only specify the horizontal and the vertical shadow. In addition, you can add a shadow color and blur effect. Text shadow effect! Example Horizontal and vertical shadow: h1 { text-shadow: 2px 2px; } Try it Yourself » Next, add a color to the shadow: Text shadow effect! Example Horizontal and vertical shadow, with color: h1 { text-shadow: 2px 2px red; } Try it Yourself » Then, add a blur effect to the shadow: Text shadow effect! Example Horizontal and vertical shadow, with color and blur effect: h1 { text-shadow: 2px 2px 5px red; } Try it Yourself » The following example shows a white text with black shadow: Text shadow effect! Example Text-shadow on a white text: h1 { color: white; text-shadow: 2px 2px 4px #000000; } Try it Yourself » The following example shows a red neon glow shadow: Text shadow effect! Example Text-shadow with red neon glow: h1 { text-shadow: 0 0 3px #ff0000; } Try it Yourself » Multiple Shadows To add more than one shadow to the text, you can add a comma-separated list of shadows. The following example shows a red and blue neon glow shadow: Text shadow effect! Example h1 { text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; } Try it Yourself » The following example shows a white text with black, blue, and darkblue shadow: Text shadow effect! Example h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } Try it Yourself » You can also use the text-shadow property to create a plain border around some text (without shadows): Border around text! Example h1 { color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } Try it Yourself » ★ +1 Sign in to track progress

CSS Gradients CSS Gradients The CSS gradient functions let you display smooth transitions between two or more colors within an element. CSS defines three types of gradients: Linear Gradients - The color transition goes down, up, left, right, or diagonally Radial Gradients - The color transition goes out from a central point Conic Gradients - The color transition is rotated around a center point The CSS gradient functions are used within the background-image property. A Linear Gradient Background CSS linear-gradient() Function The CSS linear-gradient() function creates a linear gradient. A linear gradient defines a color transition that goes in a straight line, it can go down, up, to left, to right, or diagonally. A linear gradient requires at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Syntax background-image: linear-gradient(direction, color-stop1, color-stop2, ...); Direction - Top to Bottom (this is default) The following example shows a linear gradient that goes from top to bottom. It starts red, transitioning to yellow: top to bottom (default) Example #grad { background-image: linear-gradient(to bottom, red, yellow); } Try it Yourself » Direction - Bottom to Top The following example shows a linear gradient that goes from bottom to top. It starts red, transitioning to yellow: bottom to top Example #grad { background-image: linear-gradient(to top, red, yellow); } Try it Yourself » Direction - Left to Right The following example shows a linear gradient that goes from left to right. It starts red, transitioning to yellow: left to right Example #grad { background-image: linear-gradient(to right, red , yellow); } Try it Yourself » Direction - Diagonal The following example shows a linear gradient that goes from top-left to bottom-right. It starts red, transitioning to yellow: top left to bottom right Example #grad { background-image: linear-gradient(to bottom right, red, yellow); } Try it Yourself » Linear Gradient - Using Angles If you want more control over the direction of the gradient, you can define an angle parameter, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom". A value of 270deg equivalent to "to left" Syntax background-image: linear-gradient(angle, color-stop1, color-stop2); The following example shows how to use angles on linear gradients: 180deg Example #grad { background-image: linear-gradient(180deg, red, yellow); } Try it Yourself » Linear Gradient - Multiple Color Stops The following example shows a linear gradient (from top to bottom) with multiple color stops: Example #grad { background-image: linear-gradient(red, yellow, green); } Try it Yourself » The following example shows a linear gradient (from left to right) with the color of the rainbow and some text: Rainbow Background Example #grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } Try it Yourself » Linear Gradient - Transparency CSS gradients also support transparency, which can be used to create fading effects. To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency). The following example shows a linear gradient that goes from left to right. It starts fully transparent, transitioning to full color red: Example #grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } Try it Yourself » CSS repeating-linear-gradient() Function The CSS repeating-linear-gradient() function is used to repeat linear gradients: Example A repeating linear gradient: #grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); } Try it Yourself » ★ +1 Sign in to track progress

CSS Colors CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. RGBA Colors RGBA color values are an extension of RGB colors with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). rgba(255, 0, 0, 0.2); rgba(255, 0, 0, 0.4); rgba(255, 0, 0, 0.6); rgba(255, 0, 0, 0.8); The following example defines different RGBA colors: Example #p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */ Try it Yourself » HSLA Colors HSLA color values are an extension of HSL colors with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque): hsla(0, 100%, 30%, 0.3); hsla(0, 100%, 50%, 0.3); hsla(0, 100%, 70%, 0.3); hsla(0, 100%, 90%, 0.3); The following example defines different HSLA colors: Example #p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */ Try it Yourself » CSS opacity Property The opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque). rgb(255, 0, 0);opacity:0.2; rgb(255, 0, 0);opacity:0.4; rgb(255, 0, 0);opacity:0.6; rgb(255, 0, 0);opacity:0.8; Notice that the text inside the element will also be transparent/opaque! The following example shows different elements with opacity: Example #p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */ #p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */ #p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */ Try it Yourself » ★ +1 Sign in to track progress

CSS Multiple Backgrounds CSS Multiple Backgrounds CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. The following example has two background images, the first image is a flower (aligned to the right-bottom) and the second image is a paper-like background (aligned to the top-left corner): Lorem Ipsum Dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Example #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } Try it Yourself » Multiple background images can be specified using either the individual background properties (as above) or with the background shorthand property. The following example uses the background shorthand property (same result as example above): Example #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; } Try it Yourself » CSS Advanced Background Properties Property Description background A shorthand property for setting all the background properties in one declaration background-clip Specifies the painting area of the background background-image Specifies one or more background images for an element background-origin Specifies where the background image(s) is/are positioned background-size Specifies the size of the background image(s) ★ +1 Sign in to track progress

CSS Border Images CSS Border Images With the CSS border-image property, you can define an image to be used as the border around an element. CSS border-image Property The border-image property allows you to define an image to be used as the border around an element, instead of the normal border. This property takes an image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify. The border-image property is a shorthand property for the following properties: border-image-source - defines the path to the image border-image-slice - defines how to slice the image border-image-width - defines the width of the image border-image-outset defines the amount by which the border image area extends beyond the border box border-image-repeat - defines how to repeat the image Note: For border-image to work, the element also needs the border property set! CSS border-image Examples We will use the following image (named "border.png"): In the following example, the url(border.png) specifies the source image, the number 30 slices the image 30 pixels from each edge, and the round value specifies that the middle section of the image is tiled (repeated) to fill the area (and rescaled to fit, if needed): An image as the border! Here is the code: Example #borderimg { border: 10px solid transparent; /* Required for border-image */ padding: 15px; border-image: url(border.png) 30 round; } Try it Yourself » Here, the stretch value specifies that the middle section of the image is stretched to fill the area: An image as the border! Here is the code: Example #borderimg { border: 10px solid transparent; /* Required for border-image */ padding: 15px; border-image: url(border.png) 30 stretch; } Try it Yourself » CSS border-image - Different Slice Values Different slice values completely changes the look of the border image: Example 1: border-image: url(border.png) 50 round; Example 2: border-image: url(border.png) 20% round; Example 3: border-image: url(border.png) 30% round; Here is the code: Example #borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 50 round; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30% round; } Try it Yourself » CSS Border Image Properties Property Description border-image A shorthand property for setting all the border-image-* properties border-image-source Specifies the path to the image to be used as a border border-image-slice Specifies how to slice the border image border-image-width Specifies the widths of the border image border-image-outset Specifies the amount by which the border image area extends beyond the border box border-image-repeat Specifies whether the border image should be repeated, rounded or stretched ★ +1 Sign in to track progress

CSS Rounded Corners CSS Rounded Corners The CSS border-radius property is used to create rounded corners for elements. CSS border-radius Property The border-radius property defines the radius of an element's corners. This property can be applied to all elements with a background-color, a border, or a background-image. Here are three examples: 1. Rounded corners for an element with a background color: Rounded corners! 2. Rounded corners for an element with a border: Rounded corners! 3. Rounded corners for an element with a background image: Rounded corners! Here is the code: Example #div1 { border-radius: 25px; background-color: #73AD21; padding: 20px; width: 200px; height: 150px; } #div2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #div3 { border-radius: 25px; background-image: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } Try it Yourself » Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties. CSS border-radius - Specify Each Corner The border-radius property can have from one to four values. Here are the rules: Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner): Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner): Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners): One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally: Here is the code: Example #div1 { border-radius: 15px 50px 30px 5px; /* four values */ background: #04AA6D; width: 200px; height: 150px; } #div2 { border-radius: 15px 50px 30px; /* three values */ background: #04AA6D; width: 200px; height: 150px; } #div3 { border-radius: 15px 50px; /* two values */ background: #04AA6D; width: 200px; height: 150px; } #div4 { border-radius: 15px; /* one value */ background: #04AA6D; width: 200px; height: 150px; } Try it Yourself » CSS Elliptical and Circular Shapes To create elliptical corners, you must specify two values for each radius, separated by a slash /. The first value defines the horizontal radius, and the second value defines the vertical radius. To create a oval shape (for a rectangular element), or to create a circular shape (for a square element) set border-radius to 50%. Example Create elliptical, oval and circular shapes: #div1 { border-radius: 70px / 30px; background: #04AA6D; width: 200px; height: 150px; } #div2 { border-radius: 15px / 50px; background: #04AA6D; width: 200px; height: 150px; } #div3 { border-radius: 50%; background: #04AA6D; width: 200px; height: 150px; } #div4 { border-radius: 50%; background: #04AA6D; width: 200px; height: 200px; } Try it Yourself » CSS Rounded Corners Properties Property Description border-radius A shorthand property for setting all the four border-*-*-radius properties border-top-left-radius Defines the shape of the border of the top-left corner border-top-right-radius Defines the shape of the border of the top-right corner border-bottom-right-radius Defines the shape of the border of the bottom-right corner border-bottom-left-radius Defines the shape of the border of the bottom-left corner ★ +1 Sign in to track progress

CSS Website Layout CSS Website Layout A website is often divided into multiple sections, like a top header, navigation menu, main content, and a footer: Header Navigation Menu Content Main Content Content Footer There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial. CSS Header A header is usually located at the top of the website, and often contains a logo or the website name: Example header { background-color: #f1f1f1; text-align: center; padding: 10px; } Result My Header Try it Yourself » CSS Navigation Bar A navigation bar contains a list of links to help visitors navigate through your website: Example /* Style the topnav */ ul.topnav { display: flex; list-style-type: none; margin: 0; padding: 0; background-color: #333333; } /* Style links in topnav */ ul.topnav li a { display: block; color: #f1f1f1; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ ul.topnav li a:hover { background-color: #dddddd; color: black; } Result Link1 Link2 Link3 Link4 Try it Yourself » CSS Layout Content How the content of a website should be shown, often depends on the device of the users. The most common layouts are: 1-column layout (often used for mobile browsers) 2-columns layout (often used for tablets and laptops) 3-columns layout (only used for desktops) 1-column: 2-column: 3-column: Here we will create a 3-column layout, and change it to a 1-column layout when the width of the screen is less than 600px: Example div.flex-container { display: flex; /* Show the flex items horizontally */ flex-direction: row; } div.flex-container > div { margin: 10px; } /* Use media query and show the flex items vertically if screen width is less than 600px */ @media screen and (max-width:600px) { div.flex-container { flex-direction: column; } } Result ColumnLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. ColumnLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. ColumnLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Try it Yourself » Tip: Learn more about the CSS @media rule in our CSS Media Queries chapter. Tip: Learn more about CSS Flexbox in our CSS Flexbox chapter. CSS Basic and Fixed Footer The footer is placed at the bottom of a webpage. It often contains information like copyright and contact info. The following example shows a basic footer styling: Example footer { background-color: #f1f1f1; text-align: center; padding: 8px; } Result Footer Try it Yourself » The following example shows a fixed footer that is always visible at the bottom of the page, regardless of scrolling: Example footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 8px; text-align: center; z-index: 1000; } Try it Yourself » CSS Responsive Website In this example, we use media queries together with flexbox to create a responsive website, containing a flexible navigation bar and flexible content. Example Try it Yourself » Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress