Cada vez que construyo un nuevo sitio web de WordPress, conozco algunos trucos CSS y quiero compartir algunos. Al crear sitios web de WordPress, uso IThemes Builder. Todos los trucos y consejos de CSS que muestro aquí se pueden usar en las hojas de estilo proporcionadas en la carpeta temática y con todos los módulos de apariencia del constructor. Máscara de tipografía CSS Si está familiarizado con Adobe Photoshop o Illustrator, probablemente conozca una o dos sobre las máscaras de corte. Esta técnica CSS se trata de eso. Primero necesitará un poco de marcado HTML.

Earth

importante es la clase de “corte” aquí.
Si está utilizando iThemes Builder, puede insertarlo en un módulo HTML de diseños y vistas.

Ahora para CSS. Como dijimos antes, nos centramos en la clase alrededor del encabezado: “Corte”. Esto ingresará a la hoja de estilo apropiada de su tema. Necesitará una imagen para enmascarar el texto. En este caso, la mía es “la tierra” y soy original, así que pensé en ocultar esto con una imagen de la tierra. .lip {
Antecedentes: URL (… / img / Earth.jpg) Centro central sin repetición;
Dimensión de fondo: cubierta;
Tamaño de fondo: 18%;
Color: #fff;
Text-Align: Center;
2EM llenado;
-Webkit-text-chill-color: transparent;
-Webkit-background-clip: texto;
} Aquí usamos dos etiquetas de kit web para lograr el efecto deseado.
-Webkit-text-chill-color: transparent;
-Webkit-background-clip: texto; Estos crean el efecto del efecto de tipo enmascarado. El prefijo -webkit – se utiliza para propiedades CSS que aún no están implementadas oficialmente por las especificaciones W3C, ni todos los navegadores WebKit están disponibles. Algo para recordar: no hay necesidad de tener dos etiquetas de tamaño de fondo, pero quería mostrarle que tiene la opción de establecer el tamaño de “cobertura”. En este caso, quería dimensionar la imagen manualmente. Ambas opciones están bien. Y waalaa! La tipografía gráfica no puede obtener suficiente impresión? Te siento.

La tipografía parece crecer en popularidad en la comunidad de diseño web. Los diseñadores se centran más en el contenido y exploran formas de resaltarlo en los sitios web. Por esta razón, el tipo parece aparecer como un elemento gráfico además de la comunicación. Dicho esto, echemos un vistazo a cómo agregar una nota gráfica a un tipo en particular. Para empezar, tenemos nuestro HTML. Nuevamente, esto se puede colocar en un módulo HTML o incluso en un módulo de widget específico de texto.

gráfico

Suficientemente simple. Es hora de agregar algún interés.

