martes, 23 de octubre de 2012

Cristalab

Cristalab


Alternativa a "margin-top" en CSS

Posted: 23 Oct 2012 09:05 AM PDT

A veces cuando posicionamos un elemento con CSS, pasa que al querer bajar un título o un párrafo estando insertado en la primera línea de su contenedor, se baja o se corta el contenedor, dejando un espacio no deseado.

En el ejemplo insertaré en el HTML un un header y dentro un título.

Código :

  <body>    <header>      <h1>Título que quiero mover</h1>    </header>  </body>  


Si separo el h1 de su límite superior:

[css:1:1c9995c647]
*{margin: 0;}
body{background: #BBB;}
header{background: #000;}
h1{margin-top: 40px;}
[/css:1:1c9995c647]

Pasa esto:




Lo cual es un error. Quiero que el negro comience desde el límite de la ventana. La mayoría dirá: pon un padding-top a header y listo. Sí, es la solución que utilizaba. Pero moviendo y agregando estilos en el inspector de Chrome, hubo algo que lo arregló "sin querer queriendo".

Hay que agregarle un padding-top a header, pero sólo de 1px.

[css:1:1c9995c647]
*{margin: 0;}
body{background: #BBB;}
header{background: #000; padding-top: 1px;}
h1{margin-top: 40px;}
[/css:1:1c9995c647]

Resultando lo siguiente:




Aunque de todos modos hay que agregar un padding-top.

No se si sea solución por eso en el título del tip le puse "alternativa", siempre se pueden encontrar varios modos de hacer lo mismo.

Enviar comentario

Vector hiperrealista en Illustrator (II)

Posted: 26 Sep 2012 04:07 AM PDT

Seguiremos añadiendo mas detalles en Illustrator a nuestro retrato vectorial del último videotutorial, continuando con la zona de la boca y aplicando nuevamente la técnica de sombreado mediante la heramienta malla y la fusión suave a través de las opciones de transparencia de las anclas, junto con herramientas y efectos que aportarán su granito de arena, para aumentar el realismo de nuestro personaje.



Saludos.

Enviar comentario

No hay comentarios:

Publicar un comentario