22 contoh CSS batas dan bayang-bayang-kotak.. (border, box-shadow)

CONTOH 1
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.25) 0px 0px 2px 2px;">CONTOH 1</div>


CONTOH 2
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;">CONTOH 2</div>


CONTOH 3
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 20px 10px;">CONTOH 3</div>


CONTOH 4
HTML view
<div style="text-align: center; border: 1px solid rgba(0, 0, 0, 0.2); padding: 12px; box-shadow: rgba(0, 0, 0, 0.35) 0px -40px 36px -28px inset;">CONTOH 4</div>


CONTOH 5
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.17) 0px -20px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -30px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -50px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;">CONTOH 5</div>


CONTOH 6
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px 4px;">CONTOH 6</div>


CONTOH 7
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 5px 10px;">CONTOH 7</div>


CONTOH 8
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;">CONTOH 8</div>


CONTOH 9
HTML view
<div style="text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); padding: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;">CONTOH 9</div>


CONTOH 10
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;">CONTOH 10</div>


CONTOH 11
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;">CONTOH 11</div>


CONTOH 12
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;">CONTOH 12</div>


CONTOH 13
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgb(85, 91, 255) 0px 0px 0px 2px, rgb(31, 193, 27) 0px 0px 0px 4px, rgb(255, 217, 19) 0px 0px 0px 6px, rgb(255, 156, 85) 0px 0px 0px 8px, rgb(255, 85, 85) 0px 0px 0px 10px;">CONTOH 13</div>


CONTOH 14
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 2px;">CONTOH 14</div>


CONTOH 15
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;">CONTOH 15</div>


CONTOH 16
HTML view
<div style="text-align: center; border: 1px solid rgba(201, 122, 117, 0.3); padding: 12px; box-shadow: rgba(201, 122, 117, 0.4) 4px 4px, rgba(201, 122, 117, 0.3) 8px 8px, rgba(201, 122, 117, 0.2) 12px 12px, rgba(201, 122, 117, 0.1) 16px 16px, rgba(201, 122, 117, 0.05) 20px 20px;">CONTOH 16</div>


CONTOH 17
HTML view
<div style="text-align: center; border: 1px solid rgba(201, 122, 117, 0.3); padding: 12px; box-shadow: rgba(201, 122, 117, 0.4) -4px 4px, rgba(201, 122, 117, 0.3) -8px 8px, rgba(201, 122, 117, 0.2) -12px 12px, rgba(201, 122, 117, 0.1) -16px 16px, rgba(201, 122, 117, 0.05) -20px 20px;">CONTOH 17</div>


CONTOH 18
HTML view
<div style="text-align: center; border: 1px solid rgba(201, 122, 117, 0.3); padding: 12px; box-shadow: rgba(201, 122, 117, 0.4) 0px 4px, rgba(201, 122, 117, 0.3) 0px 8px, rgba(201, 122, 117, 0.2) 0px 12px, rgba(201, 122, 117, 0.1) 0px 16px, rgba(201, 122, 117, 0.05) 0px 20px;">CONTOH 18</div>


CONTOH 19
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;">CONTOH 19</div>


CONTOH 20
HTML view
<div style="text-align: center; border: 1px solid rgba(38, 57, 77, 0.5); padding: 12px; box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;">CONTOH 20</div>


CONTOH 21
HTML view
<div style="text-align: center; padding: 12px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;">CONTOH 21</div>


CONTOH 22
HTML view
<div style="text-align: center; border: 1px solid rgba(201, 122, 117, 0.1); padding: 12px; box-shadow: rgba(201, 122, 117, 0.3) 0px 15px 30px -12px inset, rgba(0, 0, 0, 0.35) 0px 18px 36px -18px inset;">CONTOH 22</div>

Ulasan