Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
The rotate() function in CSS rotates an element. The parameter sets the angle for rotation. Values can be degrees, radians, etc. The transform property is used to set the rotation. Syntax The following is the syntax of the rotate() − transform: rotate(angle); The angle is set as a parameter, such as 45deg, 90deg, etc. Rotate an element by 45 degrees To rotate an element by 45 degrees, use the rotate() function − transform: rotate(45deg); Example Let us see the example − #demo1 ... Read More
The CSS border-width property is used to specify the width for border of an element. We can also set width for individual sides using the following properties − border-top-width border-right-width border-left-width border-right-width Syntax The syntax of the CSS border-width property is as follows − Selector { border-width: /*value*/ } The value can be thin, thick, or medium. Set a thick border The following example illustrate CSS border-width property. The thick border is set using the border-width property − border-width: thick; Example Let us see the example − ... Read More
The CSS border-style property is used to specify the border style for an element. We can also define border-style for individual sides using the − border-top-style border-right-style, border-left-style border-bottom-style Syntax The syntax of CSS border property is as follows − Selector { border-style: /*value*/ } The value can be any of the following − dotted − Set a dotted border dashed − Set a dashed border solid − Set a solid border double − Set a double border groove − Set a 3D grooved border ridge − Set a 3D ... Read More
The CSS border-color property is used to specify a border color for elements. We can also set color for individual sides using the − border-top-color border-right-color border-left-color border-right-color Syntax The syntax of CSS border-color property is as follows − Selector { border-color: /*value*/ } Above, the value can be any color. The following examples illustrate CSS border-color property − Set border color The border color for the border is set using the border-color property. Let us see the example − ... Read More