Archivo de la etiqueta: css

Centrar un div horzontalmente

Hace tiempo os explicamos como posicionar un div tanto horizontal como verticalmente en una página. Este proceso se complicaba, ya que requiere realizar ciertos cálculos para el posicionamiento, y el código resultante ocupa varias líneas.

En el caso de querer centrar un div solo horizontalmente, este proceso se ve reducido considerablemente, llegando a ocupar únicamente 2 lineas de código CSS:

div.centrado{
width: N px,
margin: 0 auto;
}

Bastará con sustituir N por el tamaño en pixels del div y a continuación indicarle un margen auto. Así posicionaremos el div centrado respecto a la horizontal. La altura, la podremos variar cambiando el 0 por el valor que consideremos oportuno.

Fácil, ¿no?

Facebooktwittergoogle_plus

La velocidad de carga nos ayuda a posicionar mejor nuestra web

En numerosas ocasiones hemos comentado la importancia de las etiquetas para mejorar el posicionamiento de nuestra página, pero otro de los factores que nos influirá, y que muchos desconocen, es la velocidad de carga de la propia página.

Una página optimizada y que cargue rápido, posicionará mejor. Por tanto debemos tener en cuenta el código de la web y también muy importante el alojamiento.

Si estamos desarrollando un sitio web, podemos evaluar la velocidad de carga accediendo a sitios como media4x.com en el cual existe una herramienta de diagnostico llamada site optimizer

Indicando la URL de nuestra web, la aplicación realizará un análisis, mostrando en verde los aspectos correctos, y en rojo los que necesitarían mejorar, que por lo general indicarán optimización del código HTML y CSS, o bien, reducción del tamaño de las imágenes.

En cuanto al aspecto del Hosting, debemos de tener en cuenta que en ocasiones (no siempre), un precio muy económico nos puede repercutir en una pérdida de la calidad del servicio, por lo debemos buscar una relación calidad-precio acorde a nuestras necesidades.

Facebooktwittergoogle_plus

Utilizar fuentes de texto de Google Web Fonts

Si en alguna ocasión has visto un sitio web con unas fuentes de texto muy diferentes a lo que estamos acostumbrados a ver, puede ser que dicho sitio esté utilizando el servicio de Google Web Fonts. gracias a un sencillo código generado por ésta web, podremos utilizar gran cantidad de fuentes de texto, desde las mas modernas hasta las mas clásicas e incluso las manuscritas.

Vamos a ver los pasos necesarios para que nuestra web sea capaz de utilizar una de las muchas fuentes disponibles en Google Web Fonts.

Lo primero será seleccionar la fuente que vamos a utilizar. En el lateral derecho podemos filtrar por el tipo de fuente que queremos (Serif, Sans Serif, Display o Handwritting).

En la parte superior tenemos varias pestañas en las cuales podremos visualizar una palabra, una frase o un párrafo completo de cada tipografía. Además, podemos definir el texto que queremos visualizar y su tamaño en la casilla Preview Text. Deberemos pulsar sobre el botón Add to Collection en cada una de las fuentes que nos guste.

google-web-fonts

Pulsando sobre el botón Review situado en la zona inferior, podremos comparar todas las fuentes que tengamos seleccionadas y así facilitar la decisión de elegir una de ellas. Una vez hayamos tomado una decisión, deberemos desmarcar las fuentes que no queramos, con la opción Use this style

Ahora, pulsaremos sobre el botón Use de la zona inferior. Nos aparece una nueva página en la que podremos seleccionar y deseleccionar de nuevo las fuentes que deseamos utilizar. Esta sección se denomina 1. Choose the styles you want También nos aparece un contador de la velocidad de carga, pues hay que tener en cuenta que cuantas mas fuentes agreguemos, mas tiempo necesitará la pagina para cargarse.

Continuaremos bajando hasta la sección 3. Add this code to your website en donde nos aparece el código que debemos agregar a nuestra web. Tenemos tres métodos distintos para la inserción:

Standard: Que agregaremos en el <head> de nuestra web como si de otra hoja de estilos se tratase:

<link href='http://fonts.googleapis.com/css?family=Inder' rel='stylesheet' type='text/css'>

Import: Haciendo el import directamente en la hoja de estilos CSS

