Isolating CSS Box Shadows

Developer
DJ Sumanik
Size
3,443 Kb
Views
12,144
  1. Isolating CSS Box Shadows Previews
  2. Isolating CSS Box Shadows HTML Codes
  3. Isolating CSS Box Shadows CSS Codes

How do I make an isolating css box shadows?

How to make CSS box shadows appear on one or multiple sides by isolating and combing multiple shadows with ease.. What is a isolating css box shadows? How do you make a isolating css box shadows? This script and codes were developed by DJ Sumanik on 11 November 2022, Friday.

Isolating CSS Box Shadows Previews
IQ Test

Isolating CSS Box Shadows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Isolating CSS Box Shadows</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container lead'> <h1>Isolating Box Shadows</h1> <h2>A Simple & Often Misunderstood CSS Fundamental</h2> <p>To isolate a single shadow we apply a negative spread and offset in the desired direction, then add a blur radius of equal distance to compensate. For inset shadows, the spread remains constant but we apply an offset in the opposite (-ve) direction. For multiple sides/shadows, simply combine any of the desired single-side rules into a comma separated list.</p>
</div>
<div class='container'> <div class="box top"></div> <div class="box right"></div> <div class="box bottom"></div> <div class="box left"></div> <div class="box all"></div>
</div>
<div class='container'> <div class="box inset-top"></div> <div class="box inset-right"></div> <div class="box inset-bottom"></div> <div class="box inset-left"></div> <div class="box inset-all"></div>
</div>
<div class='container'> <div class="box top-bottom"></div> <div class="box left-right"></div> <div class="box inset-top-bottom"></div> <div class="box inset-left-right"></div>
</div>
</body>
</html>

Isolating CSS Box Shadows - Script Codes CSS Codes

/* CSS Spec: | style | offset-x | offset-y | blur-radius | spread-radius | color */
@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
.top { box-shadow: 0 -15px 15px -15px #2C3E50;
}
.right { box-shadow: 15px 0 15px -15px #2C3E50;
}
.bottom { box-shadow: 0 15px 15px -15px #2C3E50;
}
.left { box-shadow: -15px 0 15px -15px #2C3E50;
}
.all { box-shadow: 0 0 15px #2C3E50;
}
.inset-top { box-shadow: inset 0 15px 15px -15px #2C3E50;
}
.inset-right { box-shadow: inset -15px 0 15px -15px #2C3E50;
}
.inset-bottom { box-shadow: inset 0 -15px 15px -15px #2C3E50;
}
.inset-left { box-shadow: inset 15px 0 15px -15px #2C3E50;
}
.inset-all { box-shadow: inset 0 0 15px #2C3E50;
}
.left-right { box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
}
.top-bottom { box-shadow: 0 -15px 15px -15px #2C3E50, 0 15px 15px -15px #2C3E50;
}
.inset-left-right { box-shadow: inset 15px 0 15px -15px #2C3E50, inset -15px 0 15px -15px #2C3E50;
}
.inset-top-bottom { box-shadow: inset 0 15px 15px -15px #2C3E50, inset 0 -15px 15px -15px #2C3E50;
}
body { background-color: #1ABC9C; color: #fff; letter-spacing: 1px; font: 1em 'Slabo 27px', serif;
}
body h1 { margin: 20px; font-size: 3.5em; letter-spacing: 5px; color: #006666; text-align: center; font-weight: bold;
}
body h2 { margin: 20px; font-size: 1.5em; color: #006666; text-align: center;
}
body p { margin: 20px; font-size: 1.1em;
}
body .container { text-align: center; clear: both; margin: auto; max-width: 960px;
}
body .container.lead { max-width: 710px; text-align: justify;
}
body .box { display: inline-block; height: 120px; width: 160px; margin: 30px 10px; position: relative; background: #16A085;
}
body .box:after { color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 120px; color: #eee; content: attr(class) " ";
}
Isolating CSS Box Shadows - Script Codes
Isolating CSS Box Shadows - Script Codes
Home Page Home
Developer DJ Sumanik
Username TundraTech
Uploaded November 11, 2022
Rating 4.5
Size 3,443 Kb
Views 12,144
Do you need developer help for Isolating CSS Box Shadows?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

DJ Sumanik (TundraTech) Script Codes
Name
A Pen by DJ Sumanik
Expanding Fixed Width Content
True Yukon Aurora
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!