Random Elements with SASS / SCSS | Bokeh Lights Background Effect in CSS
Generate random number of elements at random distance by using SASS or SCSS. We are achieving it by using random function and for loop in sass / scss. If you use CSS, you will have to write a lot of CSS for nth-childs for it. In SASS, we can use functions and loops to save a lot of time to create amazing things. After you have random elements, you can create backgrounds with them. You can apply animations to these elements. Possibilities are endless. Let's create random circles at random distance in CSS by using SASS / SCSS. In HTML we created divs with class circle. We have our random function that will take min and max numbers as parameters and output random number.
I have a full tutorial on this random function in SASS / SCSS.
Generate Random Number from Min Max Range in SASS / SCSS | SASS Custom Random Function
• Generate Random Number from Min Max Range ...
We will need a number according to how many circles we want to create. But we will need random number of circles. Circle has width and height, left and right positions. But there are more circles. We are not styling each circle by using nth-child one by one. We will use for loop in SASS. nth-childs will be targeted in for loop. And for the loop, these left, right, width, height properties should receive dynamic values. We will use variables for properties values. And then in for loop, values will be assigned to these variables. For loop will throw values in these dynamic properties by using nth-child. In this loop, we are targeting circles from 1 to the number of circles we created. Then i variable will determine which nth-child it is. And then dynamic properties will receive values from here.
Now we have our random number of circles with random width, height and positions. Furthermore you can apply CSS opacity and CSS filters to circles for a bokeh lights background effect. You can also animate these background lights by using CSS animations. Possibilities are endless.
Hide CSS Code
• Hide & Protect CSS Code
Smooth Scroll with CSS Only
• Smooth Scroll to DIV on Different Page usi...
Lazy Load with Only CSS
• Lazy Load HTML Elements (Pure CSS) | Lazy ...
CSS Flex Gap / Easy Flexbox
• Easy Flexbox Column Spacing | Flex Gap CSS...
CSS Only Custom Radio Buttons and Checkboxes
• CSS Only Radio Button, Checkbox & Form Sty...
Make Videos Responsive
• How to Make YouTube Video Responsive in We...
CSS Flexbox game / Learn Flexbox Easily
• CSS Flexbox Game Play | Play Flexbox Frogg...
More CSS Tutorials:
• CSS
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: https://github.com/webstylepress
#webstylepress #sass #scss #css #webdevelopment #cssonly