THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Learn Complete CSS3 In One Video In HINDI 2019

Learn Complete CSS3 In One Video In HINDI 2019




Here is the video, I cover all the topic of CSS3. So Check it out.

What is CSS3?

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, text effects, transitions or animations, as well as new layouts like multi-columns, flexible box, etc.

CSS2.1      vs      CSS3

In CSS we have

CSS Id and Class
CSS Background Property
Fonts  CSS
Text CSS
Borders CSS
Box Model CSS
Scrollbars
Positioning CSS
Z-Index
List CSS
CSS Float
CSS Display
Cursors in CSS





Now, In  CSS3 we have (Latest Features added)

Text Effects in CSS3 – text shadow
Font in CSS3 – Font family
Animation in CSS3 
Transition in CSS3
Multiple Column Layout in CSS3
Backgrounds in CSS3 – Background size
Borders in CSS3 – border-radius
User Interface in  CSS3 – box- sizing , resize 
2D/3D Transformations in CSS3
Linear-gradient in CSS3
Flexbox in CSS3

Now we will see each one of them 

Text Effects in CSS3

 A CSS3 Text Effect is a such term which is used to implement some extra features on the normal text. There are mainly two properties of CSS3 Text Effects, which have been described as follows:
 1:  text-shadow - text-shadow is used to create the shadow around the text, We can change the shadow color 
2:  word-wrap - word-wrap is used to break the continued text in another line.

Fonts in CSS3.

With the help of CSS3 Fonts feature, we can create different types of font style.The font file can found in ttf(True type font) format or otf(Open type font) format. The @font-face rule you must first define a name for the font (e.g. myFont), and then point to the font file.

Animation in CSS3 

An Animation is such a property of CSS3, which is used to animate the object, without using flash or any other animation application. When the animation is created in the @keyframe, bind it to a selector, otherwise, the animation will have no effect.
animation   Required. Defines the name and duration of the animation.
keyframes-selector Required. Percentage of the animation duration.
Legal values: 0-100% from (same as 0%) to (same as 100%)

Transition Effects in CSS3 

A CSS3 Transition Effect is such an effect that lets an element gradually change from one style to another style when hover.
There are mainly four properties of CSS3 Transition Effects, which has been described as follows:
1: transition-property
2: transition-duration
3: transition-timing-function
4: transition-delays

Bootstrap 4 in One Video MUST WATCH


Multiple Columns in CSS3 

Multiple Columns is such an advanced feature of CSS3 which is used for creating the newspaper layout. You can create your articles to Multiple Columns, even if it is in one paragraph
The three properties of CSS3 Multiple Columns have been described as follows:
1: column-count
2: column-rule
3: column-gap

Backgrounds in CSS3 

A CSS3 Backgrounds is an affords, which is used to resizing of the background properties. 

background-size is such property which is used to fix the size of a background
background-origin
background-origin:border-box background-origin:content-box

Borders in CSS3 

A CSS3 Border is such an affords of style sheet which reduces the human efforts of Photoshop and other graphical applications. 

border-radius is such property of CSS3 by which we can create the rounded corners
box-shadow is such property of CSS3 by which we can create the shadow of the border.



2D Transform in CSS3 

CSS3 2D Transform has introduced mainly five types of methods that have been described as follows:

translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position-->

the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.

the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis).

the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines.

The matrix() method combines all of the 2D transform methods into one

DONATION FOR SUPPORT:

PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)