CSS Advanced topics

Transforms

Suppose, we have to display an element in a differently rather than normal visibility. To accomplish this, CSS3 has introduced something called as "CSS Transforms". The "Transforms" word comes from changing the size, shape and orientation of an HTML element

There are many types of transforms, we will see some of them and their examples and use in the following paragraph.

• ROTATE
• SCALE
• SKEW

Let us now go in-depth about each of them:

• rotate(30deg) transform the angular orientation of thr elent to a different which is given as parameter to the function
• scaleX(3.5) will make the element double or as many times you want along the X-axis using the vaue you give to the function
• scaleY(2) will make the element double or as many times you want along the Y-axis using the vaue you give to the function
• scale(6,7) will make the element double or as many times you want along the X-axis and Y-axis using the vaue you give to the function

Note: The unit for mentioning the degrees for transform CSS3 functions is deg and should be in round bracket after the number for e.g.,

div {
	transform: rotate(30deg);
}

Transitions

Transitions are used to chnage an HTML elemenet or more trha one elements when a certain event taks place, like user scrolling a web page, a user hovering over a hyperlink, a user submits a form, a user presses an invalid key

All transitions have one property i.e., the duration in which the transition takes place.
For example, if the transition time for a particular html element is 5s then the transition will take 5 seconds to go from its initial position to its final position.
There are 5 ways in which a html element can transit from one position to another. Here are the following five ways:

• linear => All the transition happens ata linear same pace
• ease => The transition changes very slowly both at the start,end and the middle part of the transition
• ease-in => In this the transition starts slowly but it gains speed ie it accelerates quickly to the destination position
• ease-out => In this the gtransition starts out very slowly and itgains space after the half time of the total duration of the transition
• ease-in-out => In This, the transition starts slowly for the first quarter, linear in the half time and again slow in the end

calc() function:

Sometimes, we need to deal with percentages rather than absolute values because we have the percentage as a n input and not an integre. Suppose in a Grocery market database we have 6% off oon buying 10 banaans each for rupees 5 we have to have a profit margin of 30 rupees we will right in the CSS porperty for that elemnt as calc(100 -6% + 36)

What this will be do is takes the MRP of the item as 100 ruppees deduct 6 rupees and then add a service changes of 36 to make the profit 30

Pseudo Selectors

The following sections will describe how the element can behave in different circumstances inclunding eevents, user interaction.
The pseudo selectors are prefixed by the : or :: symbol
Examples:

1. :nth-child(int or even or odd) - example => select 9th child element or all even or all odd child elements
2. :nth-of-type(int or even or odd) - example => select 3rd <p> child or all even numbered <p> children or all odd numbered <p> child
3. :hover - example => change the color of a hyperlink when you hover over it
4. :visited - example => chnage the color of the hyperlink when you have visited the destination web page after clicking on that link
5. :active - example => change the color of the hyperlink when the user has just pressed the hyperlink