半透明格中的文字陰影

我有這個測試按鈕（運行代碼片段對於mousedown行爲）。我希望文字在其父div之下也有一些影子（就好像它是一個不透明的位圖）。任何syggestion？半透明格中的文字陰影

$(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>

來源

2017-03-16 Alain Pannetier

你試過'文本shadow'？ –

你是對的。文字陰影做它。見下文。我期待着事情的發揮。也就是說：內部div影子也是由瀏覽器計算出來的（這當然不同於繼承陰影）。留言Merci。 –

感謝@GCyrillus我得到它的正常工作。解決方案在這裏記錄。

$(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>

來源

2017-03-17 09:03:54

半透明格中的文字陰影

回答

相關問題