35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<style>
|
|
span::selection { color: purple; }
|
|
div.roundedRect {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 50px;
|
|
-webkit-border-radius: 25px;
|
|
-webkit-box-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
|
|
, hsla(60, 100%, 50%, 1) -8px 14px 2px
|
|
, hsla(100, 100%, 50%, 1) -21px -12px 5px;
|
|
}
|
|
</style>
|
|
<div style="
|
|
font-family: Lucida Grande;
|
|
font-weight: bold;
|
|
font-size: 48px;
|
|
margin: 20px;
|
|
text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
|
|
, hsla(60, 100%, 50%, 1) -8px 14px 2px
|
|
, hsla(100, 100%, 50%, 1) -21px -12px 5px;
|
|
">
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
|
|
<span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
|
|
<span style="color: rgba(0, 0, 0, 0.3);">casts</span>
|
|
<span id="selectMe">multiple</span>
|
|
shadows
|
|
</div>
|
|
<script>
|
|
var text = document.getElementById("selectMe").firstChild;
|
|
getSelection().setBaseAndExtent(text, 0, text, 6);
|
|
</script>
|
|
<div class="roundedRect"></div>
|
|
<div class="roundedRect" style="background-color: white;"></div>
|
|
<div class="roundedRect" style="background-color: rgba(0, 0, 0, 0.2);"></div>
|