Playing With Text and PNG Shadows and Animate them with Sass Scss

---

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to define multiple shadows on texts.
• You will learn how to create a shadow effect on PNG files with filter: drop-shadow().
• You will learn how to define shadow animation and create a blinking effect with @keyframes - from.
• You will learn how to use on @keyframes multiple shadows.
• You will learn how to crerate a responsive page for your project with viewport and some other codes.
• You will learn how to use viewport and % on your styles.

Requirements

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

Resources

• https://codepen.io/dubbs/pen/gCbnp
• https://css3gen.com/text-shadow/
• https://css-tricks.com/snippets/css/keyframe-animation-syntax/
• https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
• https://sass-lang.com/
• https://github.com/sass/sass
• https://www.w3schools.com
• 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 play with shadows and its blur effect and we will also anime them. We will also use a png without background and learn how to define a shadow on it. If you follow this tutorial download all files from my github page and change your image or colors. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

---

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section we have only one div and there is an images and some texts in it. We will use viewport code to make our page responsive.

---

2- We start to code with body to give us a background color and some common rules. After that we position our div and style our texts.

---

3- We are using here our shadows and also our animation to create movement in keyframe.

---

4- With these codes we are making image also responsive and we define drop shadow to our png.

---

5- Here we use keyframe to let our animation work. We use multiple shadows with different blur size and also we are working with variables here.

---

---

6- And finally our end work...

---

Video Tutorial

Curriculum

• Color Animations & Using as Background - 360° Infinite Image 3D with Sass-Scss
• Curriculum Gallery Page Design with Sass-Scss using gifs and hyperlinks
• Intro Page with Text Animation Using Sass - Scss
• Image Dimensions and 3D 360deg rotate effect with Sass Scss
• Rounded Image With Rainbow Color Shadow Animation with Sass-Scss
• 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/Sass-Scss-Tutorials/tree/master/Playing_with_text_shadows_and_Animate_them