Image Masking with Background Properties Style

Image Masking with Background Properties Style - CSS

Create cool and powerful image masking via CSS. On background URL property, please make sure silhouette image in jpg for the mask as located in second URL in the property.

DEMO

CSS

section {
  width: 300px;
  height: 300px;
  background: 
  url("https://picsum.photos/id/10/1080/1080.jpg"),
  url("https://i.pinimg.com/originals/21/96/44/219644d4cb995ddd20f9b5516960e50b.jpg");
  background-blend-mode: screen;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

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 ; }

Input Range with CSS

Use ::in-range and ::out-of-range pseudo-classes to style input depending on input value. DEMO 1 to 10 are valid. HTML < label > 1 to 10 are valid .</ label > < input type = "number" value = "1" min = "1" max = "10" > CSS input : in - range { background - color: limegreen; } input :out - of - range { background - color: orange; }

UIUX Component

Search This Blog