CSS box-shadow Editor
ฝัง
- เผยแพร่เมื่อ 20 เม.ย. 2020
- Learn how to create a CSS Box Shadow Editor with HTML, CSS and JavaScript!
The CSS box-shadow property is great for adding depth and special styling to our website's design. However, styling box-shadows using just code can get quite tedious and inefficient.
This box-shadow editor allows us to quickly tweak the various box-shadow property values (horizontal offset, vertical offset, blur radius, spread radius, color, inset) and watch the live preview, until we reach the desired effect.
At the same time, the corresponding CSS code for the box-shadow is generated and using the "Copy" button we can easily Copy the generated CSS to Clipboard in order paste it into our project. For this purpose, the Clipboard API will be used.
We can also change the box and background colors, in case for example, we want to match the colors of our specific project.
I hope you will get some value out of this video and maybe even get inspired to go ahead and create your own amazing editors and share with the world!
Enjoy 🙂
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Data Visualization with Chart.js: • Data Visualization wit...
Coding Memes: • Coding Memes
Modal with HTML, CSS and JavaScript: • Modal with HTML, CSS a...
Colorful Background with linear-gradient: • Colorful Background wi...
Slide-In Overlay Hover Effect (HTML & CSS): • Slide-In Overlay Hover...
Zebra-Striped List (HTML & CSS): • Zebra-Striped List (HT...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
This channel is extremely underrated. We need to lift this up! Let's Share Awayy!
Great Job Mate ❤
Thanks for the lovely comment man 🙂 Much appreciated 🙏💙🙂
No need to ask for LIKE and SUBSCRIPTION. Every JavaScript lovers know your content value.
You got *10/10* 👍👌
Heheh! Huge love to all JavaScript lovers out there 💙💙🙂 Thank you for the lovely comment!!
This is GOLD!! Thanks man 💖
Oh thank you! Very glad you liked it 💙
Absolutely superb!! 💯👍🙏
Thank you 🙌
Top level content from a top level channel!! 👏
Ooooh thank you for this top level comment 😉😁 Huge love 💙🙂
great content and very good explanation as always 👌👌
Ooooh thank you for the lovely comment 🙏🙂
Respected sir please make more videos as like this types of things.
Please 👍👍👍👍👍
Hey, very glad you liked this!! I'll try 😉 All the best, keep coding!! 💙
Amazing video!
Thank you, amazing Friend!! 😉🙂
Very cool, thanks man!!!!
No problem! Very glad you liked it 🙂💙
💯🙏💖
Wow. Great project idea. Well done
🙂 Thanks man! Some basic experimentation in Coding Journey's lab 😁 Very glad to see your amazing channel growing! Keep up the great work!! 💙
@@CodingJourney Looking forward when our labs work on experiments together one day :)
Heheh! That would be crazy...in an amazing way 😉😁💙
LOVE THE TITLE!
Ahahahahah!! Totally agree...by far my favorite title 😉💙😁
Absolutely amazing tutorial mate! 👏🙏
Thank you mate 🙌🙂 Very glad you liked it!! 🙂
Perfectly balanced! As all things should be 😉
Heheh! Love the comment...perfectly balanced, as all things should be 😁 One of my favorite Thanos' lines 😉💙
wow..very helpful.thank you
Amazing! Very glad you liked it 🙂💙
Flawless! Well done Sir 👍
Very glad you liked it Sir 😉🙂
Brav
nice animation, man. you are inspirit me for my channel
Amazing! Very glad to hear that 💙🙂
@@CodingJourney you're welcome, man. you too!