⇒ CSS

| 𝑼𝑿/𝑼𝑰 → Websites to get inspired, to consult and use

Vendor Prefixes - Do you need? Check! (-webkit-, …)

https://caniuse.com/

→ How to…

→ 🥇 Inicio de Projetos no CSS

→ Animation - Keyframe - Transition

→ Background Image Gradient

div {	
	...
	**background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0,0,0,1), url(osaka.png)**
}

→ Border Gradient

border: 4px solid;
border-image: linear-gradient(135deg,#FF0000 0%, #FF00A8 100%) 1;

.container{
	...
	z-index: 0;
  position: relative;
}

.container::after {
    content: '';
    position: absolute;
    inset: 0; // positioning
    border-radius: 16px;
    padding: 2px; // border size
    background: linear-gradient(to right, #02e95e, #0575e6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1; // or 999 (or higher) if the content is in a Modal
 }

→ Box Shadow - All Vendor Prefixes

-webkit-box-shadow: 0px 15px 45px -9px rgb(0 0 0 / 20%);
-moz-box-shadow: 0px 15px 45px -9px rgb(0 0 0 / 20%);
box-shadow: 0px 15px 45px -9px rgb(0 0 0 / 20%);

→ Box Shadow Tools | Aceternity

Box Shadows | Aceternity UI