HTML AND CSS, YouTube

How To Create Different CSS Box Shadow Effects

How-To-Create-Different-CSS-Box-Shadow-Effects

Coding BD given How To Create Different CSS Box Shadow Effects. You can Build a css box shadow. It is the most important part Of css box shadow effects. Here we use html and css, We have given more importance to Learn How To Create Different CSS Box Shadow Effects. You can Learn css neumorphism shadow. They were an important part of CSS Box-Shadow tutorial basics,  because they needed to be Html5 Css3 Tips and Tricks. I hope You enjoy this video. If you enjoy our video please like, share & subscribe to our channel. Thank you so much.

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️ css image hover animation effects | pure css hover animation: https://www.youtube.com/watch?v=AUQQ5WBXtPw 

➡️ how to create css gradient box shadow: https://www.youtube.com/watch?v=8oaLBBhLNi0 

➡️ Sticky Navigation Bar On Scroll Using Vanilla Javascript: https://www.youtube.com/watch?v=XQJSc–XgO8 

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s  

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s 

➡️ Responsive Services Section:  https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s 

➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0 

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s 

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ&t=0s 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript:  https://www.youtube.com/watch?v=6A6HpxMmfX4&t=0s 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s  

Here is all Source code ( Social media icon with popup ). You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. See Full video and write HTML code and copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow | you can use this shadow on your website</title>
    <!--* collect source code on our website codingbd.com -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box">
        <div class="inner-box"></div>
    </div>
</body>

</html>

:root {
  --shadow-color: 286deg 36% 58%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px
      hsl(var(--shadow-color, 0deg 0% 0%) / 0.32),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color, 0deg 0% 0%) / 0.32),
    1px 1.9px 2.4px -2.5px hsl(var(--shadow-color, 0deg 0% 0%) / 0.32);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px
      hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
    2px 4px 5px -1.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
    4.8px 9.7px 12.2px -2.5px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33);
  --shadow-elevation-high: 0.3px 0.5px 0.7px
      hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    1.4px 2.7px 3.4px -0.4px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    2.5px 5.1px 6.4px -0.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    4.2px 8.3px 10.5px -1.1px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    6.7px 13.3px 16.8px -1.4px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    10.4px 20.8px 26.2px -1.8px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    15.8px 31.6px 39.7px -2.1px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
    23.3px 46.5px 58.5px -2.5px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31);
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #f1cffc;
  display: grid;
  place-items: center;
}

.box {
  padding: 64px;
  background: hsl(0deg 0% 95%);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-elevation-low);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.inner-box {
  width: 150px;
  height: 100px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-elevation-medium);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/c/CodingBD

Facebook Page: https://www.facebook.com/codingbd816

LinkedIn: https://www.linkedin.com/in/sajjat8383

GitHub: https://github.com/cgsaleh8383

You can see css image hover overlay effects

Leave a Reply

Your email address will not be published. Required fields are marked *