Topic Name

Subtopic Name

Learning Outcome(Slide2)

6

Basics of branding and messaging

5

Target audience and segmentation

4

Different marketing channels

3

Creating value for customers

2

Understanding customer needs

1

What marketing means ?

Choose cool, soft colors instead of vibrant colors
Max 6 Points for Summary & Min 4

Topic Name-Recall(Slide3)

Hook/Story/Analogy(Slide 4)

What is the CSS transform Property?

The transform property in CSS is used to change the position, size, rotation, or shape of an element without affecting the layout of other elements.

Translate

Rotate

Scale

Skew

Before We Move To Transformations, Let's Understand The Axes In CSS Transformation

X-axis

Y-axis

Y-axis

X-axis

-1

-5

-4

-3

-2

-1

-5

-4

-3

-2

1

4

3

2

5

1

2

3

4

5

Positive value in X-axis

Negative value in X-axis

Negative value in Y-axis

0

Positive value in Y-axis

Let's Understand The Axes And See How They Affect Rotation

X-axis

Y-axis

Y-axis

X-axis

-1

-5

-4

-3

-2

1

4

3

2

5

-1

-5

-4

-3

-2

1

4

3

2

5

0

A positive `rotate` value in CSS rotates the element clockwise

Let's Understand The Axes And See How They Affect Rotation

X-axis

Y-axis

Y-axis

X-axis

-1

-5

-4

-3

-2

1

4

3

2

5

-1

-5

-4

-3

-2

1

4

3

2

5

0

A negative `rotate` value in CSS rotates the element anticlockwise

Let's Delve Into The Architecture Of The Transform Property

transform: translate(100px);

Value

Property

Let's Delve Into The Architecture Of The Transform Property

transform: translate(100px);

100px

transform: translate(100px);

translate(        )

transform: translate(100px);

transform

Parameters are set within the function

Property

Function

Defines what aspect of an element is being styled

CSS functions manipulate styling data

Parameters in CSS functions define specific settings or values used for styling elements

translate() CSS function

The translate() function is a CSS transform function used to move an element from its original position along the X-axis and Y-axis 

It changes only the visual position of the element without affecting the layout of surrounding elements.

transform: translate( x , y );

x â†’ Moves the element horizontally.

translate() CSS function

The translate() function is a CSS transform function used to move an element from its original position along the X-axis and Y-axis.

It changes only the visual position of the element without affecting the layout of surrounding elements.

transform: translate( x , y );

y â†’ Moves the element vertically.

 .card:hover{
            transform: translatex(100px);
        }

 .card:hover{
            transform: translatex(-100px);
        }

rotate() CSS function

The rotate() function is a CSS transform function used to rotate an element around its center by a specified angle.

It changes the element's orientation without affecting the layout of surrounding elements.

transform: rotate(angle);

Positive value (+) â†’ Rotates clockwise

rotate() CSS function

The rotate() function is a CSS transform function used to rotate an element around its center by a specified angle.

It changes the element's orientation without affecting the layout of surrounding elements.

transform: rotate(angle);

Negative value (-) â†’ Rotates counterclockwise

 .card:hover{
            transform: rotate(90deg);
        }

 .card:hover{
            transform: rotate(-90deg);
        }

scale() CSS Function

The scale() function is a CSS transform function used to increase or decrease the size of an element without changing its original layout.

It can enlarge or shrink an element along the X-axis, Y-axis, or both axes.

transform: scale (x, y);

  • x â†’ Scaling factor along the horizontal (X) axis.
  • y â†’ Scaling factor along the vertical (Y) axis.

scale() CSS Function

The scale() function is a CSS transform function used to increase or decrease the size of an element without changing its original layout.

It can enlarge or shrink an element along the X-axis, Y-axis, or both axes.

transform: scale (x, y);

If only one value is provided, it is applied to both the X and Y axes.

 .card:hover{
            transform: scale(1.2);
        }

 .card:hover{
            transform: scale(0.8);
        }

skew() CSS Function

The skew() function is a CSS transform function used to slant (tilt) an element along the X-axis, Y-axis, or both axes without changing its original size.

It gives the element an angled or distorted appearance.

transform: skew (x-angle, y-angle);

  • x-angle â†’ Tilts the element along the X-axis.
  • y-angle â†’ Tilts the element along the Y-axis.

 .card:hover{
            transform: skewX(15deg);
        }

 .card:hover{
            transform: skewY(15deg);
        }

So far, we've explored all the CSS Transform properties...

Now, let's understand the CSS Transition property.

What is the CSS transition Property

The transition property in CSS is used to create smooth animations when the value of a CSS property changes.

Instead of changing instantly, the property changes gradually over a specified duration, making the user interface more attractive and interactive.

transition: property duration timing-function delay;

Transition Properties

transition-property

Specifies the CSS property to animate.

transition-duration

Specifies how long the transition takes.

transition-timing-function

Controls the speed of the transition

transition-delay

Delays the start of the transition.

Without transition

With transition

Difference : with transition VS without transition

.card {

transition : 0.5s;

}

 

 .card:hover{
            transform: translate(100px);
        }

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.

To use CSS animation, you must specify some keyframes for the animation.

CSS animation-name and animation-duration

The animation-name

property specifies a name for the animation.

The animation-duration property defines how long an animation should take to complete.

CSS @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.


div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: myAnimation;
  animation-duration: 4s;
}

@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

CSS @keyframes Rule

Core Concepts (Slide 6)

Core Concepts (Slide 7)

Core Concepts (.....Slide N-3)

Summary

5

Build strong branding

4

Use different marketing channels

3

Target the right audience

2

Create and communicate value

1

Understand customer needs

Choose cool, soft colors instead of vibrant colors
Max 5 Points for Summary & Min 2

Quiz

Which platform is mainly used for professional networking and B2B marketing ?

A. Facebook

B. Instagram

C. LinkedIn

D. Snapchat

Quiz-Answer

Which platform is mainly used for professional networking and B2B marketing ?

A. Facebook

B. Instagram

C. LinkedIn

D. Snapchat

Web design - Responsive Web Design

By Content ITV

Web design - Responsive Web Design

  • 26

More from Content ITV