The Coding Express

In the last two articles, we learned about animations in CSS and various ways to customize them with the help of iterations and animation delays. Now in today's article, we are going to learn more about them so that to customize them even more. Let's begin... Reverse Directions and Alternate Cycles The animation-direction property in CSS decides whether we want to play animation forward, backward or in alternate cycles. Following values are possible: normal - This is the default. Animation plays as normal(forward). reverse - The animation plays in reverse direction that is backward. alternate - The animation first plays forward and then backward. alternate-reverse - The animation first plays backward and then forward. Speed Curve of Animation Just like we used various ways to customize transitions in CSS some articles before, same functions can be used to change the speed of the animation. The animation-timing-function property specifies the speed curve ...

In the last article, we learned about animations in CSS. We learned about the important  @keyframes rule and also seen one example to use it in which we changed the background-color property of div using rules defined in keyframes. Now let's dive deep to learn more about it. Changing Two Properties Simultaneously In the example of the previous article, we just changed background-color using keyframes rule. Let's see the example in which we are changing background-color as well as the position of the div element. To work this properly we are going to position property of div value relative so that we can change it using keyframes. @keyframes myAnimation { 0 % { background-color : blue ; left : 0px ; top : 0px ;} 25 % { background-color : red ; left : 200px ; top : 0px ;} 50 % { background-color : yellow ; left : 200px ; top : 200px ;} 75 % { background-color : green ; left : 0px ; top : 200px ;} 100 % { background...

In the last two articles, we learned about CSS transitions and created some pretty cool elements with transitions and transformations. Now in today's class, we are going to learn animations in CSS which creates animations without the use of javascript or flash. CSS Animations A CSS animation lets us change an element's style from one to another. We can change as many properties as we want. To use this CSS animations, we have to first specify some keyframe rules which include how and which properties are we changing. The @keyframes Rule When we specify CSS styles inside the  @keyframes rule, the animations will gradually change from current style to new style at certain times. To get these working, we must bind animations to an element. Let's understand more by an example... @keyframes myAnimation { from { background-color : blue ;} to { background-color : red ;} } div { width : 100px ; height : 100px ; background-color : b...

In the last article, we learned the basics of CSS transitions and also implemented them in one example, where we changed the width of div slowly when we hover over it. We also have seen how to change two properties simultaneously. Now let's move forward to see some more ways to customize the transitions in CSS. Speed Curve of the Transition The transition-timing-function property in CSS helps to specify the speed curve of the transition effect. This speed curves decide how speed varies in given duration. This property can have one of the following values: ease - This is the default value. In this transition starts effect starts slowly, then fast and ends with slow again. linear - In this transition maintains same speed though start to end. ease-in - Transition with slow start ease-out - Transition with slow end ease-in-out - Transition with slow start and slow end cubic-bezier(n,n,n,n) - This transition let us define our own values for cubic bezier function Let...

In the last few articles, we were learning about transformations CSS which includes some 2D as well as 3D transformations. Although transformations are good for changing some properties of the element, in many cases we want the user to see some spectacular changes on the webpage. We can make it possible using CSS transitions. Let's see how... CSS Transitions CSS transitions allow us to change property values smoothly from one value to other with specified time interval by us. For example, you can change the width of div from 10px to 20px in the time of 3 seconds when the user hovers over it which will give visual effects to it. How to implement the CSS Transitions? To create a transition effect, we have to specify two things: The CSS property we want to add effect to The duration of effect It is important to mention the duration, else there will have no effect as default duration is 0 seconds. Let's have a simple example: See the Pen WDS81-1 by blackbird ...

In the last two articles, we learned about 2D transforms in CSS which includes skewing, rotating, scaling and translating of elements with just a few lines of code. Now it's time to learn some cool 3D transformations in CSS. Let's begin... The rotateX() method The rotateX() method rotates an element about X-axis with given input value of the angle. div { -webkit-transform: rotateX( 30 deg); /* Safari */ transform: rotateX( 30 deg); } The rotateY() method The  rotateY() method rotates an element about Y-axis with given input value of the angle. div { -webkit-transform: rotateY( 30 deg); /* Safari */ transform: rotateY( 30 deg); } The rotateZ() method The  rotateZ() method rotates an element about Z-axis with given input value of the angle. div { -webkit-transform: rotateZ( 30 deg); /* Safari */ transform: rotateZ( 30 deg); } There are some other methods of 3D transformations but they ar...

In the last article, we learned what the CSS transforms are and also started learning 2D transforms. Following are some of the commonly used 2D transformations: translate() rotate() scale() skewX() skewY() matrix() Previously we learned about first 3 of them. Let's complete remaining today. The skewX() method The skewX() method allows skewing an element along the X-axis by the given angle input. The given code will skew the  element 30 degrees along X-axis: See the Pen WDS79-1 by blackbird ( @blackbird98 ) on CodePen . The skewY() method The skewY() method allows skewing an element along the Y-axis by the given angle input. The given code will skew the  element 30 degrees along Y-axis: See the Pen wds79-2 by blackbird ( @blackbird98 ) on CodePen . The skew() method Although I didn't mention it in a list, it is just combination of above two methods. It takes two arguments and skews the element in X and Y directions according to each ...

In last 5 articles of this web development series, we learned and understood the concept of CSS Grids which helps to create responsive layouts for web pages in very few lines of CSS. Now moving forward, we are going to see about styling various elements using transformations and animations. So let's begin... CSS Transforms CSS translations allow us to translate, rotate, scale and skew elements created in HTML using CSS. These transformations may change shape, position, size, and orientation of element. CSS transforms is mainly divided into 2D and 3D. 3D transforms make changes such that we feel them in 3 dimensions. CSS 2D Transformations Following are some of the commonly used 2D transformations: translate() rotate() scale() skewX() skewY() matrix() The translate() method This method changes the position of the element from its current position. The change in position is according to parameters given to translate() , where the first parameter represents ...

In the last article, we learned about grid gaps in CSS and also created basic CSS layout using CSS Grids which was responsive. Now as we have learned all basic properties to create our final CSS grid layout for our website layout. We are going to recreate the same layout as we created in  'Standard Website Layout' as we created without CSS Grids but the difference that it will be responsive. Let's do it... Standard Website Layout using CSS Grids This layout will contain: Header Three unequal columns Footer On smaller screens, the columns will stack on top of each other. We can visualize it by resizing the window of the browser OR by clicking here CSS button by resizing the width of output in Codepen window. I encourage you to try to write it yourself before seeing the code... See the Pen WDS77-1 by blackbird ( @blackbird98 ) on CodePen . Yeah... We have successfully created the standard responsive website layout using CSS Grids which you can use to c...

In the last article, we learned two main properties of CSS Grids which are display and grid-template-columns or rows. This two properties helped us to create a simple grid layout with just 3 lines of CSS code. Now let's see some other properties that will help us to create a perfect CSS grid layout. Grid Gaps The space between each column/row is called gaps.We can adjust the gap size by using one of these properties: grid-column-gap grid-row-gap grid-gap Here how we will use it: .container { display : grid; grid-column-gap: 50px ; } .container { display : grid; grid-row-gap: 50px ; } grid-gap is shorthand for this properties. .container { display : grid; grid-gap: 50px 100px ; } First Layout Now we are ready to create first full-fledged CSS Grid layout. Let's do it... See the Pen WDS76-1 by blackbird ( @blackbird98 ) on CodePen . See our responsive layout is ready. You can check it by changing the ...

In the last article, we learned about some important terms related to CSS Grids including grid container and grid items. Now in next few articles, we are going to learn various properties of this grid elements. Let's begin... display It defines the element as a grid container and creates a new grid formatting for its elements. Available values: grid - Creates a block-level grid inline-grid - Creates an inline-level grid subgrid - This is used to create nested grids. In this case, your grid container is itself a grid item of parent grid. .container { display : grid; } grid-template-columns grid-template-rows It defines the columns and rows of the grid with the space-separated list of values. Here values will decide the size of each row/column and space between them represent a grid line. Available values:   - Indicates the length and can be in percentage, px or any other valid unit   - Optional name of that line If you do not ...

In the last article, we learned about the need of using css grid and what it actually changes in designing web pages rather than using other positioning methods like float and inline-blocks. Now let's move forward to know some of the basic terms of css grids and understand it. Important Terms Before actually knowing how to create a grid layout let's clear our terminology about it. Grid Container It is the direct parent of all the grid items. This is the element on which display: grid is applied. In the given example, the container is the grid container. 1 2 3 4 5 <div class= "container" > <div class= "item" ></div> <div class= "item" ></div> <div class= "item" ></div> </div> Grid Items The children(direct) of the grid container. Here the item elements are grid items, but item1 isn't. 1 2 3 4 5 6 7 <div class= "container" > ...