Repository
What Will I Learn?
- You will learn how to change colors on tabs with its own color.
- You will learn how to change this effect to image transition on tabs.
- You will learn how to use
nth-child()function and what it does. - You will learn how to define an animation with
scalY()function. - You will learn how to combine functions with different objects.
Requirements
- Any text editor. (Brackets, Atom, Notepad++)
- Basic HTML knowledge
- Basic SCSS code knowledge
- SASS installed.
- Local server (Wampserver)
- Any browser
Resources
- https://www.quackit.com/css/functions/css_translate_function.cfm
- http://www.simplehtmlguide.com/divisions.php
- http://www.echoecho.com/csscursors.htm
- http://blog.teamtreehouse.com/take-control-of-the-box-model-with-box-sizing
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
- https://css-tricks.com/snippets/css/keyframe-animation-syntax/
- 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
Difficulty
- Intermediate
Description
In this tutorial we will create a box with different color tabs in it and with hover function we will change its color. We will do the same thing also with images. If you follow this tutorial download all files from my github page and change the values. 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 1 division for our list. And for each list create a division with a class.
2- On our scss file we are setting a background to our body. After that we style our mainbox with bg as aqua its size as 600x400 and with other codes we are centering it to our page.
3- As second step we are defining our tabs with styling our ul. With its margin we bring its position just above the mainbox with same width. After that we define little boxes in it with styling li and we define a bg color to see the changes.
4- Now we have our boxes but its not visible at all so we define a border for each of them with hover so that we can see them.
5- In this part we are styling all of our child lists and we use here nth-child() function. Each child number belongs to following li object. We define here just color that we want and they will be visible on tabs only.
**7- Here we are defining the size of our lists so that can cover whole mainbox with it. But with scaleY() function we are making it invisible and we define there a delay for our hover effect. And with hover effect we are making them visible with scaleY(1) and it wil start to be visible from top.
7- And finally our end work...
Video Tutorial
Curriculum
- Creating a Button with Push effect as Animation with Sass-Scss
- Defining a video as Background and creating a page
- Creating a Web-Page with Information Box and Animations - Sass-Scss
- Background Image Transitions - Flat WebPage - Sass-Scss
- Animated Left Menu Design with Sass-Scss
- Styling Boxes With Lighting Effect - Sass-Scss
- How to Play with Borders and Create Design Shapes with Sass-Scss
- Playing With Text and PNG Shadows and Animate them with Sass Scss
- 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
Proof of Work Done
https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Color_Image_Changes_on_Tabs