Category: css

CSS – Layouts ”; Previous Next You have so far learnt about the various fundamentals of CSS which helps in styling text and the boxes that contain the content. In this chapter we will learn how to arrange and adjust these boxes in relation to the viewport. Prerequisites In order to proceed with learning of CSS layout, certain prequisites are essential, such as: Having a basic knowledge of HTML. Basic idea of the CSS fundamentals. Understanding of how to style the boxes. The chapter will list fundamental tools and techniques available for CSS layout. Let us look at each topic. CSS Layout – Normal flow This section explains about the normal flow of a webpage, where the elements position or lay themselves as per this flow. The normal flow is the basic ground for any changes that you intend to do. A box model is applied to the individual elements, where padding, border, or margin are added to the content. A block-level element fills the available inline space of the parent element with its content, by default; whereas an inline-level element”s size is same as its content”s size. For the elements that have a display value of inline, you can set the width or height In the normal layout flow, the block-level elements are positioned in the block flow direction, which is as per the parent”s writing mode. Each block-level element will appear in a new line below the last line, separated by the specified margin. The inline-level elements do not appear on a new line, rather they appear in the same line along with other text content, till the time they have space to be inside the width of the parent block level element. When there is no space left, then the content will fall into a new line. CSS Layout – Flexbox Laying out of elements in rows and columns, in a one-dimensional space, is taken care by the flexbox layout. In this layout the items or elements flex in order to fill the space and at the same time they may shrink to fit in the smaller spaces. CSS Layout – Grids Layout system of positioning elements in a two-dimensional space, is the responsibility of the grid layout. It helps in laying the content in rows and columns and make the whole building complex layout easy. CSS Layout – Floats CSS float is one of the commonly used property to create multiple column layouts on webpages, apart from using it to float images inside a container. But with flexbox and grid features, the float is restricted for the usage of floating images or text. CSS Layout – Positioning Positioning is a feature that determines the position or placement of elements on a webpage, which can be fixed or relative to a viewport. CSS Layout – Multiple-column layout This layout lets you lay the content in different columns, just like a newspaper. CSS Layout – Responsive design With the advance in the various devices, the screens are available in diverse sizes. The responsive web design (RWD) is helpful in allowing web pages to adjust their layout and display as per the different screen sizes, with varying widths and resolutions. CSS Layout – Media queries The Media Query provided by CSS are essential as they help in creation of different layouts based on the size of the viewport. A rule is specified via a media query and as the browser and device environment matches the rule, certain CSS gets applied. The media queries are also helpful in detecting other features of the environment, where your site is running. Print Page Previous Next Advertisements ”;

