β‡’ 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 Tools | Aceternity

Box Shadows | Aceternity UI

β†’ Button BG Slide Animation onHover

keyframe backgroundGradient {
 0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}