所有动态

CSS 12-Column Grid Layout CSS 12-Column Grid Layout A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout. Benefits of a 12-Column Grid Flexibility: The number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3). Responsiveness: A 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with mediaqueries. This provides a consistent user experience across all platforms. Efficiency: Having a pre-defined structure speeds up the design process. Here is how to create a basic 12-column CSS Grid layout: Define the Grid Container Apply display: grid; to the grid container. Create the 12 Columns Use the grid-template-columns property to define the 12 columns. The code repeat(12, [col-start] 1fr); creates a 12-column grid with equal-width, and names the start line of each column track col-start. repeat(12,..): Tells the grid to repeat the following track definition 12 times, resulting in 12 columns. [col-start]: This creates a named grid line. Because it is repeated 12 times, you will have 12 lines named col-start. This is useful for placing grid items at specific start points within the grid. 1fr: A fractional unit that represents one fraction of the total available space in the grid container. By using 1fr, each of the 12 columns will be an equal, fluid width. Place the Grid Items Grid items can then be placed and sized across these 12 columns using grid-column. To make a grid item span a certain number of columns, use grid-column: span <number>; or grid-column: <start-line> / span <number>;. You can also define the start and end grid lines for an item using grid-column: <start-line> / <end-line>;. Use Mediaqueries to Add Breakpoints Always design for mobile first: Here we display the sections in the source order (from top to bottom) for screens less than 576 pixels wide. Then, we go to a two-column layout for screens between 576 and 767 pixels wide. Then, we go to a three-column layout for screens over 767 pixels wide. Example Complete example of a 12-column grid layout: * { box-sizing: border-box; } .container { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); gap: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } /* Mobile first */ .container > * { border: 1px solid green; background-color: beige; padding: 10px; grid-column: col-start / span 12; } @media (min-width: 576px) { .sidebar { grid-column: col-start / span 3; grid-row: 3; } .ads { grid-column: col-start / span 3; } .content, .footer { grid-column: col-start 4 / span 9; } nav ul { display: flex; justify-content: space-between; } } @media (min-width: 768px) { .nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .sidebar { grid-column: col-start 11 / span 2; } .ads { grid-column: col-start 11 / span 2; } .footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } Try it Yourself » ★ +1 Sign in to track progress