CSS – Data Types ”; Previous Next CSS data types define the types of values that can be used for various CSS properties. Each CSS property expects a specific type of value, and understanding these data types is essential for properly styling and formatting web content. The types listed below are the most common, however it is not a complete list of all types defined in any CSS specification. Syntax selector { property: <unit-data-type>; } CSS syntax uses a keyword between the inequality signs “<” and “>” to indicate data types. Textual Data Types These types include keywords, identifiers, strings, and URLs. Pre-defined Keywords Represents a predefined keyword that is specific to the property it”s used with (e.g., auto, inherit, none). CSS-wide keywords The table given below lists all the CSS-wide keywords: Property Description <custom-ident> A user-defined identifier, such as a name given with the grid-area property. <dashed-ident> Using CSS Custom Properties, a <custom-ident> begin with two dashes. <string> A string that has been quoted, such as the value for the content property. url() A reference to a resource, such the background-image value. Numeric Data Types These data types represent quantities, indexes, and positions. The following table lists all the numeric data types: Property Description <integer> One or more decimal units (0–9). <number> Real numbers may include a fractional component, such as 1 or 1.54. <dimension> A numerical value that includes a unit, such as 23px or 15em. <percentage> A numerical value that includes a percentage symbol, such as 15%. <ratio> A ratio is represented as <number> / <number>. <flex> CSS Grid Layout introduces a flexible length, represented by a <number> with the fr unit attached for grid track sizing. Quantities Distance and other quantities are defined using these types. The following table lists all the quantities: Property Description <length> Lengths are a dimension that refers to distances. <angle> Angles are represented as a <dimension> with deg, grad, rad, or turn units, and used in properties such as linear-gradient(). <time> Duration units are represented as a <dimension> with a s or ms unit. <resolution> This is a <dimension> with the unit identifier dpi, dpcm, dppx, or x. Combinations of Types CSS properties that accept both a dimension and a percentage value fall in this category. The percentage value will be converted to a quantity relative to the allowable dimension. Properties that take both a percentage and a dimension will use one of the following types: Property Description <length-percentage> A type that can take a a length or a percentage value. <angle-percentage> A type that can take a a angle or a percentage value. <time-percentage> A type that can take a a time or a percentage value. Color Color related properties define the <color> data type and additional types related to colors. The following table lists all the color related data types: Property Description <color> A color represented as a keyword or a numerical value. <color-interpolation-method> Determines the color space used when creating a transition between different <color> values. <hex-color> Describes the hexadecimal color syntax of an sRGB color using the primary color components (red, green, blue) denoted as hexadecimal numbers, along with its transparency. <system-color> Commonly linked to the default color selections for different components on a webpage. <alpha-value> Represents the transparency of a color. The value can be either a <number> (0 is fully transparent, 1 is fully opaque) or a <percentage> (0 is fully transparent, 100% is fully opaque). <hue> Define the <angle> of the color wheel for the <absolute-color-functions> component using units such as, deg, grad, rad, turn, or a unitless number (interpreted as deg). <hue-interpolation-method> Determines the algorithm that is used for interpolation between hue values. This method specifies how to find a midpoint between two hue values based on a color wheel. It is a component of the <color-interpolation-method> data type. <named-color> Specified as a <ident> in syntax, depicts colors by names such as red, blue, black, or light green. Images CSS Images Specification defines image-related data types, such as gradients. The following table lists all the images related data types: Property Description <image> A URL pointing to an image or color gradient. 2D Positioning The following table lists all the 2D Positioning related data types: Property Description <position> Determines the position of an object region by providing a keyword value, such as top or left, or a <length-percentage>. Calculation Data Types CSS math functions use these data types in calculations. The following table lists all the calculation data types: Property Description <calc-sum> A calculation is a series of calculated values separated by addition (+) and subtraction (-) operators. This data type requires that both values contain units.

CSS – box-shadow Property ”; Previous Next The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color. Possible Values inset: Shadow is assumed to be a drop shadow, if no value is specified. If inset is used, the shadow is drawn inside the border, above the background, but below content. <offset-x>: Specifies the horizontal distance in <length> terms. Negative value positions the shadow to the left of element. <offset-y>: Specifies the vertical distance in <length> terms. Negative value positions the shadow above the element. <blur-radius>: Sets the radius for the blur effect. Third <length> value. Larger the value, bigger is the blur. Negative values are not allowed. In absence of a value, it is 0, which makes the edges of shadow sharp. <spread-radius>: Sets the size of the shadow. Fourth <length> value. Positive values make the shadow to grow bigger. Negative values make the shadow to shrink. In absence of a value, it is 0, which makes the shadow of size same as the element. <color>: Color values for possible keywords and color notations, such as, color name, hex value, rgb, etc. Applies to All the HTML elements. DOM Syntax object.style.boxShadow = “none | inset 10px 10px 5px rgb(255, 255, 255)”; CSS box-shadow – inset Value Here is an example: <html> <style> div { margin: 4em; padding: 1em; height: 80px; width: 80px; display: inline-block; } #a { box-shadow:10px 10px 10px 2em #f4aab9; } #b { box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8); } #c { box-shadow: 5px 15px 3px rgb(226, 67, 228); border: 1px solid black; } </style> <head> </head> <body> <div id=”a”></div> <div id=”b”></div> <div id=”c”></div> </body> </html> Print Page Previous Next Advertisements ”;

