CODEWITHSUNDEEP
htmlcssopacityshadow
Alain Pannetier
Alain Pannetier

Reputation: 9514

Text shadow in translucent div

I have this test button ( run code snippet for mousedown behaviour). I would like the text to also have some shadow 'beneath' its parent div (as if it were a bitmap with opacity). Any syggestion?

Come on, click me!

  $( document ).ready(function() {
      $('#button').on ( 'mousedown', function () {
          $(this).removeClass ('normal').addClass ( 'pressed' ) ;
      } );
      $('#button').on ( 'mouseup', function () {
          $(this).removeClass ('pressed').addClass ( 'normal' ) ;
      } );
  });
  html, body, .allofit {
    width:100%;
    height:100%;
    margin: 0;
}
  .allofit {
  display: flex;
}

.centered {
  margin:auto;
  text-align: center;
  border: 1px solid #444;
  border-radius: 10px;
  vertical-align: middle;
  display: flex;
}

.normal {
  width: 50%;
  height: 50%;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8));
  opacity: 80;
  padding: 0;
}

.pressed {
  width: calc(50% - 2px);
  height: calc(50% - 2px);
  padding:2px 0 0 2px;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8));
  opacity: 80;
}

.label {
  margin:auto;
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-size:30pt;
  font-weight:900;
}

.noselect {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="allofit">
        <div id="button" class="centered normal">
            <div class="label noselect">Click Me</div>
        </div>
    </div>

Upvotes: 0

Views: 203

Answers (1)

Alain Pannetier
Alain Pannetier

Reputation: 9514

Thanks to @GCyrillus I got it to work as expected. Solution follows here for the record.

  $( document ).ready(function() {
      $('#button').on ( 'mousedown', function () {
          $(this).removeClass ('normal').addClass ( 'pressed' ) ;
          $('#label').removeClass ('normalText').addClass( 'pressedText' );
      } );
      $('#button').on ( 'mouseup', function () {
          $(this).removeClass ('pressed').addClass ( 'normal' ) ;
          $('#label').removeClass ('pressedText').addClass( 'normalText' );
      } );
  });  
  html, body, .allofit {
    width:100%;
    height:100%;
    margin: 0;
}
  .allofit {
  display: flex;
}

.centered {
  margin:auto;
  text-align: center;
  border: 1px solid #4a4;
  border-radius: 10px;
  vertical-align: middle;
  display: flex;
}

.normal {
  width: 50%;
  height: 50%;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8));
  opacity: 80;
  padding: 0;
}

.normalText {
  text-shadow: 12px 12px 6px #8a8;
}

.pressed {
  width: calc(50% - 2px);
  height: calc(50% - 2px);
  padding:2px 0 0 2px;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8));
  opacity: 80;
}

.pressedText {
  text-shadow: 6px 6px 3px #686;
}

.label {
  margin:auto;
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-size:30pt;
  font-weight:900;
}

.noselect {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="allofit">
        <div id="button" class="centered normal">
            <div id="label" class="label noselect normalText">Click Me</div>
        </div>
    </div>

Upvotes: 1

Related Questions