GRID IMAGE AND BORDER ANIMATION IN CSS – Turkish Video Tutorial

Video : Turkish Language
Tutorial : GRID IMAGE AND BORDER ANIMATION
Githup link: CSS TUTORIAL

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. CSS More Information

What We Can Learn?

In this video tutorial, we going to grid image and border animation in CSS code. We will use two animations in sequence. Firstly, we will do grid and overflow on the pictures. Then we will add on the line animation.

We Learn About

Image
Used => transform, rotate, position , absulute, overflow, opacity
Background
Used => url(), cover
Div Tags
Used => class, span, ul, li
Animation
Used => nth-child(), @keyframes, linear, infinite, anime1-2-3-4
And Other Commands
Used => top, left, height, width, padding, list-style

Requirements

1-Brackets Program
2-Basic HTML code knowledge
3- Basic CSS code knowledge

Difficulty

Intermediate Level

Description

We continue to learn CSS in this video. In the video, I talked about CSS; Image(transform, rotate, position , absulute, overflow, opacity), background(url(), cover), div tags( class, span, ul, li), animation(nth-child(), @keyframes, linear, infinite, anime1-2-3-4) and other commands(top, left, height, width, padding, list-style).

Video Tutorial - Turkish Language - 720p

Curriculum

If you want to learn more about Css tutorial, The source files has got my github repository, you can see its below !!

Text And Dots Animation
Text Hidding Animation
Background Snow Animation
Cubic Icon Animation
Social Media Menu Animation
The Walking Human Animation
Neon Text Animation

Author : @tarikhakan55
Steemit Türkiye & Utopian-io
Community

---

Posted on Utopian.io - Rewarding Open Source Contributors

---