CSS Grid Layout CSS Grid Layout Module The Grid Layout Module offers a grid-based layout system, with rows and columns. The Grid Layout Module allows developers to easily create complex web layouts. The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning. My Header Link 1 Link 2 Link 3 Lorem IpsumLorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut. Footer Try it Yourself » Grid vs. Flexbox CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. CSS Grid Components A grid always consists of: A Grid Container - The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items - The direct children of the grid container automatically becomes grid items A Grid Container with Five Grid Items The element below represents a grid container (the blue area) with five grid items. 1 2 3 4 5 Example A grid container with five grid items: <html> <head> <style> .container { display: grid; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 10px; } .container div { background-color: #f1f1f1; border: 1px solid black; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html> Try it Yourself » Note: You will learn more about grid containers and grid items in the next chapters. All CSS Grid Properties Property Description align-content Vertically aligns the whole grid inside the container (when total grid size is smaller than container) align-items Specifies the default alignment for items inside a flexbox or grid container align-self Aligns the content for a specific grid item along the column axis display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress

CSS Responsive Flexbox Responsive Flexbox You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create a three-column layout for large screen sizes, and a one-column layout for small screen sizes (such as phones), you can change the flex-direction from row to column at a specific breakpoint (600px in the example below): 1 2 3 Resize the browser window to see the effect. Example .flex-container { display: flex; flex-direction: row; } .flex-item { background-color: #f1f1f1; padding: 10px; font-size: 30px; text-align: center; width: 100%; } /* Make a one column-layout instead of three-column layout */ @media (max-width: 600px) { .flex-container { flex-direction: column; } } Try it Yourself » Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work: Example .flex-container { display: flex; flex-wrap: wrap; } .flex-item { background-color: #f1f1f1; padding: 10px; text-align: center; font-size: 30px; flex: 33.3%; } /* Make a one column-layout instead of a three-column layout */ @media (max-width: 600px) { .flex-item { flex: 100%; } } Try it Yourself » Responsive Image Gallery using Flexbox Here, we use media queries together with flexbox to create a responsive image gallery: Try it Yourself » Responsive Website using Flexbox Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content: Try it Yourself » ★ +1 Sign in to track progress

CSS Flex Items CSS Flex Items The direct child elements of a flex container automatically becomes flex items. Flex items can have the following properties: order - Specifies the display order of the flex items inside the flex container flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items flex-basis - Specifies the initial length of a flex item flex - Shorthand property for flex-grow, flex-shrink, and flex-basis align-self - Specifies the alignment for the flex item inside the flex container CSS order Property The order property specifies the display order of the flex items inside the flex container. The first flex item in the source code does not have to appear as the first item in the layout. The order value must be a number, and the default value is 0. Example The order value specifies the display order of the flex items: <div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div> Result: 1 2 3 4 Try it Yourself » CSS flex-grow Property The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, and the default value is 0. Example Make the third flex item grow four times faster than the other flex items: <div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 4">3</div> </div> Result: 1 2 3 Try it Yourself » CSS flex-shrink Property The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, and the default value is 1. Example Let the third flex item shrink twice as much as the other flex items: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 2">3</div> <div>4</div> <div>5</div> <div>6</div> </div> Result: 1 2 3 4 5 6 Try it Yourself » CSS flex-basis Property The flex-basis property specifies the initial length of a flex item. Example Set the initial length of the third flex item to 250 pixels: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 250px">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » CSS flex Property The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. Example Make the third flex item growable (1), not shrinkable (0), and with an initial length of 150 pixels: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 1 0 150px">3</div> <div>4</div> </div> Try it Yourself » CSS align-self Property The align-self property specifies the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container's align-items property. In these examples we use a 200 pixels high container, to better demonstrate the align-self property: Example Align the third flex item in the middle of the container: <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » Example Align the second flex item at the top of the container, and the third flex item at the bottom of the container: <div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » The CSS Flex Items Properties The following table lists all the CSS Flex Items properties: Property Description align-self Specifies the alignment for a flex item (overrides the flex container's align-items property) flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties flex-basis Specifies the initial length of a flex item flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the container flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the container order Specifies the order of the flex items inside the container ★ +1 Sign in to track progress

CSS Flex Container CSS Flex Container Properties The flex container element can have the following properties: display - Must be set to flex or inline-flex flex-direction - Sets the display-direction of flex items flex-wrap - Specifies whether the flex items should wrap or not flex-flow - Shorthand property for flex-direction and flex-wrap justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally) align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically) align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap CSS flex-direction Property The flex-direction property specifies the display-direction of flex items in the flex container. This property can have one of the following values: row (default) column row-reverse column-reverse Example The row value is the default value, and it displays the flex items horizontally (from left to right): .flex-container { display: flex; flex-direction: row; } Result: 1 2 3 Try it Yourself » Example The column value displays the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column; } Result: 1 2 3 Try it Yourself » Example The row-reverse value displays the flex items horizontally (but from right to left): .flex-container { display: flex; flex-direction: row-reverse; } Result: 1 2 3 Try it Yourself » Example The column-reverse value displays the flex items vertically (but from bottom to top): .flex-container { display: flex; flex-direction: column-reverse; } Result: 1 2 3 Try it Yourself » CSS flex-wrap Property The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. This property can have one of the following values: nowrap (default) wrap wrap-reverse Example The nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order: .flex-container { display: flex; flex-wrap: wrap-reverse; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » CSS flex-flow Property The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. Example .flex-container { display: flex; flex-flow: row wrap; } Try it Yourself » Flex Container Subpages Continue learning about flex container properties: justify-content - horizontal alignment of flex items align-items & align-content - vertical alignment and true centering ★ +1 Sign in to track progress

CSS Flexbox CSS Flexbox (Flexible Box Layout) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning. Item 1 Item 2 Item 3 Item 4 Item 5 Try it Yourself » Flexbox vs. Grid CSS Flexbox is used for a one-dimensional layout, with rows OR columns. CSS Grid is used for a two-dimensional layout, with rows AND columns. CSS Flexbox Components A flexbox always consists of: A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex One or more Flex Items - The direct children of the flex container automatically becomes flex items A Flex Container with Three Flex Items The element below represents a flex container (the blue area) with three flex items. Item 1 Item 2 Item 3 Example A flex container with three flex items: <html> <head> <style> .container { display: flex; background-color: DodgerBlue; } .container div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </body> </html> Try it Yourself » You will learn more about flex containers and flex items in the next chapters. ★ +1 Sign in to track progress

CSS Media Queries CSS Media Queries CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages. The CSS @media rule is used to add media queries to your style sheet. Media Query Syntax A media query consists of an optional media-type and one or more media-features, which resolve to either true or false. @media [not] media-type and (media-feature: value) and (media-feature: value) { /* CSS rules to apply */ } The media-type is optional. However, if you use not, you must also specify a media-type. The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules. Meaning of the not and and keywords: not: This optional keyword inverts the meaning of the entire media query. and: This keyword combines a media-type and one or more media-features. CSS Media Types The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all". Value Description all Used for all media type devices print Used for print preview mode screen Used for computer screens, tablets, and smart-phones CSS Media Features The media feature specifies a specific characteristic of the device. Here are some commonly used media features: Value Description max-height Maximum height of the viewport min-height Minimum height of the viewport height Height of the viewport (including scrollbar) max-width Maximum width of the viewport min-width Minimum width of the viewport width Width of the viewport (including scrollbar) orientation Orientation of the viewport (landscape or portrait) resolution Screen resolution prefers-color-scheme User's preferred color scheme (light or dark) Media Queries Examples Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is 480px, or wider: Example @media screen and (min-width: 480px) { body { background-color: lightgreen; } } Try it Yourself » Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is between 480px and 768px: Example @media screen and (min-width: 480px) and (max-width: 768px) { body { background-color: lightgreen; } } Try it Yourself » More Media Query Examples For more examples on media queries, go to the next page: CSS MQ Examples. ★ +1 Sign in to track progress

CSS Box Sizing CSS Box Sizing The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not. By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustrates two <div> elements with the same specified width and height. The two <div> elements end up with different sizes (because div2 has a large padding specified): This div is has width: 300px and height: 100px. This div also has width: 300px and height: 100px. Example .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } Try it Yourself » The box-sizing property solves this problem. The CSS box-sizing Solution The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, the padding and border are included in the calculation of the width and height: Both divs are the same size now! Hooray! Here is the same example as above, with box-sizing: border-box; added to both <div> elements: Example .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } Try it Yourself » Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way. The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;). Applying this to all elements is safe and wise: Example * { box-sizing: border-box; } Try it Yourself » CSS Box Sizing Property Property Description box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not ★ +1 Sign in to track progress

