Domina las propiedades clip-path y mask para crear efectos visuales avanzados sin necesidad de software gráfico. Aprende técnicas profesionales para formas complejas, transiciones creativas y optimización de rendimiento.
Ejemplos de formas complejas creadas con clip-path CSS
Contenido del Artículo
Clip-path: Recortando Elementos
Define regiones visibles de un elemento:
Formas básicas
circle(), ellipse(), polygon(), inset()
Coordenadas
Valores porcentuales o absolutos
Transformaciones
Combinación con transform/transition
/* Triángulo */
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Círculo dinámico */
.circle {
clip-path: circle(40% at center);
transition: clip-path 0.5s ease;
}
.circle:hover {
clip-path: circle(75% at center);
}
/* Forma compleja */
.complex-shape {
clip-path: polygon(
0% 20%, /* Punto 1 */
40% 0%, /* Punto 2 */
100% 30%, /* Punto 3 */
80% 100%, /* Punto 4 */
20% 90% /* Punto 5 */
);
}
Máscaras CSS
Controla la visibilidad usando imágenes, gradientes o SVG:
/* Máscara con gradiente */
.gradient-mask {
mask-image: linear-gradient(to bottom, black, transparent 90%);
-webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
}
/* Máscara con imagen */
.image-mask {
mask-image: url('mask.png');
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* Máscara SVG */
.svg-mask {
mask-image: url('mask.svg#star');
mask-type: luminance; /* o alpha */
}mask-type: luminance usa brillo de la máscara, alpha usa el canal alfa
Animaciones y Efectos
Técnicas avanzadas para transiciones creativas:
@keyframes morph {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
50% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
100% {
clip-path: circle(50% at 50% 50%);
}
}
.element {
animation: morph 8s infinite alternate;
}
/* Transición entre máscaras */
.element {
mask-image: url('mask1.svg');
transition: mask-image 0.5s ease;
}
.element:hover {
mask-image: url('mask2.svg');
}
Optimización y Soporte
Mejores prácticas para rendimiento y compatibilidad:
SVG vs CSS
Usar SVG para formas complejas (mejor rendimiento)
Soporte
Clip-path: 95% navegadores, Mask: 90% (con prefijos)
Fallbacks
@supports para degradado elegante
Rendimiento
Evitar animaciones complejas en elementos grandes
/* Fallback para navegadores antiguos */
.element {
border-radius: 50%; /* Fallback para circle clip-path */
}
@supports (clip-path: circle(50%)) or (-webkit-clip-path: circle(50%)) {
.element {
border-radius: 0;
clip-path: circle(50%);
-webkit-clip-path: circle(50%);
}
}