CSS: .Container H2 {
Color: # 555;
Font-Family: “Oswald”, sans-serif;
Texto de decoración: ninguno;
Texto-transformación: uppercase;
Tamaño de fuente: 200px;
Peso para: 800;
Espaciado de letras: -3px;
Altura de la línea: 1;
Shadow de texto: #eded 3px 2px 0;
Posición: relativo;
}
Ahora agregue el pseudo-elemento :: después. Tenga en cuenta que la posición en H2 es relativa, esto es necesario para cuando posicionamos nuestro pseudo absoluto. También agregamos un pequeño texto de texto en nuestro encabezado, pero no es muy visible. .Container H2: After {Content: “Graph”;

Posición: Absoluto;
Izquierda: 10px;
arriba: 10 px;
Imagen de fondo: -WebKit-Gradient-Liniar (superior izquierda, transparente 0%,
transparente 25%, # 555 25%, # 555 50%, transparente 50%,
transparente 75%, # 555 75%);
Fondo de dimensión: 4px 4px;
-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;
IND ÍNDICE: -5;
Bloqueo de pantalla;
Shadow de texto: ninguno;
Text-Align: Center;
} Ahora tenemos eso. Un encabezado mucho más interesante.
La sombra del texto separa el encabezado de pseudo elemento y una vez más usamos el prefijo WebKit para algunas etiquetas CSS. Juega con diferentes fuentes y colores para ver qué tipo de encabezados puedes crear. Creando un triángulo con CSS Tal vez llego tarde a la fiesta y todos lo saben, pero si hay un alma pobre, desprovista de ideas, tengo que compartir. Muchas veces quiero usar una flecha (triángulo) por varias razones. En estos casos, siempre crearía un triángulo en el ilustrador y lo usaría como una imagen de fondo en mi CSS. Hay una mejor manera.
Tenemos un cuadrado.

Ancho: 200px; Altura: 200px; Border-izquierda: Sólido 20px #F00; Border-Right: Solid 20px #FF0; Border-Top: Solid 20px #0F0; Border-Bottom: Solid 20px #00F;
Observe que los bordes se encuentran en ángulo. Ahora establezca el ancho y la altura del cuadrado en cero.

Ancho: 0px; Altura: 0px; Antecedentes: transparente; Ahora tiene cuatro triángulos diferentes y todo lo que tiene que hacer es elegir la dirección que debe tener el triángulo y establecer los otros colores del borde a la transparencia. Border-Right: sólido 20px transparente; Border-top: sólido 20px transparente; Border-Bottom: Solid 20px #00F;

Auge. Triángulo. .triangle {

Ancho: 0;

Altura: 0;
Antecedentes: transparente;
Margine-izquierda: sólido 20px transparente;
Border-Right: sólido 20px transparente;
Borde: sólido 20px transparente;
Edificio inferior: Sólido 20px # 00F;
} Las fotos de las fotos de la ruptura “fuera de la caja” son un excelente complemento para cualquier sitio web. Al agregar un visual, se agrega una segunda capa de comunicación, dando un poco más al mensaje. La mayoría de las fotos son rectangulares. Analizaremos cómo usar Clip-Path para cambiar la forma de una foto. Convirtamos esta foto en un hexágono.
Observe que mi foto es cuadrada. Si usa los puntos de polígono proporcionados, querrá usar una foto cuadrada para no inclinar su hexágono. El código HTML:

ahora CSS:
.clip-svg {
Ancho: 0;
Altura: 0;
}
Soy G {
Ancho máximo: 100%;
Altura: Auto;}
.Polygon-Clip-Hexagon {
-WebKit-Clip-Path: polígono (50% 0%, 100% 25%, 100% 75%, 50% 100%,
0% 75%, 0% 25%);
Clip-Path: polígono (50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%,
0% 25%);
-Webkit-Clip-Path: URL (“# Polygon-Clip-Hexagon”);
Clip-Path: URL (“# Polygon-Clip-Hexagon”);
} La propiedad CSS Clip-Path le permite modelar las cosas de manera diferente cambiando diferentes valores. Hexagone, Octágono, Estrellas – Piensa fuera de la caja. Auge. Hexágono.
Es posible que se pregunte cómo encontrar diferentes valores para diferentes formas, y Clippy lo cubrió. Sin embargo, puede configurar todo manualmente si lo desea.
Para una explicación detallada de la ruta clip de trucos CSS de clip-ruta. Recordatorio: porque no puedes, no significa que no debería estar avergonzado al decir que CSS trae mucha alegría en mi vida. El descubrimiento de todo lo que puede hacer es mejor que el final del Juego de Tronos: Scratch esa temporada. No nos volvamos locos. Aun así, debe usar la discreción CSS más avanzada, como las animaciones. Es fácil dejarse usar y perder de vista lo que es importante: construir un sitio web elegante, centrado en el contenido actual y el contenido fácil de usar. Recuerda, solo porque puedes, no significa que debas. Si algunas animaciones CSS agregan solo un trastorno a un sitio y no hacen nada por el mensaje, no lo use. Actuar con precaución cuando se trata de detalles vs. velocidad. Le aseguro que la mayoría de los usuarios prefieren la velocidad en lugar de los “efectos especiales”.
Saylor Bullington
Saylor escribe publicaciones de blog y diseños / desarrolla varios proyectos para iThems.Saylor ama a Gardener y actualmente está en guerra con todas las ardillas (si alguien tiene consejos sobre cómo deshacerse de las ardillas, tiene todas sus oídos).Si no viaja y no pasa el tiempo en OKC, hay una gran posibilidad de estar en el suroeste de Oklahoma, trabajar manualmente, incluidos los techos o como le gusta decirle a su padre: “carácter de construcción”.