Flip horizontally / vertically
span { display: inline-block;}.flip_H { transform: scale(-1, 1);}.flip_V { transform: scale(1, -1);}
<span class="flip_H"> Demo text ✂</span><span class="flip_V"> Demo text ✂</span>
Image with opacity
<div class="block-image-container"> <div class="block-image"> <div class="block-image-src"> <img src="/images/css-tips/thymara.jpg" /> <div class="block-image-text"> It's too hot to work. </div> </div> </div></div>
.block-image-container .block-image { position: relative; width: 100%;}.block-image-container .block-image-src { z-index: -1;}.block-image-src img { height: 16rem; width: 100%; object-fit: cover; object-position: center;}.block-image-src::after { content: ''; position: absolute; top: 0; bottom: 0.2rem; left: 0; right: 0; width: 100%; max-width: 100%; background: rgba(black, 0.5);}.block-image-container .block-image-text { z-index: 10; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; font-style: italic; font-size: 2rem;}
Word wraping
.hyphenate { text-align: justify !important; -webkit-hyphens: auto !important; -moz-hyphens: auto !important; -ms-hyphens: auto !important; hyphens: auto !important;}
For better display
<div class="hyphenate" lang="en">...</div>
Import font
@font-face { font-family: "Morpheus"; src: url("~assets/fonts/morpheus.ttf");}.font-morpheus { font-family: 'Morpheus';}
Hyphens
Scrollbar
.scrollbar { scrollbar-color: rgb(91, 98, 111) transparent; scrollbar-width: thin;}