A cross-browser collection of CSS box-shadows

gravatar
CSS 2/3, Box-shadows.css
Snippet by Anon
1028 0
HTML
<div class="flex numbers">
		<div class="alert text-center uppercase pl-sg">
		  <h3>Complete</h3>
		</div>
                <div class="block bShadow-1"></div>
                <div class="block bShadow-2"></div>
                <div class="block bShadow-3"></div>
                <div class="block bShadow-4"></div>
                <div class="block bShadow-5"></div>
                <div class="block bShadow-6"></div>
                <div class="block bShadow-7"></div>
                <div class="block bShadow-8"></div>
                <div class="block bShadow-9"></div>
                <div class="block bShadow-10"></div>
                <div class="block bShadow-11"></div>
                <div class="block bShadow-12"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Upper shadow</h3>
		</div>
                <div class="block bShadow-13"></div>
                <div class="block bShadow-14"></div>
                <div class="block bShadow-15"></div>
                <div class="block bShadow-16"></div>
                <div class="block bShadow-17"></div>
                <div class="block bShadow-18"></div>
                <div class="block bShadow-19"></div>
                <div class="block bShadow-20"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Angle</h3>
		</div>
                <div class="block bShadow-21"></div>
                <div class="block bShadow-22"></div>
                <div class="block bShadow-23"></div>
                <div class="block bShadow-24"></div>
                <div class="block bShadow-25"></div>
                <div class="block bShadow-26"></div>
                <div class="block bShadow-27"></div>
                <div class="block bShadow-28"></div>
                <div class="block bShadow-29"></div>
                <div class="block bShadow-30"></div>
                <div class="block bShadow-31"></div>
                <div class="block bShadow-32"></div>
                <div class="block bShadow-33"></div>
                <div class="block bShadow-34"></div>
                <div class="block bShadow-35"></div>
                <div class="block bShadow-36"></div>
                <div class="block bShadow-37"></div>
                <div class="block bShadow-38"></div>
                <div class="block bShadow-39"></div>
                <div class="block bShadow-40"></div>
                <div class="block bShadow-41"></div>
                <div class="block bShadow-42"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Down</h3>
		</div>
                <div class="block bShadow-43"></div>
                <div class="block bShadow-44"></div>
                <div class="block bShadow-45"></div>
                <div class="block bShadow-46"></div>
                <div class="block bShadow-47"></div>
                <div class="block bShadow-48"></div>
                <div class="block bShadow-49"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Blur collection</h3>
		</div>
                <div class="block bShadow-50"></div>
                <div class="block bShadow-51"></div>
                <div class="block bShadow-52"></div>
                <div class="block bShadow-53"></div>
                <div class="block bShadow-54"></div>
                <div class="block bShadow-55"></div>
                <div class="block bShadow-56"></div>
                <div class="block bShadow-57"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>Side shadows</h3>
		</div>
                <div class="block bShadow-58"></div>
                <div class="block bShadow-59"></div>
                <div class="block bShadow-60"></div>
                <div class="block bShadow-61"></div>
                <div class="block bShadow-62"></div>
                <div class="alert text-center uppercase pl-sg">
		  <h3>UpDown shadow</h3>
		</div>
                <div class="block bShadow-63"></div>
                <div class="block bShadow-64"></div>		
                </div>
CSS
:root { --primary-color: rgb(81, 204, 226); } .blocks, .flex { position: relative; display: block; padding: 0; margin: 0 auto; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; counter-reset: figures; } .block { position: relative; background-color: white; color: rgb(81, 204, 226); width: 200px; height: 200px; line-height: 200px; color: var(--primary-color); font-weight: bold; font-size: 1.25rem; text-align: center; margin: 40px 30px; } .flex .block { counter-increment: figures; } .flex .block:before { content: 'bShadow-' counter(figures); } .pl-sg { color: #959da5; } .alert { display: block; width: 100%; position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid #ddd; border-radius: .25rem; }
{ } JS

            
Preview