Una característica excelente de SVG es que puede definir una forma (o un conjunto de formas) una vez y luego usarla varias veces en una página. Incluso puede aplicar diferentes rellenos y filtros y otras cosas a las diferentes versiones. Plantillas SVG, por así decirlo.
Veamos si podemos darle un buen uso creando algunas pestañas.
Aprendí que esto era posible a través del artículo de Oleg Solomka sobre Codrops. ¡Cosas inteligentes!
Funciona así:
- Defina la forma (podría ser un círculo, un rectángulo, un polígono o cualquiera de las formas, o un grupo de ellas envueltas en un
<g>). - Dale a esa forma una identificación.
- Oculta esa forma.
- Use la forma donde sea necesario con
<use>.
Eso se ve así en HTML:
<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="visually-hidden">
<circle id="template" cx="50" cy="50" r="50">
</svg>
<!-- USE TEMPLATE SEVERAL TIMES -->
<svg viewBox="0 0 100 100" class="circle circle-1">
<use xlink:href="https://css-tricks.com/svg-tabs-using-svg-shape-template/#template">
</svg>
<svg viewBox="0 0 100 100" class="circle circle-2">
<use xlink:href="https://css-tricks.com/svg-tabs-using-svg-shape-template/#template">
</svg>
<svg viewBox="0 0 100 100" class="circle circle-3">
<use xlink:href="https://css-tricks.com/svg-tabs-using-svg-shape-template/#template">
</svg>Luego puede hacer referencia a esos diferentes usos de la plantilla individualmente y hacer lo que quiera con ellos. Por ejemplo, use rellenos degradados SVG o filtros SVG o lo que sea.
Puede ocultar esa plantilla colocándola fuera de la página o display: none;En g. Probablemente evitaría intentar usarlo directamente solo para mantener una buena separación de preocupaciones.
Manifestación:
Vea las plantillas SVG básicas de Pen por Chris Coyier (@chriscoyier) en CodePen
Creación de pestañas
Acabo de recibir algunos documentos de un abogado y, por supuesto, todo está tabulado con ese diseño clásico de carpeta de archivos.
Ese tipo de forma se ha intentado antes con CSS. Las pestañas redondeadas se ocupan de la disminución de la forma hacia el resto de la carpeta. Las pestañas inclinadas se ocupan de los lados en ángulo. Pero ninguno de ellos es perfecto, sería difícil o imposible combinarlos y, si bien son inteligentes, son un poco “hackeados” con el uso de contenido generado y demás.
¿No sería más fácil simplemente dibujar la forma Dang como un vector y usarla? Absolutamente, ese es un territorio SVG perfecto. Y mejor, podemos usar una plantilla para definirla una vez y usarla una y otra vez. Eso nos permite cambiar el color y demás sin tener que solicitar un nuevo activo, además de verse nítido sin importar el tamaño en el que terminemos usándolo.
Puede dibujar fácilmente esa forma en cualquier herramienta de dibujo vectorial y obtener el código SVG para ello. Si necesita ayuda con eso, este artículo debería ser útil.
Estuve investigando sitios de fotografía de archivo para encontrar algunos, solo por diversión, y encontré algunos en Shutterstock que eran sobre lo que estaba tratando de hacer. Los descargué y saqué la forma de allí.
Resumido es básicamente esto:
<svg>
<path id="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
z">
</svg>el html
Dado que probablemente llamaríamos navegación por pestañas y navegación por listas, esto es lo que obtendríamos al final:
<nav role="navigation" class="main-navigation">
<ul>
<li class="tab-1 active">
<a href="https://css-tricks.com/svg-tabs-using-svg-shape-template/#home">
<span>Home</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<li class="tab-2">
<a href="#about">
<span>About</span>
<svg viewBox="0 0 122 40">
<use xlink:href="#tab-shape"></use>
</svg>
</a>
</li>
<!-- etc. as many tabs as you'd like -->
</ul>
</nav>necesitamos usar <svg> en el marcado allí porque así es como funciona. Lo envolvemos en un <a> porque teníamos la intención de que las pestañas fueran enlaces en los que se pudiera hacer clic/pulsar. Necesitamos el <span> porque pretendemos posicionar <svg> y el texto uno encima del otro, con el texto encima.
el css
Podemos usar uno de los elementos envolventes como contexto de posicionamiento. Posicionaremos absolutamente tanto el <span> y <svg> y dar el <span> una mayor z-index.
Presentado en SCSS aquí, ya que el anidamiento lo hace más agradable de leer:
.main-navigation {
overflow: hidden;
position: relative;
padding: 0 0 0 1rem; /* push tabs back to right */
ul {
list-style: none;
padding: 0;
}
li {
float: left;
width: 12rem;
height: 5rem;
margin: 0 0 0 -1rem; /* pull to left to overlap tabs */
position: relative;
&.active {
z-index: 6; /* active one on top */
}
}
a {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
svg {
width: 120%; /* tab shape should stick out past clickable box */
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
pointer-events: none; /* SVG eats clicks weird */
}
span {
position: relative;
padding: 1rem 0 0 3.3rem; /* position the text */
z-index: 2;
display: inline-block;
width: 100%;
height: 100%;
}
}Ahora, para cambiar la apariencia de cada pestaña, puede hacer referencia a ellas por nombre de clase y cambiar el fill. También los necesitamos al revés. z-index order de modo que el primero esté en la parte superior en lugar del último, lo cual es bastante fácil de hacer declarándolos explícitamente.
.tab-1 {
z-index: 4;
svg {
fill: red;
}
}
.tab-2 {
z-index: 3;
svg {
fill: orange;
}
}La demostración
Vea las pestañas Pen SVG de Chris Coyier (@chriscoyier) en CodePen
Hay algo de JavaScript para activar las diferentes pestañas, que en esencia es simplemente cambiar el nombre de una clase.
Puede notar que las pestañas también tienen ligeros gradientes. La conexión interesante aquí es que puedes declarar ese gradiente SVG en el mismo <svg> como la forma de la plantilla original, luego complete una forma con plantilla simplemente haciendo referencia al filtro por ID.
<linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
<stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
<stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
</linearGradient>.tab-1 {
svg {
fill: url(#tab-1-bg);
}
}Básicamente, también puede pensar en sus filtros como plantillas, reutilizándolos a voluntad. Juega un poco con la demostración también. Hay algunas partes comentadas que tratan principalmente con la sombra que te pueden gustar. Lo que sería realmente genial es hacerlos flexibles donde el tamaño de la pestaña cambia más grande y más pequeño a medida que hay espacio disponible (el texto también) y luego deshacerse de ellos por completo cuando es imparcialmente pequeño y cambiarlos por una solución de navegación móvil.