CSS @property Rule The CSS @property Rule The @property rule is used to define custom CSS properties (CSS variables) directly in the stylesheet without having to run any JavaScript. The @property rule has data type checking and constraining, sets a default value, and specifies the inherit behaviour. The definition below creates a custom property named --myColor, defines it as a color property, specifies that it will inherit values from its parent elements, and its default value is lightgray. Syntax of @property @property --myColor { syntax: "<color>"; inherits: true; initial-value: lightgray; } Using the Custom Property The CSS var() function is used to insert the custom property in CSS: body { background-color: var(--myColor); } Benefits of Using @property The benefits of using @property is: Data type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly Set default value: You must set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the default value as a fallback Set inheritance behavior: You must specify whether the custom property will inherit values from its parent elements or not. This ensures that you will have full control over inheritance CSS @property Example The following example defines two custom properties: my-bg-color and my-txt-color. The div, then uses the custom properties in the background-color and color properties: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } @property --my-txt-color { syntax: "<color>"; inherits: true; initial-value: darkblue; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); color: var(--my-txt-color); } Try it Yourself » Another @property Example In the following example we use the default custom property on the <div> element. Then we override the custom property in class .fresh and class .nature (by setting some other colors), and it works perfectly fine: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); } .fresh { --my-bg-color: #ff6347; } .nature { --my-bg-color: rgb(120, 180, 30); } Try it Yourself » Avoid Error with Type Checking and Fallback Value In the following example we set the custom property in class .nature to an integer. This is not valid, and the browser will use the fallback color, which is defined in the initial-value property (lightgray): Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); } .fresh { --my-bg-color: #ff6347; } .nature { --my-bg-color: 2; } Try it Yourself » Use of the inherits Value In the following example we will set the inherits value to false. This means that the custom property WILL NOT inherit values from its parent elements. Look at the result: Example @property --my-bg-color { syntax: "<color>"; inherits: false; initial-value: lightgray; } Try it Yourself » The next example sets the inherits value to true. This means that the custom property WILL inherit values from its parent elements. Look at the result: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } Try it Yourself » Create Smooth Animation with @property A complete new opportunity you can achieve with the @property rule, is to animate something that could not be animated before: Gradients. Look at the following example: Example Specify two custom properties for a gradient: @property --startColor { syntax: "<color>"; initial-value: #EADEDB; inherits: false; } @property --endColor { syntax: "<color>"; initial-value: #BC70A4; inherits: false; } Try it Yourself » CSS @property Rule Property Description @property Define custom CSS properties directly in the stylesheet without having to run any JavaScript ★ +1 Sign in to track progress

CSS Variables - var() Function CSS Variables The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables. CSS Declare a Variable CSS variables can have a global or local scope. Global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared. To create a global variable, declare it inside the :root selector. The :root selector matches the document's root element. To create a local variable, declare it inside the selector that is going to use it. A CSS variable name must begin with two dashes (--) and is case sensitive! Syntax :root { --primary-bg-color: green; /* global scope */ } .note { --note-bg: yellow; /* local scope */ } The CSS var() Function The var() function is used to insert the value of a declared CSS variable. Syntax var(--name, value) Value Description name Required. The variable name (must start with two dashes) value Optional. The fallback value (used if the variable is not found) Advantages of using var() are: Makes the code easier to maintain (simplifies updates) Makes the code easier to read (more understandable) Makes it easier to change the color values for the entire page CSS Variables Example Here, we declare two global variables (--primary-bg-color and --primary-color). Then, we use the var() function to insert the value of the variables later in the style sheet: Example :root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; } Try it Yourself » To change the look of the page, you just need to change the two variable values: Example :root { --primary-bg-color: #8FBC8F; --primary-color: #FFFAF0; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; } Try it Yourself » CSS var() Function Function Description var() Inserts the value of a CSS variable ★ +1 Sign in to track progress

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