A responsive webpage always uses grid layout structure, as it can be easily adapted to different screen sizes and devices. In this chapter we will discuss grid view in responsive web development and how to design a grid based responsive website.
What is Grid View?
In responsive web design, a grid view is a layout structure that uses a grid-based system to arrange layout elements in rows and columns. A typical grid-view may have 12 columns, and has a total width of 100%. The grid will shrink and expand as the size of the browser changes.
Building a Responsive Grid-View
Set Border Box: First of all we need to set box-sixing property as `border-box’ for all the elements in webpage. This will ensure padding and border are included in the total width and height of all elements. Use the following code to set:
*{box-sizing: border-box;}
Set Width of Column: Next we have to decide how many columns are needed in our webpage layout. For Example we need a 3 column layout, for that width of one column will be 100% / 3 columns = 33.33%.Use Media Queries: To ensure responsiveness, we have to use media queries for screen dependent stylings. With this we can add breakpoints for screen widths, at which layout need to be changed.
Grid Rows and Columns
In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.
Example
In this example we will create two grid layout one is for row and another one is for column, each grid has row and column.
The 12 column layout structure involve dividing the container into 12 equal-width columns, So that each individual elements can span across a specified number of columns to create different sections. Following image shows an example of 12 column layout.
Example
Following code shows example of designing a responsive 12 column layout. Run this in Tutorialspoint HTML Compiler to see how layout changes with width.
Viewport is the visible area for a user in the web page. It will vary with the device, and will be smaller on a mobile phone than on a computer screen. On a desktop, the viewport is the window’s size, excluding the toolbar and other elements that are not the part of the web page. And on a mobile device, it is the size of the screen.
Types of Viewport
There are mainly two types of viewport, which are as follows:
Layout Viewport: It is the virtual area used by the browser to display the web page. The layout viewport is controlled by adding the meta viewport tag in the HTML head section.
Visual Viewport: It represents the part of the layout viewport that is currently visible on the screen. The visual viewport can be changed on zooming in and out.
Both the viewports are mutable, which means, the dimensions of both can be altered after loading of the page.
Setting The Viewport
As mentioned above, we can control viewport width using <meta> tag. You should include the following <meta> viewport element inside head section of all your web pages for ensuring responsiveness.
In the above syntax, “content = width=device-width:” Set the width of the viewport same as the width of the device screen. And, “initial-scale = 1.0:” is used to set the initial zoom level to 100%.
In the below section, we provided example of a web page without the viewport meta tag, and the same web page with the viewport meta tag.
Example With Meta Tag
The code below includes the viewport meta tag, which sets the layout viewport width equal to the device’s screen width. As a result, the page is responsive and adapts to different screen sizes.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 90%;
background-color: lightblue;
padding: 20px;
text-align: center;
}
.content {
width: 90%;
margin: auto;
background-color: lightcoral;
padding: 10px;
}
</style></head><body><div class="container"><h1>Responsive Layout with Viewport Meta Tag</h1><div class="content"><p>
This layout adapts to the device screen width,
thanks to the viewport meta tag.
</p></div></div></body></html></pre>
Example Without Viewport Meta Tag
The code below does not include viewport meta tag, as a result the entire viewport will not be visible in smaller screens. A horizontally scroll option will appear on smaller screen reducing user experience.
Open Compiler
<!DOCTYPE html><html lang="en"><head><style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
background-color: lightblue;
padding: 20px;
text-align: center;
}
.content {
width: 90%;
margin: auto;
background-color: lightcoral;
padding: 10px;
}
</style></head><body><div class="container"><h1>Non-Responsive Layout Without Viewport Meta Tag</h1><div class="content"><p>
This layout does not adapt to the device screen width,
because it lacks the viewport meta tag.
</p></div></div></body></html></pre>
CSS Units Related to Viewports
In CSS, we can specify dimension of elements relative to viewport dimensions, such as to occupy 50% width of viewport or 100% height viewport. Following are popular units.
vw (viewport width): This unit is based on 1% of the viewport's width. For example, 'width: 10vw' would equal 10% of the viewport's total width.
vh (viewport height): This unit is based on 1% of the viewport's height. For example, 'height: 50vh' would be half the viewport's height.
vmin: This unit takes the smaller value between the viewport's width and height. It's helpful when you want the size to adapt to both portrait and landscape orientations.
vmax: This unit takes the larger value between the viewport's width and height, useful for designs that need to maximize space in larger viewports.
Responsive Web Design (RWD) is an approach of designing web applications that render accurately on various devices with different screen sizes and resolutions.
What is Responsive Web Design?
Responsive web design ensure the webpage to look good in any user devices such as mobile, tablets, smart TVs and PCs.
To make a webpage responsive we can just use HTML and CSS. We don’t need to use programming languages like JavaScript.
CSS frameworks like bootstrap and tailwind CSS can simplify the process of making responsive designs.
Example of Responsive Webpage
Here is a complete example code explaining how to develop a simple responsive webpage using HTML and CSS. In the code given below, we have used media queries to define style for small screens.
We have mentioned below a list of concepts and techniques that are used in CSS for responsive web designing.
Media Queries: We use media queries to apply CSS rules based on device characteristics, such as screen width, height, or orientation (landscape or portrait). We can define different styles for different devices by using media queries.
Responsive Grid Layouts: We use responsive grid layouts, to alter the number of columns in layout dynamically based on dimensions of user devices. CSS frameworks such as Bootstrap, provide inbuilt grid systems that can automatically adjust the layout based on the screen size.
Responsive Images & Videos: To ensure images and videos are rendered properly in all user devices, we have to set a max-width property. It prevents stretching of media in large screens.
Viewport Meta Tag: The viewport meta tag is used in the HTML <head> section. It controls the viewport behavior and scale on mobile devices. It is important for proper rendering based on various screen sizes.
Custom Properties are variables in CSS that are used to store and reuse values in stylesheet. These are same as variables in other programming languages.
Declaring Custom Properties in CSS
The following code show how to declare custom properties in CSS.
Here are few things to be considered when using custom properties in CSS.
You can define custom properties in any selectors in stylesheet, but if you define a custom property inside :root selector it will have scope across all over the stylesheet.
The var function is used to apply variable values to CSS properties on any elements.
CSS does not allow custom properties to be used in media queries or container queries, Also you cannot use them to set the name of a CSS property or selector.
Custom properties are case sensitive.
CSS Custom Properties Example
Following code shows example of using custom properties in CSS. Here you can see that we defined the color ‘#0044cc’ as blue, So developer can repetitively use this color by using variable blue.
Example
Open Compiler
<!DOCTYPE html><html lang="en"><head><style>
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-font: 'Arial', sans-serif;
--padding: 10px;
--blue: #0044cc;
--header-text: #fff;
--container-bg: #fff;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-family: var(--primary-font);
padding: var(--padding);
}
header {
background-color: var(--blue);
color: var(--header-text);
padding: var(--padding);
}
.container {
background-color: var(--container-bg);
padding: var(--padding);
}
</style></head><body><header><h1>Welcome to My Website</h1></header><div class="container"><p>
This is a container with a background color
defined using variables.
</p></div></body></html></pre>
Custom Property Fallback Values
We can define custom properties with fallback values to ensure that your CSS code is still valid and works even if the variable is not defined.
Fallback values are not used to make CSS custom properties work in older browsers. They are only used as a backup in browsers that support CSS custom properties, in case the variable is not defined or has an invalid value.
Example
In below example, we have only defined color shade for white, But are also using black variable. Since we are defining fallback-value for black color variable, there will not be any error.
Open Compiler
<!DOCTYPE html><html><head><style>
:root {
--white-color: #f0f0f0;/* Shade for white */
/* Custom Property for black is not defined */
}
.box {
text-align: center;
padding: 20px;
background-color: var(--white-color, white);
color: var(--black-color, black);
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color, black);
color: var(--white-color, white);
width: 100px;
height: 50px;
}
</style></head><body><div class="box"><h2>Tutorialspoint</h2><p> How to code a website using HTML and CSS </p><div class="box1"> HTML </div><div class="box2"> CSS </div></div></body></html></pre>
Inheritance of Custom Properties
In CSS, custom properties are inherited by default from parent elements to child element. Any variable declared on a parent element will be available to all its descendants unless overridden.
.container{--main-bg-color: black;--text-color: white;}.child{/* Use inherited value from parent for background color*/background-color:var(--main-bg-color);/* Overrides the parents value for text color*/--text-color: lightgrey;color:var(--main-bg-color);}
Example
The following example demonstrates that the use of CSS custom properties with inheritance.
Open Compiler
<!DOCTYPE html><html><head><style>
:root {
--white-color: #f0f0f0;
--black-color: rgb(0, 0, 21);
}
.box {
--box-background: var(--white-color);
background-color: var(--box-background);
text-align: center;
padding: 20px;
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color);
/* Box Background is defined at parent box */
color: var(--box-background);
width: 100px;
height: 50px;
}
</style></head><body><div class="box"><h2>Tutorialspoint</h2><p> How to code a website using HTML and CSS </p><div class="box1"> HTML </div><div class="box2"> CSS </div></div></body></html></pre>
Imagine what will happen if we declare a property multiple times in CSS using different selectors. CSS uses specificity order for selectors in order to determine which selector have highest preference to be used.
For instance, if two or more CSS rules are specified on an HTML element using a class selector and ID selector, the property declared in the selector with highest specificity value(in this case Id selector) will be applied on that element.
Specificity Hierarchy
Every selectors in CSS have a specificity level. Following are specificity order of CSS selectors.
Inline Styles: The styles defined for an element using style attribute have highest priority.
<h1 style="color: blue;"> Example </h1>
Id Selectors: In Selectors, id selector have highest priority.
<style>
#mainDiv {
color: blue;
}
</style>
Classes, Attributes and Pseudo-classes: These are the next in line. Class selectors are prefixed with a ., attribute selectors use square brackets [], and pseudo-classes are prefixed with :
<style>
.subDivs {
color: blue;
}
</style>
Elements and Pseudo-elements: These have the lowest specificity. Element selectors use the element name directly, and pseudo-elements are prefixed with ::.
<style>
div {
color: blue;
}
</style>
How to Calculate Specificity?
To calculate specificity value you need memorize this values. Inline style gets a specificity value of 1000. ID selector gets a value of 100. For class selector, attribute selector and pseudo-classes the specificity value is 10. Finally for element selector and pseudo element specificity value is 1. Universal selectors does not have specificity value, we can consider value 0 for comparison purpose.
Selector
Specificity
Calculation
<div style=”color: green”></div>
1000
1000
#uniqueId
100
100
.mainClass
10
10
div
1
1
div #uniqueId
101
100+1
div .mainClass
11
10+1
div .mainClass .navbar
21
10+10+1
div #uniqueId .navbar
111
100+10+1
Specificity Rules Examples
Below example code will illustrate the CSS Specificity.
Selector with highest specificity value will take Effect
Following example uses multiple selectors to apply color property to a paragraph, In first case id selector take effect and in second case inline CSS take effect.
Open Compiler
<!DOCTYPE html><html><head><style>
/*Multiple selectors for paragraph */
p {
color: black;
font-weight: bold;
}
.special {
color: blue;
}
#unique {
color: darkgreen;
}
</style></head><body><p id="unique" class="special">
This paragraph will be darkgreen. Id selector wins!!!!
</p><p class="special">
This paragraph will be blue. Class selector wins!!!!
</p><p class="special" style="color: darkblue;">
This paragraph will be darkblue. Inline style wins!!!!
</p></body></html></pre>
Equal specificity value, latest rule Wins
Following example shows that when two class selector target same paragraph and try to apply same style to it, the last defined class take effect.
Open Compiler
<!DOCTYPE html><html><head><style>
p {
color: black;
font-weight: bold;
}
.special {
color: blue;
}
.superSpecial{
color: gold;
}
</style></head><body><p class="special superSpecial">
This paragraph is gold color. Class superSpecial wins!!!
</p></body></html></pre>
Internal CSS style Preferred over External Stylesheet
The selector defined using style tag inside a HTML document have higher preference over externally imported stylesheet.
/*From imported external CSS file:*/
#uniqueID {
color: red;
}
/*In HTML file:*/
<style>
#uniqueID {
color: yellow;
}
</style>
Yellow color will be set for element.
Override Specificity Rules
Following example demonstrates that the order of specificity gets irrelevant if a property is marked as !important.
Example
Open Compiler
<!DOCTYPE html><html><head><style>
p {
color: black;
font-weight: bold;
}
.special {
color: blue;
}
#unique {
color: darkgreen;
}
p {
color: darkred !important;
}
</style></head><body><p id="unique" class="special">
This paragraph is darkred. The !important keyword wins
over every other selector!!!
</p><p class="special" style="color: green">
This paragraph is darkred. The !important keyword wins
even over inline style!!!
</p></body></html></pre>
CSS provides several properties to style images in a HTML webpages. In this tutorial we will learn how to style any type of image using CSS properties.
How Style an Image in CSS?
Setting the Size: In CSS, height and width properties can be used to adjust size of images in a webpage.
Style the Border: Borders with right thickness and color make image stand out. In CSS, border property can be used to set border color, style and thickness.
Shadow Effect: Adding a shadow effect around image using box-shadow property enhances image style.
Hover Effect: Interactive styling like hover effect change the appearance of image when user hover the mouse over images. This can include changes in opacity, size (using transforms), or applying filters.
Responsive Design: To render multiple images you can use flex or grid layout systems and by using media query you can adjust layout based on user’s screen width.
Set Image Dimensions
The height and width property is used to set the dimensions for an image. These properties can have a value in length(pixels, em) or percentage.
Pixel Value: Set dimensions in pixels
Percentage Value: Percentage of parents elements dimensions to occupy.
Value ‘auto’: Allows to maintain original aspect ratio of image.
Example
Here is an example shows how to set dimensions for an image.
Open Compiler
<!DOCTYPE html><html><body><h2>Dimensions in length - 100px</h2><img style="height: 100px; width: 100px;"
src="/css/images/orange-flower.jpg"
alt="orange-flower"><h2>Dimensions in percentage - 30%</h2><!-- Occupy 30% height and width of body --><img style="height: 30%; width: 30%;"
src="/css/images/orange-flower.jpg"
alt="orange-flower"><h2>Dimensions - auto</h2><!-- Height adjusted in such a way that aspect
ratio of image maintained for width 100px --><img style="height: auto; width: 100px;"
src="/css/images/orange-flower.jpg"
alt="orange-flower"></body></html></pre>
CSS Image Opacity
The opacity property in CSS is used to adjust the transparency of an element.
The opacity value can range from 0.0 (completely transparent) to 1.0 (completely opaque).
The filter property in CSS is used to apply visual effects to an element, such as blurring, inverting colors, adjusting brightness and contrast, or applying filters like grayscale.
In CSS, the box-shadow property used to add shadow effect around images.
A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:
img{box-shadow: inset horizontal vertical
blur-radius spread-color;}</pre>
Example
In this example we will create positive and negative shadows.
Open Compiler
<!DOCTYPE html><html><head><style>
img{
object-fit: none;
height: 50px;
width: auto;
}
.img2{
box-shadow: 20px 20px 10px
rgb(247, 174, 187);
}
.img3{
box-shadow: -20px 20px 10px
rgb(247, 174, 187);
}
</style></head><body><h3>Box shadow on image: None</h3><img src="/css/images/scenery2.jpg"><h3>Box shadow on image</h3><img class="img2" src="/css/images/scenery2.jpg"><h3>Box shadow on image:negative value</h3><img class="img3" src="/css/images/scenery2.jpg"></body></html></pre>
CSS Image As Background
CSS allows an image to be set as a background for another element like div, span, body, paragraph etc.
The background-image property is used to set one or more than one image as a background.
Note: You can add multiple images as background. You just need to separate the images using comma.
Example
In this example we set background image for body.
Open Compiler
<!DOCTYPE html><html lang="en"><head><style>
div{
background-color: rgba(255, 255, 255);
opacity: 70%;
padding: 20px;
}
body {
background-image: url(/css/images/logo.png);
height: 350px;
}
</style></head><body><div><h1>Welcome to My Website</h1><p>
This is an example of setting a
background image using CSS
</p></div></body></html></pre>
CSS Image Border
The border property is used to set style(solid or dashed), thickness and color for border of an image.
The border-radius property in CSS is used to define the rounded corners for border of an image. By adjusting the border-radius value, you can control the degree of roundness for each corner of an element or make them fully circular.
CSS also allows to set images as borders for other element like div, span, body, paragraph etc using border-image property .
Example
In this example we set border image for div.
Open Compiler
<!DOCTYPE html><html lang="en"><head><style>
div{
background-color: #f0f0f0;
border: 20px solid transparent;
border-image: url(/css/images/border.png) 40;
padding: 20px;
}
body {
height: 350px;
}
</style></head><body><div><h1>Welcome to My Website</h1><p>
This is an example of setting a
background image using CSS
</p></div></body></html></pre>
Position Text in an Image
In CSS position property can be used to position text in different locations inside an image.
First we need to set position property for image container as position: relative and position property of text as position: absolute. Now you can position of text elements using top, left, right and bottom properties.
Example
Open Compiler
<!DOCTYPE html><html><head><style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.7;
}
</style></head><body><div class="container"><img src="/css/images/red-flower.jpg"
width="1000px" height="350px"><h3 class="center">
Text at Center
</h3><h3 class="top-left">
Text at Top Left
</h3><h3 class="top-right">
Text at Top Right
</h3><h3 class="bottom-left">
Text at Bottom Left</h3><h3 class="bottom-right">
Text at Bottom Right
</h3></div></body></html></pre>
CSS Image Object Fit
The object-fit property specifies how the image should be resized if its aspect ratio is not maintained. This property resizes an image to fit in its container.
Example
Here is an example that shows how to use this property.
CSS shape-outside property is used to define a shape around which inline content (such as text or images) should wrap. This property is particularly useful for creating non-rectangular or complex text wrapping shapes.
Possible Values
none − Inline content flows around the element’s margin box, while the float area remains unchanged.
margin-box − It represents the shape around the outside edge of the margin, with the corner radii specified by the border-radius and margin values.
content-box − It represents the shape around the outside edge of the content. The corner radius of the box is determined by taking the larger value between 0 and border-radius – border-width – padding.
border-box − It represents the shape around the outside edge of the border. The shape for the outside of the border follows the standard border radius shaping rule.
padding-box − It represents the shape around the outside padding edge. The shape for the inside of the border follows the standard border radius shaping rule.
<basic-shape> − The shape created with functions such as circle(), ellipse(), polygon(), or path() (introduced in the level 2 specification,) determines the float area.
url() − It identifies which image should be used to wrap text around.
linear-gradient() − To create gradient shapes that text and other inline content can wrap around.
The following example demonstrates the proeprty shape-outside: margin-box property defines that content should wrap around the outer edge of the element’s margin box −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p></body></html></pre>
CSS shape-outside - content-box
The following example demonstrates the propertyshape-outside: content-box property defines that content should wrap around the element's content box −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p></body></html>
CSS shape-outside - padding-box
The following example demonstrates the property shape-outside: padding-box property defines that content should wrap around the outer edge of the element's padding box −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p></body></html>
CSS shape-outside - border-box
The following example demonstrates the property shape-outside: border-box defines the flow of the content around the shape defined by the outer border of the element −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
</p></body></html>
CSS shape-outside - circle()
The following example demonstrates the property shape-outside: circle() property creates a circular shape, and the content wraps around the edge of the circle −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></body></html>
CSS shape-outside - ellipse()
The following example demonstrates the property shape-outside: ellipse() property creates a ellipse shape, and the content wraps around the element's bounding box −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum.
</p></div></body></html></pre>
CSS shape-outside - url()
The following example demonstrates the property shape-outside: url() property allowing text to flow around the defined shape of the image −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></div></body></html>
CSS shape-outside - polygon()
The following example demonstrates that the shape-outside: polygon() creates a polygonal shape, and the content wraps around the element's bounding box −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></div></body></html></pre>
CSS shape-outside - inset()
The following example demonstrates that the shape-outside: inset() property create rectangular shape, and the content wraps around the edge of the rectangle −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></div></body></html>
CSS shape-outside - path()
The following example demonstrates that the shape-outside: path() property creates triangular shape and allowing text to flow around it −
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></div></body></html>
CSS shape-outside - linear-gradient()
The following example demonstrates that the shape-outside: linear-gradient() property allowing text to flow around the shape defined by linear-gradient −
Open Compiler
<html><head><style>
.gradient-shape {
float: left;
width: 150px;
height: 150px;
background: linear-gradient(45deg, #fff 150px, red 150px);
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);
margin-right: 20px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
</p></div></body></html></pre>
CSS shape-outside - Related Properties
Following is the list of CSS properties related to shape-outside:
property
value
shape-margin
Adds margin to CSS shapes that are created with the shape-outside property.
shape-image-threshold
Sets the alpha channel threshold for shape extraction when using an image with the shape-outside property.
CSS mask property masks and displays an image at a particular position to partially or completely hide an element. The property is a shorthand for the CSS properties: mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat and mask-size
It specifies an image for the mask layer for an element. Default value is none.
mask-mode
It specifies whether the mask layer image should be luminance mask or alpha mask. Default value is match-source.
mask-composite
It specifies a compositing operation used on the current mask layer with the below mask layers. Default value is add.
mask-clip
It specifies the area affected by a mask image. Default value is border-box.
mask-origin
It specifies the origin position of a mask layer image. Default value is border- box.
mask-position
It sets the starting position of a mask image relative to the mask position area. Default value is 0% 0%.
mask-repeat
It specifies how a mask image will be repeated. Default value is repeat.
mask-size
It specifies the size of the mask layer image. Default value is auto.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Mask Property
The following examples explain the mask property with different values.
Defining Multiple Values using Mask Property
The mask property is a shorthand property for eight properties. Some of the properties are optional and may not be needed. In the following example five properties’ values have been defined namely: mask-image, mask-mode, mask-repeat, mask-position and mask-size.
The mask property is a shorthand property for eight properties. These eight properties can be used individually to produce the same effect produced by the mask proeprty. Some properties have been used individually in the following example to show the same effect as in the above example.
CSS math functions allow you to perform mathematical calculations directly in your CSS stylesheets. These functions can be used to manipulate values such as lengths, angles, colors, and more.
div{width:calc(100% - 40px);/* 100% width minus 40px for padding */width:max(200px, 50%);/* Set width to the maximum value between
200px and 50% of the viewport width */}</pre>
Types of Mathematical Functions in CSS
There are several types of math functions that can be used in CSS. They include:
Basic Arithmetic Functions This includes the calc() function for performing calculations on numerical values.
Comparison Functions This includes functions like min(), max(), and clamp() for comparing variables.
Stepped Value Functions This includes the round() function for calculating a rounded number based on a rounding strategy.
Trigonometric Functions These functions, such as sin(), cos(), and tan(), introduce mathematical functions like sine, cosine, and tangent into stylesheets.
The calc Function
The calc() function is a basic arithmetic function in CSS that allows you to perform calculations on numerical values. It can be used to dynamically modify property values by carrying out mathematical operations like addition, subtraction, multiplication, and division.
Example
Here's an example that demonstrates the usage of the calc() function:
.box {
/* 100% width minus 40px for padding */
width: calc(100% - 40px);
/* 100% of viewport height minus 20px for padding */
height: calc(100% - 20px);
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
</style></head><body><div class="container"><div class="box">
This box uses the CSS calc() function to dynamically
calculate its width and height.
</div></div></body></html></pre>
The max Function
The max() function is a comparison function in CSS that allows you to determine the maximum value from a given list of values. It can be used to compare variables and apply conditional styling based on the maximum value.
Example
Here's an example that demonstrates the usage of the max() function:
.box {
/* Set the width to the maximum value between
200px and 50% of the viewport width */
width: max(200px, 50%);
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
</style></head><body><div class="container"><div class="box">
This box uses the CSS max() function to set its width
to the maximum value between 200px and 50% of the
viewport width.
</div></div></body></html></pre>
The min Function
The min() function is a comparison function in CSS that allows you to determine the minimum value from a given list of values. It can be used to compare variables and apply conditional styling based on the minimum value.
Example
Here's an example that demonstrates the usage of the min() function:
.box {
/* Set the width to the minimum value between
200px and 50% of the viewport width */
width: min(200px, 50%);
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
</style></head><body><div class="container"><div class="box">
This box uses the CSS min() function to set its width
to the minimum value between 200px and 50% of the
viewport width.
</div></div></body></html></pre>
Comparison Functions
The assessment of values is made easier by CSS comparison functions, which allows conditional styling based on comparisons within stylesheets.
Following table lists comparison functions:
Function
Description
Example
min()
Determines the minimum value from a given set of values.
Try It
max()
Determines the maximum value from a given list of values.
Try It
clamp()
Calculates the central of a minimum, central, and maximum values.
Try It
Stepped Value Functions
Stepped value functions provide granular control in stylesheets by enabling exact changes and discrete jumps in property values in CSS.
Following table lists stepped value functions:
Function
Description
Example
round()
Calculates a rounded number based on a rounding strategy.
Try It
Trigonometric Functions
CSS trigonometric functions allow for more complex design alterations by introducing mathematical functions like sine, cosine, and tangent into stylesheets.
Following table lists trigonometric functions:
Function
Description
Example
sin()
Calculates the trigonometric sine of a number.
Try It
cos()
Calculates the trigonometric cosine of a number
Try It
tan()
Calculates the trigonometric tangent of a number.
Try It
asin()
Calculates the trigonometric inverse sine of a number.
Try It
acos()
Calculates the trigonometric inverse cosine of a number.
Try It
atan()
Calculates the trigonometric inverse tangent of a number.
Try It
atan2()
Calculates the trigonometric inverse tangent of two-numbers in a plane.
CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value.
The function name appears first in the value syntax, followed by a opening parenthesis (. The argument(s) come next, and a closing parenthesis ) completes the function.
Multiple parameters are accepted by functions, and their formatting is the same as that of CSS property values.
Though optional, whitespace is permitted inside parenthesis. Multiple arguments are separated by commas in certain functional notations and by spaces in others.
Transform Functions
The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property.
Translate Functions
Following table lists translate functions:
Functions
Description
translateX()
Translates an element horizontally.
translateY()
Translates an element veritcally.
translateZ()
Translates an element along the z-axis.
translate()
Translates an element on the 2D plane.
translate3d()
Translates an element in 3D space.
Rotation Functions
Following table lists rotation functions:
Functions
Description
rotateX()
Rotates an element around the horizontal axis.
rotateY()
Rotates an element around the vertical axis.
rotateZ()
Rotates an element around the z-axis.
rotate()
Rotates an element around a fixed point on the 2D plane.
rotate3d()
Rotates an element around a fixed axis in 3D space.
Scaling Functions
Following table lists scaling functions:
Functions
Description
scaleX()
Scales an element up or down horizontally.
scaleY()
Scales an element up or down vertically.
scaleZ()
Scales an element up or down along the z-axis.
scale()
Scales an element up or down on the 2D plane.
scale3d()
Scales an element up or down in 3D space.
Skew Functions
Following table lists skew functions:
Functions
Description
skewX()
Skews an element in the horizontal direction.
skewY()
Skews an element in the vertical direction.
skew()
Skews an element on the 2D plane.
Matrix Functions
Following table lists matrix functions:
Functions
Description
matrix()
Describes a homogeneous 2D transformation matrix.
matrix3d()
Describes a 3D transformation as a 44 homogeneous matrix.
Perspective Functions
Following table lists perspective functions:
Functions
Description
perspective()
Sets the distance between the user and the z=0 plane.
Math Functions
Mathematical expressions can be used in CSS to represent numeric values using math functions.
Basic Arithmetic Functions
Following table lists basic arithmetic functions:
Function
Description
calc()
Performs basic arithmetic calculations on numerical values.
Comparision Functions
Following table lists comparision functions:
Function
Description
min()
Determines the minimum value from a given set of values.
max()
Determines the maximum value from a given list of values.
clamp()
Calculates the central of a minimum, central, and maximum values.
Stepped Value Functions
Following table lists stepped value functions:
Function
Description
round()
Calculates a rounded number based on a rounding strategy.
Trignometric Functions
Following table lists trignometric functions:
Function
Description
sin()
Calculates the trigonometric sine of a number.
cos()
Calculates the trigonometric cosine of a number
tan()
Calculates the trigonometric tangent of a number.
asin()
Calculates the trigonometric inverse sine of a number.
acos()
Calculates the trigonometric inverse cosine of a number.
atan()
Calculates the trigonometric inverse tangent of a number.
atan2()
Calculates the trigonometric inverse tangent of two-numbers in a plane.
Filter Functions
The CSS data type <filter-function> denotes a graphical effect capable of changing the look of an input image. It’s used within the filter and backdrop-filter properties.
Function
Description
blur()
Increases the image gaussian blur.
brightness()
Brightens or darkens an image..
contrast()
Increases or decreases the image contrast.
drop-shadow()
Applies a drop shadow behind an image.
grayscale()
Converts an image to grayscale.
hue-rotate()
Changes the overall hue of an image.
invert()
Inverts the colors of an image.
opacity()
Adds transparency to an image.
saturate()
Changes the overall saturation of an image.
sepia()
Increases the sepia of an image.
Color Functions
The CSS data type <color> defines various ways to represent colors.
Function
Description
rgb()
Specifies a given color according to its red, green, blue and alpha (transparency) components.
hsl()
Specifies a given color according to its hue, saturation, lightness and alpha (transparency) components.
hwb()
Specifies a given color according to its hue, whiteness and blackness components.
lch()
Specifies a given color according to its lightness, chroma and hue components.
oklch()
Specifies a given color according to its lightness, chroma, hue and alpha (transparency) components.
lab()
Specifies a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.
oklab()
Specifies a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).
color()
Specifies a particular, specified colorspace rather than the implicit sRGB colorspace
color-mix()
Mixes two color values in a given colorspace by a given amount.
Image Functions
The CSS data type <image> offers graphical representations of images or gradients.
Gradient Functions
Following table lists gradient functions:
Function
Description
linear-gradient()
Linear gradients transition colors progressively along an imaginary line.
radial-gradient()
Radial gradients transition colors progressively from a center point (origin).
conic-gradient()
Conic gradients transition colors progressively around a circle.
repeating-linear-gradient()
Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
repeating-radial-gradient()
Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
repeating-conic-gradient()
Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
Image Functions
Following table lists image functions:
Function
Description
image-set()
Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.
cross-fade()
Blends two or more images at a defined transparency.
paint()
Defines an <image> value generated with a PaintWorklet.
Counter Functions
CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.
Function
Description
counter()
Returns a string representing the current value of the named counter if there is one.
counters()
Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.
Shape Functions
The CSS data type <basic-shape> signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.
Function
Description
circle()
Defines a circle shape.
ellipse()
Defines an ellipse shape.
inset()
Defines an inset rectangle shape.
polygon()
Defines a polygon shape.
path()
Accepts an SVG path string to enable a shape to be drawn.
Reference Functions
In order to reference a value defined elsewhere, the following functions are used as a value of properties.
Function
Description
attr()
Uses the attributes defined on HTML element.
env()
Uses the user-agent defined as environment variable.
url()
Uses a file from the specified URL.
var()
Uses the custom property value instead of any part of a value of another property.
Grid Functions
The following functions are used to define a CSS Grid.
Function
Description
fit-content()
Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
minmax()
Defines a size range greater-than or equal-to min and less-than or equal-to max.
repeat()
Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.
Font Functions
Alternate glyph usage is managed through the use of CSS font functions in combination with the font-variant-alternates property.
Function
Description
stylistic()
This function activates stylistic alternates for certain characters using a font-specific name associated with a number.
styleset()
This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02.
character-variant()
This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set.
swash()
This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2.
ornaments()
This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2.
annotation()
This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2
Easing Functions
The values for transition and animation properties come from the following functions.
Function
Description
linear()
Easing function that interpolates linearly between its points..
cubic-bezier()
Easing function that defines a cubic Bzier curve.
steps()
Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.
