Transition effect with Sass (Scss)

omersurer (65)in #utopian-io • 6 years ago

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to use sass to convert scss to css
You will learn how to work with variables
You will learn how to create boxes for your text area.
You will learn how to re-position your text.
You will learn how to create transition effect for images.

Requirements

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

Difficulty

Intermediate

Description

In this tutorial you will learn how to createa nice transition effect for your websites. You can use this effect when you need to give more information about images or whatever you want.With some variables we will make it easy to change it in the future. You will need sass installed on your envoriement. You need ruby instalation for it and once you installed you will be able to translate sass scss files to css. There for you need index.html file with navigaton bar codes in it. With before/after examples you will be able to see what codes are doing.

1- Before we start our page without sass

2- With the codes here below we will create 2 boxes for our text area.

3- With this code block here below we will insert our images to this boxes

4- Now we will give new position and design to our text. It's because of effect that we will give to image later.

5- With our last codes we will create a hover effect for our image and boxes.

transition effect.gif

Video Tutorial

Curriculum

Proof of Work Done

https://github.com/omersurer

#video-tutorials #opensource #sass

6 years ago in #utopian-io by omersurer (65)

$63.30

Sort:

Trending

[-]

rosatravels (75) 6 years ago

Thank you for your contribution.

Your contribution has been evaluated according to Utopian rules and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post,Click here

@omersurer, here are some guidelines to help you improve on creating video tutorials:

For video tutorials, the tutorials need to be structured in such a way that it teaches concepts that is unique to the Open Source Project. Your audience wants to learn concepts that they can take away so that they can apply the principles to their own setting.
In your video tutorial, you tell people what you are doing on the screen, but you don't explain to them the value of the concepts. More 'structure teaching' is needed to guide the learners to learn insights about the coding and why certain technical features are used.

You can take a look at this example for your next tutorial contribution:
https://steemit.com/utopian-io/@tensor/authenticating-users-with-google-sign-in-and-firebase-firestore-inside-of-dart-s-flutter-framework

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]