Text Selection Style

Text Selection Style - CSS

Change the text selection style in CSS via ::selection pseudo-class. Try select text inside the cyan box bottom below to see the action.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS

article::selection {
    background: green;
    color: yellow;
}

Comments

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...

Distortion Glitch Text Effect - CSS

Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }

UIUX Component

Search This Blog