Styling Boxes With Lighting Effect - Sass-Scss

---

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to create stylish button with lighting effect .
• You will learn how to create effects with defining before and after versions and using filter function.
• You will learn how to use checked function on buttons and create styles.
• You will learn how to use define inside shadows with box-shadow: inset.
• You will learn how to remove radio box with display: none also changing mouse with cursor: pointer.

Requirements

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

Resources

• https://css-tricks.com/snippets/css/css-box-shadow/
• https://www.cssmatic.com/box-shadow
• https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
• 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 create lighted boxes with different colors. When the box is selected it will take his effect. We will also create inside shadows to give more effect. 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 we have one division and 10 labels in it

---

2- We starting to center our object to out page and defining some styles here. With box shadow and border radius we make this object more stylish. Here we also code our text and we set here a border bottem with darkred color

---

3- Here we change our mouse cursor and also removing radio buttons. In span class we are sizing the text boxes and define some border with radius.

---

4- With :checked option we give our styles when it selected. With its before and after we define our lighting effect. without specifically color for each button.

---

5- Last step is defining colors for each button and also giving some inside shadow with using box-shadow: inset.

---

---

6- And finally our end work...

---

Video Tutorial

Curriculum

• 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
• Image zoom effect with Sass

Proof of Work Done

https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Lighting_the_buttons