Cómo cambiar el tamaño de los elementos y crear gradientes css3

Usted puede hacer literalmente cientos de trucos en su sitio web con CSS3. Entre los trucos clave son redimensionar elementos de su página web y la creación de gradientes para el fondo.

Cómo cambiar el tamaño de los elementos con CSS3

Sin duda has oído hablar de cambiar el tamaño de una ventana del navegador. Con CSS 3, ahora se puede dar a los visitantes la posibilidad de cambiar el tamaño de cualquier etiqueta o la forma área de texto elemento mediante el uso de la cambiar el tamaño propiedad. los cambiar el tamaño valor se puede establecer a ninguna, ambos, horizontal o vertical, y típicamente se combina con el rebosar propiedad establecida en auto.

En el siguiente ejemplo, un recipiente de ancho 300px puede cambiar el tamaño tanto horizontal como verticalmente, y cualquier contenido de desbordamiento se reajusta automáticamente para adaptarse a las dimensiones cambiantes del contenedor, la adición de barras de desplazamiento cuando sea aplicable:

div {width: 300px; cambiar el tamaño: tanto-overflow: auto}

Cómo crear degradados con CSS3

En el pasado, cuando los diseñadores querían un gradiente de fondo de un elemento, que habían crean un gráfico y luego se repiten a lo largo de los ejes X o eje Y para llenar el espacio. El uso de CSS 3, puede crear sus propios gradientes más rápido de carga.

Lo creas o no, puede crear el efecto de degradado utilizando la imagen de fondo propiedad emparejado con valores para el tipo de degradado, posición, parada de color, y el valor de color. Aunque la sintaxis de la CSS es ligeramente diferente para WebKit de Mozilla, los resultados son idénticos:

.gradiente {/ * Safari & Cromo * / Imagen de fondo: -webkit-degradado (lineal, abajo a la izquierda, arriba a la izquierda, el color de ventanilla (0, # 74B4DB), el color de ventanilla (1, # F7ECCA)) - / * Firefox * / Imagen de fondo: -moz-lineal-gradiente (parte inferior central, 0pt # 74B4DB, # F7ECCA 100%) - altura: 200 píxeles;}

Además de la técnica que se muestra aquí, también se pueden crear efectos de degradado más complejas utilizando el editor de gradiente en línea gratis en el página web ColorZilla.

Video: HTML5 and CSS3 beginners tutorial 30 - linear gradient

Para saber más acerca de estos diez técnicas y trabajar con CSS3 en general, la visita CSS3.info y W3C.