Rounded Image With Rainbow Color Shadow Animation with Sass-Scss

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to use calc function and center the element.
• You will learn why we use background-size: cover background-repeat: no-repeat codes.
• You will learn how to define a round effect on square figures.
• You will learn how to use before and after functions.
• You will learn the function of animation code and combining it with @keyframes.
• You will learn the meaning and working of linear and infinite functions.
• You will learn how to resize and reposition elements for effectrs.

Requirements

• Any text editor. (Brackets, Atom, Notepad++)
• Basic HTML knowledge
• Basic SCSS code knowledge
• SASS installed.
• Local server (Wampserver)
• Any browser

Resources

• https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
• https://sass-lang.com/
• https://github.com/sass/sass
• http://thesassway.com/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://sass-lang.com/install
• https://rubyinstaller.org/

Difficulty

• Intermediate

Description

In this tutorial we will create a rounded form and rainbowcolor shadow effect for an image with sass scss. You can use this effect everywhere on your websites oly thing that you need to do is changing the image and maybe radius pixel as you want.

---

1- You need sass installed on your envorioment and need to let sass watch all changes between scss and css so that it can translate all codes to css. You need only a basic html page with 1 division in it with class name.

---

2- For our class we are defining a size and inserting our image. After positioning it with calc function we give rounding with radius.

---

3- Here we need to write before and after of our class and as background color defining a rainbow colors. To make it visible we need to define a blank content. After that we are making its size 4px bigger and as opsition 3px to left and ro top.With this codes our before and after versions will make us a little space that we need for our effect. With z-index it will be on the background and as size it will be 400% bigger for our animatec effect. And don't forget to write radius there otherwise it will be square. And as last one we define our animation effect.

---

4- Here we are giving blur effect so that colors are being little bit misty.

---

5- Here is main part of our lesson. With this codes we are activating our animation code and defining how animation will be. It chances background color with 300% to left and turning back.

---

6- This is our end work.

---

Video Tutorial

Curriculum

• Creating a Personal Card with Animation with Sass Scss codes and meaning of the codes

• Creating a Contact Form from a simple version to a stylish animated one with Sass Scss

• Transition effect with Sass (Scss)

• Animated effect and styles for navigation bar with Sass scss

• Image zoom effect with Sass

Proof of Work Done

https://github.com/omersurer

https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/ROUNDED%20BOX%20RAINBOW%20COLOR%20SHADOW%20ANIMATION