Archivo de la categoría: CSS

Cabecera fija con CSS

6 respuestas

Para crear una cabecera que se mantenga fija mientras hacemos scroll solo necesitamos un poco de CSS:

<style type="text/css">
  body{
  margin:0;
  padding:100px 0 0 0;
}
div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100px;
  background-color:#333;
  color:#FFFFFF;
}
 @media screen{
  body>div#header{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>

Siendo estos los DIV’s que contendrán tanto la cabecera como el contenido de la página:

<div id="header"> cabecera </div>
<div id="content"> contenido </div>

Via: Anne’s Blog

Bordes redondeados con CSS

Deja una respuesta

Se pueden crear bordes redondeados, por ejemplo para un div, con JavaScript o con imágenes. Con el primero tenemos el problema de que el usuario lo tenga desactivado en su navegador y con el segundo que se incrementa el “peso” de la página y esta tarda más en cargar.
bordes con cssUsando CSS lo podemos conseguir fácilmente añadiendo estas líneas:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Se pueden cambiar los valores para adaptarlos a vuestras necesidades tranquilamente, incluso se pueden redondear uno solo, dos, los de arriba, etc:

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

En este ejemplo se redondearán los bordes superiores, dejando los inferiores normales.

Demo

Sigue leyendo →