Advanced CSS Tutorial 108 – Web Development

Hey!! Fellows, we are back again with a new article on advanced CSS tutorial. Here we will start from where we finished in the previous article. In this, we are going to cover the new elements of CSS3.

If you missed the previous article then check once CSS Tutorial 107.

What’s inside:
CSS3 3D Transforms
Transitions
Animations
Multi-Column Layouts
FAQS:

CSS3 3D Transforms

By using  3d transforms, we can move an element to the x-axis, y-axis, and z-axis. In 3D space, the rotations have three degrees of liberty, that together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin 

Syntax:

The number of rotation created by rotate3d() is specified by three <number>s and one <angle>. The <number>s describe the x-, y-, and z-coordinates of the vector indicating the axis of rotation. The <angle> describes the angle of rotation; if positive, the change will be clockwise; if negative, it will be counter-clockwise.

rotate3d(x, y, z, a)

There are several methods of 3D transmition.

Methods of 3D transforms

Sr.No.Value & Description
1matrix in 3d {n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n}: it is used for transforms the element by using 16 values of matrix
2translate3d(x,y,z):used for transforms the element by using x-axis,y-axis and z-axis
3translateX(x):Uses for transforms the element by using x-axis
4translateY(y): Applied to transforms the element by using the y-axis
5translateZ(z): Applied to transforms the element by using y-axis
6scaleX(x): Applied to scale transforms the element by using the x-axis
7scaleY(y): Uses for scale transforms the element by using the y-axis
8scaleY(y): Used to changes the element by using the z-axis
9rotateX(angle): Used to rotate modifies the element by using the x-axis
10rotateY(angle): Applied to rotate transforms the element by using y-axis
11rotateZ(angle): Uses for rotating transforms the element by using the z-axis

Here example of some methods:

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>

</body>
</html>

The rotateY() Method

According to the provided degree, the CSS 3D rotateY() method is applied to rotate an element around its Y-axis.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div example.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>

The rotateZ() Method

The CSS 3D rotateZ() method is used to rotate an element around its Z-axis according to the given degree.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>

CSS3 Transitions

advanced css tutorial

CSS transitions present a way to control the animation speed while changing the CSS properties.

Normally, we can say that a transition occurs when an element changes from one state to another, and the browser fills in that state change with a sequence of in-between frames. It has a beginning and also an end state.

There are multiple type of transition is present in CSS3:

  1. transition
  2. transition-delay
  3. transition-duration
  4. transition-property
  5. transition-timing-function

The sample below the box will change its background color over 1 second in a linear fashion.

advanced css tutorial

Transition Property

The CSS transition-property specifies the name of the CSS property. The transition effect is for (the transition effect will start when the specified CSS property changes). Additionally, all keyword value may be used to transition all properties of an element.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: height 3s;
         }
         div:hover {
            height: 250px;
         }
      </style>
   </head>
   <body>
      <h1>technicalblog</h1>
      <p>Hover over the below box to change its height.</p>
      <div></div>
   </body>
</html>

Transition Duration

Use to the transitionduration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. i.e., the length of time it will take for the targeted element to the transition between two defined states.

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Transition timing function

The property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course.

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Transition Delay

The property is used to specify the amount of time to wait before a transition effect is animated. It allows an effect to start after some amount of time from when it is applied. The time offset specified using transition-delay will offset the animation by the amount specified.

.box {
  background: #2db34a;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 0s, 1s;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

CSS3 Animation

The CSS Animation properties are a more powerful alternative to transitions. In animation, we can change multiple properties at the same time.

For using CSS animation, we must first define some keyframes for the animation. Keyframes carry what styles the element will have at certain times. Now, the question is what is Keyframes? are list defining what should happen over the course of the animation.

When we use the style in@keyframes rule, the animation will gradually change from the current style to the new style at certain times.

The keyframe selector to a keyframe style rule begins with a percentage (%) or the keywords from (same as 0%) or to (same as 100%).

Syntax of keyframes:

@keyframes example {
  from {property: value;}
  to {property: value;}
}

The properties of the animation are:

Animation-name: used to refers to the name of the @keyframes at-rule describing the animation’s keyframes.

Animation-duration: configures the length of time that animation should take to complete one cycle.

Animation-timing-function: The property is used to specify a timing function that defines the speed over time of an object being animated.

It describes how an animation will going over one cycle of its duration, allowing it to change speed during its course.

Animation-delay: used to Configures the delay between the time the element is loaded and the beginning of the animation sequence.

Animation-iteration-count: used to arranges the number of times the animation should repeat; you can choose infinite for repeating the animation indefinitely.

Animation-direction: used to build whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

Animation-fill-mode: this property is used for Configures what values are applied by the animation before and after it is executing.

Animation-play-state: this property lets you pause and resume the animation sequence.

Here a simple example of animation:

<!DOCTYPE html>
<html>
<head>
<style>
.logo {
  margin: 0 auto;
  margin-top: 70px;
  width: 250px;
  height: 250px;
  background-color: black;
  border: 15px solid #337ab7;
  animation: square-to-circle 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
 
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:black;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:25% 25% 25% 25%;
    background:black;
  }
  50%  {
    border-radius:50% 50% 50% 50%;
    background:darkblue;
  }
  75%  { 
    border-radius:75% 75% 75% 75%;
    background:black;
  }
  100% {  
    border-radius:100% 100% 100% 100%;
    background:black;
    
  }

}
</style>
</head>
<body class="body">
<h2> technicalblog </h2></header>
<div class="logo"></div>
</body>
</html>

technicalblog

technicalblog

CSS3 Multi-Column Layouts

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. The support includes establishing the number of columns in a layout, as well as how the content should flow from column to column, gap sizes between columns, and column dividing lines (which are known as column rules) along with their appearance.

Creating Multi-Column Layouts

The CSS3 has started the multi-column layout module while creating multiple column layouts easily and efficiently.

There are some property for creating multi-column layouts:

Sr.No.Value & Description
1Column-count: applied to count the number of columns that element should be divided.
2Column-fill: applied to decide how to fill the columns.
3Column-gap: Applied to decide the gap between the columns.
4Column-rule: applied to specifies the number of rules.
5Rule-color: applied to specifies the column rule color.
6Rule-style: Used to specifies the style rule for the column.
7Rule-width: Used to specifies the width.
8Column-span: applied to specifies the span between columns.

For example:

<!DOCTYPE html>
<html>
   <head>
      <title>Three Column HTML Layout</title>
   </head>
   <body>
      <table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               CSS<br />
               PERL...
            </td>

            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technicalblog
            </td>

            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTMl<br />
               CSS<br />
               PERL...
            </td>
         </tr>
      <table>
   </body>
</html>
Three Column HTML Layout
Main Menu
HTML
CSS
PERL…
Technicalblog Right Menu
HTMl
CSS
PERL…

FAQs:

CSS Responsive grid-view often has __

ANS: In CSS 12 columns, and has a total width of 100%

If the max-width property is set to 100%, _

ANS: the video player will scale down if it has to, but never scale up to be larger than its original size

The __ operator is used for combining multiple media features together into a single media query.

ANS: and operator

@media includes a block of CSS properties only if a certain condition is true.

YES

In the coming articles, we will discuss box-sizing, flex-box, and some properties of CSS3. So, please stay with us. If you have any CSS questions, please contact us or put your question in the comment box.

6 thoughts on “Advanced CSS Tutorial 108 – Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *