Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The outline shorthand property can be defined to draw a line of specific style (required), thickness, and color around the borders of the element, but the outline is not a part of element’s dimensions unlike border property. Syntax The syntax of CSS outline Shorthand property is as follows − Selector { outline: /*value*/ } The value above can be − outline-width outline-style outline-color Outline property with style and color Let’s see an example of the outline Shorthand property. We have set the outline style with color − outline: groove black; Example ... Read More
We can define a fixed min-width for an element’s content box using CSS min-width property which does not allow the element’s content box to be narrower even if width is lesser than min-width. Syntax The syntax of CSS min-width property is as follows − Selector { min-width: /*value*/ } The value can be − length − Set the min width in px, cm, em, etc. % − Set the min width in % Minimum width for the text Let’s see an example for the CSS min-width property. We have set the minimum width to one of the elements − span.demo { min-width: 200px; ... Read More
We can define a fixed min-height for an element’s content box using CSS min-height property which does not allows the element’s content box to be smaller even if height is lesser than min-height. Syntax The syntax of CSS min-height property is as follows − Selector { min-height: /*value*/ } The value can be − length − Set the min height in px, cm, em, etc. % − Set the min height in % Example In this example, we have set the minimum height for the element − p.demo { min-height: 120px; background-color: green; } Let us see the example − ... Read More
We can define a fixed max-width for an element’s content box using the CSS max-width property which does not allows the element’s content box to be wider even if width is greater than max-width. Syntax The syntax of CSS max-width property is as follows − Selector { max-width: /*value*/ } The value can be − length − Set the max width in px, cm, em, etc. % − Set the max width in % Example Let’s see an example for CSS max-width property. Here, on the click of a button the maximum width is set. First, set the container. Within that, set a div for the ... Read More
We can define a fixed max-height for an element’s content box using CSS max-height property which does not allows the element’s content box to be taller even if height is greater than max-height. Remember to set the overflow property if the content is larger than the maximum height. Syntax The syntax of CSS max-height property is as follows − p.demo { margin: 35px 70px 50px; } The value can be − length − Set the max height in px, cm, em, etc. % − Set the max height in % Set maximum height for the child container Let’s see an example for the CSS max-height property. ... Read More
The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin: /*value*/ } The value above can be − margin-top margin-right margin-bottom margin-left The following examples illustrate CSS margin shorthand property − Margin property with all the values The margin property with all the values sets values for the top, right, bottom, and left properties − margin: 7% auto -3% 25%; ... Read More
The scale3d() function is used to scale an element in 3D space. The element is scaled based on numbers set as parameter. Syntax The following is the syntax of the scale() method − scale3d(x, y, z) Above, x, y, z is the x-axis, y-azis, and z-axis. Scale an image Let us now see another example. In this, we will scale an image using the x, y, and z values in the scale3d() method − .scale3d_img { transform: scale3d(-1.4, 0.4, 0.7); } Example Let us see the example − ... Read More
The rotate3d() function in CSS is used to rotate an element in 3D space. Set the amount and angle of rotation as parameter of rotate3d(). Syntax The following is the syntax of the rotate3d() method − rotate3d(x, y, z, angle) Above, x, y, z is the x-axis, y-azis, and z-axis. The angle is the angle of rotation − Positive angle − Clockwise rotation Negative angle − Counter-clockwise rotation Clockwise rotation of an element In this example, we have set the x, y, z axis. We have set the clockwise rotation with a positive angle − ... Read More
The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function. Syntax The syntax is as follows − Transform: translate(x, y) Above, transform the element along with x-axis and y-axis. Translate an image In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property − .translate_img { transform: translate(50px, 20px); } Example Let us now see the ... Read More
The scale() function in CSS is used to define a transformation that resizes an element on the 2D plane. Set the amount of scaling in each direction as the parameter of the scale() function. The transform property is used to set the scale. Syntax The following is the syntax of the scale() − transform: scale(width, height); Above, scale along the width and height. Increase the image size In this example, we have set the transform property to scale the image size. The scale(1.2, 1.3) will increase the height and width of an image − transform: scale(1.2, 1.3); ... Read More