Cómo cambiar el formato de los precios (o cualquier otro) en tu tienda online sólo con CSS
Como ya habrás comprobado, este blog está integrado con la tienda online, de modo que puedes leer artículos y tutoriales además de echar un vistazo a los productos que vamos publicando en la tienda.
Ahora te voy a enseñar una divertida técnica que te ayudará a representar los precios de tu web de un modo diferente 😉
Fuentes de Google
En esta dirección: https://www.google.com/fonts podéis encontrar un montón de tipos de letra curiosos que se pueden utilizar directamente en tus páginas web mediante el uso de la hoja de estilos CSS con muy poco conocimiento de código.
Google se encarga de decirte cómo tienes que modificar la hoja de estilos para que el tipo de letra elegido pueda ser usado en cualquier punto del documento. En el caso de la práctica vamos a utilizar el tipo de letra:
Bangers
Aunque con una pequeña modificación para que quede aún más llamativo.
Llamada al tipo de Google
Tenemos varios modos de realizar la llamada a los tipos de letra de Google. Te voy a explicar dos de ellos, ya que el métido “javascript” es más complejo.
Método 1
El primer método consiste en agregar una línea en zona <head> de nuestra página web. Tal y como muestra el ejemplo de Google:
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
Lo que debería de quedar más o menos así:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bangers">
<style>
body {
font-family: 'Bangers', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
De ese modo, todas las etiquetas que contengan la familia “Bangers” se mostrarán con el tipo de letra de Google. En el ejemplo superior se define para <body>
Incluso podéis pedirle a Google que os envíe más de un tipo de letra con una sola línea, y luego usar las que queráis en vuestro texto. Para ello basta con poner los nombres de los tipos de letras separados por un “pipe” (|).
<pre>https//fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans</pre>
Método 2
Este es el que suelo usar yo, y consiste en importar la dirección dentro de la propia CSS, de tal modo que te evitas tener que añadir la anterior línea a cada cabecera de cada página web.
Por ejemplo:
@import url(http://fonts.googleapis.com/css?family=Bangers);
Al principio de la CSS, quedando algo parecido a esto:
@import "http://fonts.googleapis.com/css?family=Bangers";
/* Importamos la familia de fuentes de google */
h1 {
color: #2ea3f2 !important;
font-family: 'Bangers', cursive;
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
h2 {
font-family: 'Bangers', cursive;
color: #2ea3f2 !important;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
@media only screen and ( min-width:768px) and (max-width: 980px ) {
.et_pb_featured_table:nth-child(3), .et_pb_featured_table:nth-child(4) {
margin-top: 30px;
}
etc...
Ahora sólo tenemos que añadir la familia a cada etiqueta o selector CSS de nuestra hoja de estilos:
h1 {
font-family: 'Bangers', cursive;
}
En el ejemplo estamos modificando la etiqueta “h1” para que su tipo de letra sea el “Bangers” y, si no carga, que muestre uno “cursive”. Es conveniente siempre añadir un tipo alternativo estándar, de tal modo que cuando no se pueda cargar el de Google, la página web no dé error o muestre algo.
Y, ahora, a jugar
Hay una web muy interesante que os permitirá hacer algunos experimentos con CSS3: http://www.css3maker.com/ Nosotros la usamos habitualmente ya que nos ayuda a definir un estilo de una forma visual muy sencillita.
Jugando jugando, os propongo darle algo de forma a esa fuente “Bangers” que habíamos importado antes.
Aquí el tipo “Bangers” a tamaño 50px y en color rojo:
<div style="font-family: 'Bangers', cursive; font-size: 50px; color: red; padding: 20px;">1000€</div>
Y aún podemos hacer algún experimento más como, por ejemplo, inclinarlo un poco:
<div style="font-family: 'Bangers', cursive; font-size: 50px; color: red; -webkit-transform: rotate(349deg); -moz-transform: rotate(349deg); -o-transform: rotate(349deg); float: right; padding: 40px;">1000€</div>
O ponerle un borde haciendo una pequeña trampa con la propiedad “text-shadow” y colocarlo a la derecha :):
<div style="font-family: 'Bangers', cursive; font-size: 50px; color: red; -webkit-transform: rotate(349deg); -moz-transform: rotate(349deg); -o-transform: rotate(349deg); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; float: right; padding: 20px;">1000€</div>
Hay muchas más propiedades en CSS3 que podéis integrar y, de hecho, se pueden construir brutalidades como esta: http://cssdeck.com/labs/homer-simpson-rendered-in-css3