CSS | :target Selector
The target selector is used to represent a unique element (the target element) with an id matching the URL’s fragment. It can be used to style the current active target element. URLs with a # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.
CSS | :nth-child() Selector:
The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth child.
Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.
odd: It represents elements whose position is odd in a series: 1, 3, 5, etc.
even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
functional notation (): It represents elements whose position of siblings matches the pattern An+B, for every positive integer or zero value of n.
CSS | box-shadow Property:
The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element.
Syntax:
box-shadow: h-offset v-offset blur spread color |none|inset|initial|
inherit;
Property Value:
h-offset: It is required to set the position of the shadow horizontally. The positive value is used to set the shadow on the right side of the box and a negative value is used to set the shadow on the left side of the box.
v-offset: It is required to set the position of shadow value vertically. The positive value is used to set the shadow below to the box and a negative value is used to set shadow above box.
blur: It is an optional attribute, the work of this attribute is to blur the shadow of the box.
Syntax:
box-shadow: h-offset v-offset blur;
CSS | text-shadow Property:
The text-shadow property in CSS is used to add shadows to the text. This property accepts a list of comma-separated list of shadows to be applied to the text. The default value of text-shadow property is none.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Property values:
h-shadow: It specifies the position
CSS | Variables:
The CSS variables are just like simple variable of any programming language. These variables are used to store values and have a scope in which the variables can be used. A variable is defined by using two dashes(–) at the beginning and then the name which is case-sensitive. The benefit of variables is that it allows the same values to be reused at multiple places and updated/modified from one place. Also, the variable names are easier to understand and use, compared to the values of colors.
Syntax:
var( --custom-name, value )
Parameters: The variable var() accepts two parameters which are listed below:
–custom-name:
It is a required parameter which accepts the custom property name.
value:
It is an optional parameter. It accepts fallback value which is used when custom property is invalid.of horizontal shadow
v-shadow: It specifies the position of vertical shadow
blur-radius: It is used to set the blur radius. It’s default value is none.
color: It is used to set the color of the shadow
initial: It is used to set text-shadow to its default value.
inherit: This property is inherited from its parent.
CSS Animation and @Keyframes Property:
CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, end number of times, as you want it. To use CSS animation, you must first specify some @keyframes for the animation. @keyframes will describe which styles that element will have at specific times.
The @keyframes property has the option to divide the animation time into parts/percentage and perform an activity that is specified for that part of the whole duration of the animation. the @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.
CSS | transition Property:
The transition property in CSS is used to make some transition effect. The transition is the combination of four properties which are listed below:
transition-property
transition-duration
transition-timing-function
transition-delay
Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like : hover or: active or classes dynamically set by using JavaScript.
Syntax:
transition: transition-property transition-duration
transition-timing-function transition-delay;
Note: If any of the values are not defined then the browser assumes the default values.
Property Values:
transition-property: It specifies the CSS properties to which a transition effect should be applied.
transition-duration: It specifies the length of time a transition animation should take to complete.
transition-timing-function: It specifies the speed of transition.
transition-delay: It specifies the transition delay or time when transition starts.
Top comments (0)