- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction − Value 0deg is the "to top" direction Value 90deg is the "to right" direction Value of 180deg is the "to bottom" direction The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); Set the angle of the linear gradient The following is the code for setting the direction of linear gradients using angles in CSS. .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... Read More
The property opacity is the modern solution and works for Firefox, Safari, opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox while the –khtml-opacity property is for safari. The filter property is to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers. Set the images We will check the cross-browser opacity for the images. The second image above will get opaque on all browsers − Opacity for the 2nd image The opacity for the second image ... Read More
To set column rules, you can use the shorthand column-rule property, which allows you to set the following properties − column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns The value for column rules can be set as − column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; Also, the properties can be used separately. We will see both the examples. Column-rule shorthand property In this example, we have set the column-rule using the shorthand property − column-rule: ... Read More
To set a column gap on a web page, use the column-gap property. You can set the values as − column-gap: length|normal|initial|inherit; The values can be − length − The gap between the columns normal − A normal gap between the columns Gap between the columns To set a gap between the columns, we have set a length unit i.e. − column-gap: 25px; Example Let us see an example to set a gap between the columns − .demo { ... Read More
Use the columns property in CSS3 to set the column count and width. It is a shorthand property for column-width and column-count properties. With that, you can set both the properties separately as well. The column property The column property works as a shorthand property for the column-with and column-count properties. The following is the syntax − columns: auto|column-width column-count|initial|inherit; Example Let us see an example to set the columns property to set. This sets both the column width and count to the auto value − ... Read More
To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax The following is the syntax of height and width properties in CSS − Selector { height: /*value*/ width: /*value*/ } Here are the values of the height property − auto − The height is calculated by the web browser length − The height is defined in length units % − The height is ... Read More
The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions. Syntax The following is the syntax of the filter in CSS − filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: blur, contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. Invert The invert() is used to ... Read More
Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on several properties such as − Dimensions Type − atomic inline-level, block, inline, or inline-block Positioning − absolute, float, or normal Relation with child and neighbour elements of document External Information − viewport’s and image’s width - height, etc. CSS Box Generation of processed elements − Block ... Read More
CSS Pseudo-classes can be combined with CSS classes rather than elements themselves to provide a more selective approach to an HTML element. Let us see some quick snippets to understand. Our css class is .dropbtn and pseudo-class is :focus .dropbtn:focus { background-color: #4f3e8e; } Our css class is .card-container and pseudo-class is :hover − .card-container:hover .overlay { bottom: 0; height: 100%; } Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child ... Read More
2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. The following are some of the 2D transform functions − Sr.No. Value & Description 1 matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values 2 translate(x, y)Used to transforms the element along with x-axis and y-axis 3 skew()skew an element along the X-axis and Y-axis 4 skewX()Skew an element along the X-axis 5 skewY()Skew an element along the Y-axis 6 scale(x, y)Used to change the width ... Read More