@import url(http://fonts.googleapis.com/css?family=Inder);

JavaScript: Insertando código Javascript directamente entre las etiquetas <head> de nuestra web

<script type="text/javascript">
   WebFontConfig = {
     google: { families: [ 'Inder::latin' ] }
   };
   (function() {
     var wf = document.createElement('script');
     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
     wf.type = 'text/javascript';
     wf.async = 'true';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(wf, s);
   })(); </script>

Como puedes observar en cada uno de los códigos anteriores, siempre aparece el nombre de la fuente seleccionada, que en nuestro caso es Inder.

Para utilizar la nueva fuente de texto, tan solo nos quedará agregarla en nuestra hoja de estilos, por ejemplo:

body {
  font-family: 'Inder', serif;
  font-size: 46px;
}
Facebooktwittergoogle_plus

Que es un Reset CSS

Los navegadores web incluyen por defecto una hoja de estilos CSS predeterminada, de manera que si no indicamos ninguna propiedad, ellos tomarán la que tienen por defecto. Esto que a prior es una ventaja, puede convertirse en un tremendo inconveniente, ya que al no unificar estilos la misma pagina web puede mostrarse diferente en los distintos navegadores.

Por ello muchos diseñadores web han utilizado tecnicas para enmascarar las etiquetas CSS de los navegadores, lo que se conoce como Reset CSS. Sigue leyendo

Facebooktwittergoogle_plus

Centrar un div horizontal y verticalmente

Centrar un div horizontalmente es relativamente sencillo, pero para hacerlo verticalmente, la cosa se complica. Debemos realizar unos cálculos previos que nos permitan el centrado del div.

Partiremos de un div de 200px de ancho y 150px de alto si escribimos el código html, obtendremos lo siguiente:

A continuación, posicionaremos de forma absoluta el div, asignando un valor del 50% tanto en la propiedad top como en la left. Así la esquina superior izquierda quedará posicionada en el centro de la ventana del navegador.

Finalmente deberemos desplazar con las propiedades marging-top y marging-left la mitad de pixels del tamaño total del div, para que el centro del div coincida con el centro de la página

Finalmente el div quedará posicionado en el centro de la página.

El código final necesario es el siguiente:

<html>
<head>
<title>Div Centrado Vertical y Horizontalmente</title>
<style type="text/css">
div {
	background-color: #ccc;
	position: absolute;
	height: 150px;
	width: 200px;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -150px;
}
</style>
</head><body>
<div>Ejemplo centrado div - todohosting.es</div>
</body>
</html>
Facebooktwittergoogle_plus

Nuevas etiquetas estructurales en HTML5

El diseño de las páginas web ha evolucionado mucho desde sus inicios. Si bien es cierto que hace unos años, las tablas copaban gran parte del protagonismo, hoy su uso es mas bien limitado, dejando paso a otro tipo de etiquetas que permiten un alto de personalización y sobre todo, de posteriores modificaciones, ya que con una simple edición del fichero CSS, cambiaremos el aspecto de todas las páginas. Sigue leyendo

Facebooktwittergoogle_plus

Añadir sombras a los textos mediante CSS

Las nuevas especificaciones de CSS3 nos permiten crear espectaculares efectos con unas pocas líneas de código.

Éste es el caso de la propiedad text-shadow, la cual nos permitirá crear desde un simple sombreado a un efecto de luz de neón.

Valores que admite la propiedad text-shadow:

Los valores de entrada que admite text-shadow son cuatro:

text-shadow: h-shadow v-shadow blur color;

  • h-shadow: Desplazamiento en el eje X (Horizontal)
  • v-shadow: Desplazamiento en el eje Y (Vertical)
  • blur: Valor del difuminado
  • color: Valor del color de la sombra

Crear una sombra sencilla

Para añadir el efecto de sombreado a una etiqueta h1, añadiremos esta línea:

h1 {
text-shadow:2px 2px #555;
}

Crear una sombra con efecto de difuminado

Al ejemplo anterior, habria que añadirle un valor para blur, resultando:

body{
background-color: #666;
}
h1 {
text-shadow:3px 2px 3px #111;
color: #999;
}

Crear el efecto de luz de neón

Podemos varias capas difuminando la sombra y variando el color. Con ello obtendremos un efecto tan interesante como el que os mostramos a continuación:

body{
background-color: #000;
}

h1 {
text-shadow: 0 0 1px #fff,
             0 0 2px #fff,
             0 0 3px #fff,
             0 0 4px #ff00de,
             0 0 7px #ff00de,
             0 0 8px #ff00de,
             0 0 20px #ff00de,
             0 0 30px #ff00de;
}

Facebooktwittergoogle_plus

Comprobar si las etiquetas son compatibles con cierto navegador

Como saber si el código que hemos creado para nuestra web es compatible con cierto navegador. Desde la web caniuse.com nos permiten comprobar para cada etiqueta, ya sea HTML5, CSS3, JS o SVG, en que navegadores está soportada e incluso en que versión de éstos.

La web muestra un listado de las etiquetas y pulsando sobre cada una de ellas, veremos una amplia tabla de navegadores con sus respectivas versiones. También se nos muestra un porcentaje de soporte, tanto parcial como total.

Sin duda una web a tener en cuenta para comprobar las etiquetas antes de aplicarlas a nuestra web.

Facebooktwittergoogle_plus

Bordes redondeados en CSS

Seguimos viendo las características que incorpora CSS3 y en esta ocasión os vamos a explicar cómo realizar bordes redondeados.

Ahora en CSS3 existe la propiedad border-radius que nos permite redondear las esquinas de los elementos, indicando el radio que deberá tener dicha curvatura.

Si por ejemplo escribimos como estilo de un DIV lo siguiente:

DIV {
border: 1px solid #000000;
border-radius: 15px;
padding: 20px;
}

Obtendremos como resultado un DIV como el que se muestra a continuación:

Conseguimos que todos los bordes sean iguales, pero si queremos que cada uno de los bordes tenga una medida diferente deberemos escribir por ejemplo:

DIV {
border: 1px solid #000000;
border-radius: 15px 5px 20px 0px;
padding: 20px;
}

y obtendremos esto:

Facebooktwittergoogle_plus