How to use Timing Animations Using Callback Functions in jQuery?

So in this blog, we’re going to create a little bit more at Timing Animations Using Callback Functions in jQuery.

In the previous blog, we also learn how can animate multiple C S S properties at once. So let’s go ahead and do that for the blue box first in index.html, with help of style.css & main.js.

Timing Animations Using Callback Functions in jQuery
Timing Animations Using Callback Functions in jQuery after animations effects
Tagged : / / / / / / / /

How to use Delaying and Chaining Animations in jQuery?

So in this blog, we’re going to create a Delaying and Chaining Animations using the animate in jQuery.

In the previous blog, we also learn how can animate multiple C S S properties at once. So let’s go ahead and do that for the blue box first in index.html, with help of style.css & main.js.

Delaying and Chaining Animations in jQuery
Delaying and Chaining Animations in jQuery after animations effects
Tagged : / / / / / / /

How to create an Attractive Isometric card in a row using HTML & CSS?

In this blog, I am creating an Attractive Isometric card in a row using HTML & CSS. So, Let’s create a “index.html” & “style.css” below index.html code-

In this index.html container with card & multiple class which is define style.css page-

Tagged : / / / / / /

How to create an Attractive Item Check List using HTML & CSS?

In this blog, I am going to create an item checklist using HTML & CSS. So, first, create an “index.html” and “style.css” page so, below-showing index.html page-

In this index.html mostly used label, & input tag with a class which is defined below style.css page-

In this style.css page used class and multiple tags which is included in index.html. After that with help of style.css page create below Item check list-

In this Item Check List when you click on the check box then show the correct sign and text will be dark from the horizontal line.
Tagged : / / / / /

How to Create Pure CSS Scrolling Text Animation Effects?

In this blog, I am creating Scrolling Text Animation Effects with HTML & CSS. So, let’s Create an index.html & style.css page so, below an index.html page content-

Below style.css file, in this file, i am using multiple CSS class & id which is used in index.html.

Tagged : / / / / / / /

How does Attribute Selector work in CSS?

We can set style using attribute or its value.

Set Style using attribute : –

Syntax: –

Selector [attribute] { CSS ;}

Ex: –

div [id] { color: red; }

Set style using attribute and its value: –

Syntax: –

Selector [attribute = “value”] {  CSS  }

Ex: –

div[id=“data”] { color: red; }

Set Style using an attribute value containing a specified word.

Syntax: –

[attribute ~= “value”] { CSS }

Ex:-

[class ~= “game”] { color: red; }

game
supergame
game-super
gamesuper
super-game
game super
super game

Set Style using with the specified attribute starting with the specified value.

Syntax: –

[attribute |= “value”] { CSS }

Ex:-

[class |= “game”] {color: red;}

The value must be a whole word.

Ex: –

“game” or “game-super”

game
supergame
game-super
gamesuper
super-game
game super
super game

Set Style whose attribute value begins with a specified value.

Syntax: –

[attribute ^= “value”] { CSS }

Ex:-

[class ^= “game”] {color: red;}

game
supergame
game-super
gamesuper
super-game
game super
super game

It is not necessary that the value should be a whole word.

Set Style whose attribute value ends with a specified value.

Syntax: –

[attribute $= “value”] { CSS }

Ex:-

[class $= “game”] {color: red;}

game
supergame
game-super
gamesuper
super-game
game super
super game

It is not necessary that the value should be a whole word.

Tagged : / / / / /

How to use border-left Property in CSS?

The border is a Property in CSS which is used in Element with the help of css. So below border-left property –

  • border-left-style
  • border-left-width
  • border-left-color
  • border-left

border-left-style

  • none – This is default which specifies no border.
  • hidden – This is very similar to none value, except in border conflict resolution for table elements
  • solid – It specifies a solid border
  • dotted – It specifies a dotted border
  • double – It specifies a double border
  • dashed – It specifies a dashed border
  • groove – It specifies a 3D grooved border.
  • ridge – It specifies a 3D ridged border.
  • inset – It specifies a 3D inset border.
  • outset – It specifies a 3D outset border.

border-left-width

  • medium – This is default value which specifies a medium left border.
  • thin – It specifies a thin left border
  • thick – It specifies a thick left border
  • length – We can define left border length in the form of % px etc.

border-left-color

  • color value
  • transparent

border-left

Syntax:-

selector{ border-left: border-left-width border-left-style border-left-color;}

Ex:-

p{ border-left: 10px solid red;}

Tagged : / / / / / /