CSS – offset Property ”; Previous Next The CSS shorthand property offset makes it easier for an element to animate along a certain path. It has many characteristics that together comprise an offset transform. With this transform, a specified point inside the element (offset-anchor) is aligned to a certain path position (offset-position) at various points along the route (offset-distance). It also allows the element to be optionally rotated (offset-rotate) to follow the path”s direction. Constituent Properties The offset property is a shorthand for the following CSS properties: offset-anchor offset-distance offset-path offset-position offset-rotate Possible Values The following list of values is accepted by offset shorthand property. offset-anchor – Defines a point within the element that aligns with an offset position on the path. offset-path – Defines the path along which the element is animated. offset-distance – Defines how far along the path the element is placed. offset-rotate – Optionally rotates the element to align with the direction of the path. auto – All properties are reset to their default values. Applies to Transformable elements Syntax offset = [ <”offset-position”>? [ <”offset-path”> [ <”offset-distance”> || <”offset-rotate”> ]? ]? ]! [ / <”offset-anchor”> ]? CSS offset – path value The following example demonstrates the usage of offset shorthand property with path value. <html> <head> <style> @keyframes slide { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .container { width: 400px; height: 200px; border: 2px solid #3498db; border-radius: 10px; position: relative; overflow: hidden; background-color: #f0f0f0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } .text { position: absolute; font-size: 28px; color: #3954cc; animation: slide 6s ease-in-out infinite alternate; offset: path(”M 10 100 Q 50 50 90 100 T 170 100 T 250 100”); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } </style> </head> <body> <div class=”container”> <div class=”text”>This is Sliding Text</div> </div> </body> </html> CSS offset – path and auto value The following example demonstrates the usage of offset shorthand property with path and auto value. <html> <head> <style> @keyframes orbit { 0% { offset-distance: 0%; offset-rotate: 0deg; } 100% { offset-distance: 100%; offset-rotate: 360deg; } } #planet { width: 60px; height: 60px; background-color: #0000A0; border-radius: 50%; position: absolute; animation: orbit 6s linear infinite; offset: path(”M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0”) auto; } #sun { width: 100px; height: 100px; background-color: #ffd700; border-radius: 50%; position: absolute; left: 28%; top: 33%; transform: translate(-50%, -50%); } </style> </head> <body> <div id=”sun”></div> <div id=”planet”></div> </body> </html> CSS Offset – Related Properties Following table lists related properties to offset property: Property Description offset-anchor Specifies the position inside an element”s box that acts as the offset path. offset-distance Specifies where element should be positioned. offset-path Specifies element”s path inside its parent container. offset-rotate Specifies the orientation or direction of an element as it moves along the specified offset-path. offset-position Provide an element”s starting location along a route. Print Page Previous Next Advertisements ”;

CSS – min-inline-size Property ”; Previous Next CSS min-inline-size property specifies the minimum horizontal or vertical size of an element”s block, determined by its writing mode and equivalent to either min-height and min-width based on the writing mode value. Possible Values The min-inline-size property accepts the same values as min-height and min-width. Applies To Same as width and height. Syntax <length> Values min-inline-size: 100px; min-inline-size: 5em; <percentage> Values min-inline-size: 10%; Keyword Values min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content; min-inline-size: fit-content(20em); The min-inline-size property sets the minimum width for horizontal writing modes and the minimum height for vertical writing modes, respectively. A companion property, min-block-size defines the other dimension. CSS min-inline-size – <length> Value The following example demonstrates the min-inline-size: 200px property sets the minimum width of the inline element to the 200px − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: 200px; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – <percentage> Value The following example demonstrates the min-inline-size: 30% property sets the minimum width of the inline element to the 30% − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: 30%; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – max-content Value The following example demonstrates the min-inline-size: max-content property allows the inline element to expand horizontally to fit its content − <html> <head> <style> .box { background-color: greenyellow; border: 3px solid red; display: inline-block; min-inline-size: max-content; } </style> </head> <body> <p class=”box”>CSS min-inline-size</p> </body> </html> CSS min-inline-size – With Vertical Text The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction − <html> <head> <style> div { background-color: greenyellow; border: 2px solid blue; margin: 10px; padding: 5px; min-inline-size: 150px; writing-mode: vertical-rl; } </style> </head> <body> <div> <h3>CSS min-inline-size with writing-mode: vertical-rl.</h3> </div> </body> </html> Print Page Previous Next Advertisements ”;

CSS – grid Property ”; Previous Next CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It”s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties: grid-template-rows grid-template-columns grid-template-areas grid-auto-columns grid-auto-flow grid-auto-rows grid-gap (or grid-row-gap and grid-column-gap) Possible Values <grid-template> − Works the same as the grid template shorthand. <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns> − Sets grid-template-rows to the specified value (auto-flow or dense). If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-columns is omitted, it is set to auto. [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> − Sets grid-auto-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-rows is omitted, it is set to auto. Applies to All the HTML elements. DOM Syntax object.style.grid = “<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>”; CSS grid – <grid-template> The following example demonstrates that a grid set as grid: 100px/ 200px, has the first row 100px high and columns 200px wide − <html> <head> <style> .grid-box { display: grid; grid: 100px / 200px; gap: 10px; } .grid-box > div { background-color: red; border: 3px solid lightgreen; padding: 10px; text-align: center; } </style> </head> <body> <div class=”grid-box”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html> CSS grid – minmax() / repeat() The following example demonstrates that the use of grid: minmax(100px, min-content) / repeat(auto-fill, 50px); property. minmax(100px, min-content) is used for row sizing. Here, the minmax function defines a minimum size of 100px and a maximum size dependent on the content. repeat(auto-fill, 50px) is used for column sizing. The repeat function repeats the pattern for grid tracks. It uses auto-fill to create as many columns as possible within the available area, with each column having a fixed size of 50px. <html> <head> <style> .grid-container { display: grid; grid: minmax(100px, min-content) / repeat(auto-fill, 50px); color: white; text-align: center; width: 300px; } .grid-container > div { background-color: red; border: 2px solid lightgreen; margin: 5px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – auto-flow Value The following example demonstrates that the use of the grid: auto-flow / 200px property sets row size to auto-flow, which automatically sizes the height of the row and set columns width to 200px − <html> <head> <style> .grid-container { display: grid; grid: auto-flow / 200px; color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – auto-flow dense Value The following example demonstrates the use of grid: 100px 200px / auto-flow dense property. It specifies two rows with heights of 100px and 200px. The columns are set to auto-flow dense, which automatically place items in the grid and dense, to fit as many grid elements as feasible without gaps. <html> <head> <style> .grid-container { display: grid; grid: 100px 200px / auto-flow dense; color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <body> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> The following example demonstrates that the grid: auto-flow 50px / repeat(3, 150px) property sets the rows to auto-flow 50px, which automatically places items in the grid with row height set to 50px. The repeat(3, 150px) specifies that there should be three columns, each 150px wide. <html> <head> <style> .grid-container { display: grid; grid: auto-flow 50px / repeat(3, 150px); color: white; width: 300px; border: 2px solid lightgreen; } .grid-container > div { background-color: red; border: 2px solid lightgreen; padding: 10px; } </style> </head> <div class=”grid-container”> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html> CSS grid – Related Properties Following is the list of CSS properties related to grid: property value display Define whether an element is a grid container or an inline grid container. gap Defines the gap between rows and columns. grid-area Defines the location and size of the grid item within a grid layout. grid-column Control the placement of a grid item within the grid container in the column direction. grid-row Control the placement of a grid item within the grid container in the row direction. grid-template Specify the grid columns, grid rows and grid areas. grid-auto-columns Determines the size of automatically generated grid column tracks or a pattern of such tracks. grid-auto-rows Determines the size of automatically- generated grid rows tracks or a pattern of such tracks. grid-auto-flow Specifies arrangement

CSS – place-self Property ”; Previous Next CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set. This property is a shorthand for the following CSS properties: align-self justify-self Possible Values auto − Aligns the item based on the parent”s align-self value. normal− Based on the layout mode, the effect of normal keyword changes: Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned. Behaves like stretch in static position of absolutely-positioned layouts. Behaves like stretch for flex items. Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start. Does not apply to block-level boxes , and to the table cells. self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis. self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis. flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line. flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line. center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions. baseline, first baseline, last baseline − First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items. These values specify the involvment of first- or last-baseline alignment in the alignment of the content. start is the fallback alignment for first-baseline and end for last-baseline. stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width. Applies To Block-level boxes, absolutely-positioned boxes, and grid items. Syntax Keyword Values place-self: auto center; place-self: normal start; Positional Alignment place-self: center normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; Baseline Alignment place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; CSS place-self – normal start Value The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: normal start; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – auto center Value The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: auto center; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – center normal Value The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: center normal; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – end normal Value The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: end normal; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – start auto Value The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell − <html> <head> <style> .container { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; grid-gap: 10px; margin: 20px; width: 300px; } .container > div { background-color: greenyellow; border: 3px solid blue; text-align: center; margin: 5px; width: 60px; height: 50px; } .item2 { place-self: start auto; } </style> </head> <body> <div class=”container”> <div>Item 1</div> <div class=”item2″>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS place-self – self-start auto Value The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction −

CSS Filters – text-effect Property ”; Previous Next CSS provides an extremely powerful tool that can help in addition of special visual effects to text, images, background, borders, etc. The filters are useful in adjusting the rendering of these aspects of a webpage. In this chapter, we will discuss about each CSS filter in detail with examples. The filter property can have value as none or one or more functions listed later in the chapter. If no or an invalid parameter is passed to any function, it returns none. The functions that accept the parameter value in percentage (%), also accepts the same value expreseed in decimal. For example, 55% can be passed as 0.55 Multiple functions can be passed to filter property; just that you need to add space between them. When multiple functions is passed, these filters are applied in the order they are passed. The same filter function can be repeated. For example: filter:blur(20px) hue-rotate(45deg) blur(15px). Following is the list of functions that can be used with filter property: Sr.No. Function Parameter Description Example 1 blur() Radius of blue effect (px, rem, etc) Applies a blur effect to the input image. filter:blur(10px); 2 brightness() Value is a percentage or a decimal(%). 0% – black image, 100% – no effect, over 100% – brightens element. Adjusts the brightness of the element. filter:brightness(62% | 0.62); 3 contrast() Value is a percentage or a decimal(%). 0% – grey, 100% – no effect, over 100% – creates contrast. Adjusts the contrast of the element. filter:contrast(200%); 4 grayscale() Value is a percentage or a decimal(%). 0% – no effect, 100% – completely grayscale. Converts the element to grayscale. filter:grayscale(80%); 5 drop-shadow() Value specifies the horizontal and vertical offset, the blur radius, and the color of the shadow. Applies a drop shadow effect to the element filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); 6 hue-rotate() Value is an angle in degrees. Applies a hue rotation to the element. filter:hue-rotate(80deg); 7 invert() Value is an angle in degrees. Inverts the colors of the element. filter: invert(75%); 8 opacity() Value is a percentage. 0% – fully transparent, 100% – fully opaque. Adjusts the transparency of the element. filter: opacity(75%); 9 saturate() Value is a percentage. Adjusts the saturation of the element. filter: saturate(200%); 10 sepia() Value is a percentage. Adjusts a sepia effect to the element. filter: sepia(90%); 11 url() Value is the path of XML file that specifies an SVG filter, and may include an anchor to a specific filter element. For applying SVG filters. filter:url(svg-url#element-id); CSS filter – blur() The blur() function is used to add blur effects to the text or an image. The function can have following value as parameter: blur radius: specified as a <length> value. The greater the value, more will be the blur effect. Default value is 0. The function does not accept percentage value. Here is an example: <html> <head> </head> <body> <h2>Blur effect </h2> <div> <h3 style=”filter: blur(2px); font-size: 3rem;”>Blur(5px)</h3> <img style=”filter: blur(5px); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing blur effect”> </div> <div> <h3 style=”filter: blur(0.5rem); font-size: 3rem;”>Blur(2rem)</h3> <h3>Blur(5px)</h3> <img style=”filter: blur(5px); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing blur effect”> </div> <div> <h3>Blur(2rem)</h3> <img style=”filter: blur(2rem); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing blur effect”> </div> </body> </html> CSS filter – brightness() brightness() function is used to add brightness effect to the text or an image, by applying a linear multiplier value. This makes the element look brighter or darker. The function can have following value as parameter: amount: specified as a <number> or a <percentage> value. Value less than 100%, makes the element darker. Value over 100%, makes the element bright. Value equal to 100% have no effect. Default value is 1. Negative values are not allowed. Here is an example: <html> <head> </head> <body> <h2>Brightness effect </h2> <div> <h3 style=”filter: brightness(120%); font-size: 2rem;”>Brightness(120%)</h3> <img style=”filter: brightness(120%); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing brightness effect”> </div> <div> <h3 style=”filter: brightness(0.38); font-size: 2rem;”>Brightness(0.38)</h3> <h3>Brightness(120%)</h3> <img style=”filter: brightness(120%); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing brightness effect”> </div> <div> <h3>Brightness(0.38)</h3> <img style=”filter: brightness(0.38); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing brightness effect”> </div> </body> </html> CSS filter – contrast() contrast() function is used to add contrast effect to the text or an image. The function can have following value as parameter: amount: specified as a <number> or a <percentage> value. Value less than 100%, decreases the contrast. Value over 100%, increases the contrast. Value equal to 0% or 0, will make the element fully gray. Value equal to 100% have no effect. Default value is 1. Negative values are not allowed. Here is an example: <html> <head> </head> <body> <h2>Contrast effect </h2> <div> <h3 style=”filter: contrast(20%); font-size: 2rem;”>Contrast(120%)</h3> <img style=”filter: contrast(120%); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing contrast effect”> </div> <div> <h3 style=”filter: contrast(0.5); font-size: 2rem;>Contrast(0.38)</h3> <h3>Contrast(120%)</h3> <img style=”filter: contrast(120%); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing contrast effect”> </div> <div> <h3>Contrast(0.38)</h3> <img style=”filter: contrast(0.38); width: 400px; height: 300px;” src=”images/red-flower.jpg” alt=”showing contrast effect”> </div> </body> </html> CSS filter – Drop Shadow Effect Drop Shadow is a blurred version of the image, shown in

CSS – place-content ”; Previous Next CSS place-content is a shorthand property that aligns content in both the block (column) and inline (row) axes simultaneously. It is used to set both the align-content and justify-content properties in a single declaration. This property is a shorthand for the following CSS properties: align-content justify-content Possible Values start − Items are aligned to each other against the start edge of the container in the corresponding axis. end − Items are aligned to each other against the end edge of the container in the corresponding axis. flex-start − Aligns the items at the start of the flex container. flex-end − Aligns the items at the end of the flex container. center − Aligns the items at the center of the flex container. left − Aligns the items to the left side of the alignment container. This value acts like start if the property”s axis is not parallel to the inline axis. right − Aligns the items to the right edge of the alignment container in the appropriate axis. This value acts like start if the property”s axis is not parallel to the inline axis. space-between − Items within the alignment container are evenly distributed, with equal spacing between adjacent items, with thefirst and last items are aligned with the main-start and main-end edge. baseline, first baseline, last baseline − These values specify the involvment of first or last baseline alignment in the alignment of the content. First and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items. The start is the fallback alignment for first-baseline and end for last-baseline. space-around − Items within the alignment container are evenly distributed. Each pair of adjacent elements has the same spacing before the first and last items is half the distance between adjacent items. space-evenly − Items within the alignment container are evenly distributed, with equal spacing between adjacent items and at the main-start and main-end edges. stretch − If the total size of items along the main axis is smaller than the alignment container, auto-sized items increase their size equally to fill the container, respecting max-height/max-width constraints. safe − Used with an alignment keyword and when the item overflows the container, causing any loss of data, the alignment is set as per the start value. unsafe − Used with an alignment keyword and even if the item overflows the container, causing any loss of data, the alignment value passed is honored. Applies To Multi-line flex containers. Syntax Positional Alignment place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; Baseline Alignment place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; Distributed Alignment place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; The first property value is align-content and the second is justify-content. If the second value is missing, the first value is used for both, as long as it is valid. If it is invalid for both, the entire value is invalid. CSS place-content – center start Value The following example demonstrates property place-content: center start aligns flex items horizontally towards the center and vertically towards the top of the container − <html> <head> <style> .flex-container { background-color: red; height: 300px; border: 2px solid black; display: flex; flex-wrap: wrap; place-content: center start; } .flex-container > div { flex-basis: 100px; height: 50px; margin: 5px; background-color: greenyellow; } </style> </head> <body> <div class=”flex-container”> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html> CSS place-content – start center Value The following example demonstrates property place-content: start center aligns flex items along the left edge of the container horizontally and vertically in the center of the container − <html> <head> <style> .flex-container { background-color: red; height: 300px; border: 2px solid black; display: flex; flex-wrap: wrap; place-content: start center; } .flex-container > div { flex-basis: 100px; height: 50px; margin: 5px; background-color: greenyellow; } </style> </head> <body> <div class=”flex-container”> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html> CSS place-content – end right Value The following example demonstrates property place-content: end right aligns the flex items to the right edge horizontally and the bottom edge vertically − <html> <head> <style> .flex-container { background-color: red; height: 300px; border: 2px solid black; display: flex; flex-wrap: wrap; place-content: end right; } .flex-container > div { flex-basis: 100px; height: 50px; margin: 5px; background-color: greenyellow; } </style> </head> <body> <div class=”flex-container”> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html> CSS place-content – flex-start center Value The following example demonstrates property place-content: flex-start center aligns the flex items horizontally towards the left edge and vertically towards the center of the container − <html> <head> <style> .flex-container { background-color: red; height: 300px; border: 2px solid black; display: flex; flex-wrap: wrap; place-content: flex-start center; } .flex-container > div { flex-basis: 100px; height: 50px; margin: 5px; background-color: greenyellow; } </style> </head> <body> <div class=”flex-container”> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html> CSS place-content – flex-end center Value The following example demonstrates property place-content: flex-end center aligns the flex items horizontally towards the right end and vertically towards the center of the container − <html> <head> <style> .flex-container { background-color:

CSS Printing ”; Previous Next Printing is an important aspect of any application or webpage. Print of a content can be made very different from its interface look. While printing a user may want to: Use images with higher resolution for more clearer and better result. Adjust the application”s or website”s layout, as per the size and shape of the page. Enhance the overall appearance of the application or website on printing. Provide additional styles only applicable for printing. In order to manage all your printing needs and process, you may take an account of the points referred in this article. CSS Printing – Using A Print Style Sheet You can have a stylesheet explicitly for printing needs and link it to your code. Add the following code block in your html: <link href=”/path/to/print.css” media=”print” rel=”stylesheet” /> CSS Printing – Using Media Queries and @page At-Rule CSS provides the @media at-rule, that can be used to set different styling needs for your webpage when printed on a page or displayed on screen, using the options print and screen, respectively. You can add the following code block at the end of your stylesheet. This is an example. @media print { /* All print related styles to be added here */ #header-part, #footer-part, #nav-part { display: none !important; } } The above code snippet will not print the styles of #header-part, #footer-part, and #nav-part, while printing. The various aspects of pages, such as, orientation, dimension, margin, etc. can be adjusted and modified using the @page at-rule. All the pages or sub-set of some pages can be targeted using this rule, while taking the print. CSS Printing – Print Requests Detection The events beforeprint and afterprint are sent by the browsers to let the content determine, when the printing may have occurred. This feature can be used to adjust the printing layout and the user interface during printing process. CSS Printing – Using @page at-rule In the following example, the content of the webpage is divided into sections, which when opened in print format, breaks into different pages and the margin of the pages is also set in the print format. <html> <head> <style> @page { size: landscape; margin: 15%; } section { page-break-after: always; break-after: page; background-color: aquamarine; width: 500px; } @media print { button { display: none; } } </style> </head> <body> <article> <section> <h2>Header1</h2> <p> Section one </p> </section> <section> <h2>Header2</h2> <p> Section two </p> </section> <section> <h2>Header3</h2> <p> Section three </p> </section> </article> <button style=”background-color: green; color: white; font-size: 1em;”>Print</button> <script> const button = document.querySelector(“button”); button.addEventListener(“click”, () => { window.print(); }); </script> </body> </html> CSS Printing – Using @media Query The following example demonstrates the use of a media query (@media), where a format or style is specified for screen display and the same content is changed for print format. On click of Print button, the page layout and style changes. <html> <head> <style> @media screen { h2 { font-size: large; font-family: Verdana, Geneva, Tahoma, sans-serif; color: blue; font-style: normal; } } @media print { h2 { font-family: cursive; font-style: italic; color: red; } } @media print { button {display: none;} } </style> </head> <body> <article> <section> <h2>Header1</h2> <p> Section one </p> </section> <section> <h2>Header2</h2> <p> Section two </p> </section> <section> <h2>Header3</h2> <p> Section three </p> </section> </article> <button style=”background-color: green; color: white; font-size: 1em;”>Print</button> <script> const button = document.querySelector(“button”); button.addEventListener(“click”, () => { window.print(); }); </script> </body> </html> CSS Printing – Use Of afterprint Event Following example demonstrates the use of afterprint event and post printing the page closes itself and goes back to the last page. <html> <head> <style> @media screen { h2 { font-size: large; font-family: Verdana, Geneva, Tahoma, sans-serif; color: blue; font-style: normal; } } @media print { h2 { font-family: cursive; font-style: italic; color: red; } } @media print { button {display: none;} } </style> </head> <body> <article> <section> <h2>Header1</h2> <p> Section one </p> </section> <section> <h2>Header2</h2> <p> Section two </p> </section> <section> <h2>Header3</h2> <p> Section three </p> </section> </article> <button style=”background-color: green; color: white; font-size: 1em;”>Print</button> <script> const button = document.querySelector(“button”); button.addEventListener(“click”, () => { window.print(); }); window.addEventListener(“afterprint”, () => self.close); </script> </body> </html> CSS Printing – Link To An External Style Sheet The print styles can be added in a file and the same CSS file can be linked to your html code, as an external stylesheet. Refer the example below: <html> <head> <link href=”print.css” media=”print” rel=”stylesheet” /> <style> @media screen { h2 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-style: normal; color: rebeccapurple; } } </style> </head> <body> <article> <section> <h2>Header1</h2> <p> Section one </p> </section> <section> <h2>Header2</h2> <p> Section two </p> </section> <section> <h2>Header3</h2> <p> Section three </p> </section> </article> <button style=”background-color: green; color: white; font-size: 1em;”>Print</button> <script> const button = document.querySelector(“button”); button.addEventListener(“click”, () => { window.print(); }); </script> </body> </html> Print Page Previous Next Advertisements ”;