Estilizando con CSS3
Publicado: Vie, 29 May 2015, 08:32
Para los interesados les espongo algo de diseño web con CSS3.
Qué es CSS
Si no sabes lo que es CSS cabría decir que CSS es un lenguaje para definir
el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.
Propiedades nuevas en CSS 3
He aquí una lista de las principales propiedades que son novedad en CSS3.
Bordes
• border-color
• border-image
• border-radius
• box-shadow
Fondos
• background-origin
• background-clip
• background-size
• hacer capas con múltiples imágenes de fondo
Color
• colores HSL
• colores HSLA
• colores RGBA
• Opacidad
Texto
• text-shadow
• text-overflow
• Rotura de palabras largas
Interfaz
• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left
Selectores
• Selectores por atributos
Modelo de caja básico
• overflow-x, overflow-y
Otros
• media queries
• creación de múltiples columnas de texto
• propiedades orientadas a discurso o lectura automática de páginas web
• Web Fonts
Este listado de nuevas propiedades de CSS 3 lo he sacado de: http://www.css3.info/preview/.
Es un sitio en inglés, pero puede estar bien visitar para ir conociendo más detalles sobre CSS3.
Bordes redondeados en CSS 3
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se permiten bordes con las esquinas redondeadas, bordes con imágenes,
sombras, etc.
Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería aproximado este:
border-radius: 5px;
Definiría un radio de 5 píxeles en el redondeo de las esquinas del elemento.
Este atributo Mozilla lo ha adoptado con un nombre especial
-moz-border-radius y los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas pero de la siguiente forma -webkit-borderradius. Con respecto a Internet Explorer lo incorpora en la version 10.
Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3, podemos utilizar el atributo border-radius de la siguiente manera:
DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}
Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de 7 píxeles. Fijarse en el uso de los atributos -moz-border-radius y -webkit-border-radius, que sirven para lo mismo, pero en navegadores basados en Mozilla y basados en WebKit.
El atributo border-radius tiene otras posibles configuraciones definiendo los valores de las cuatro esquinas por separado de esta manera:
-moz-border-radius: 7px 27px 100px 0px;
Así estaríamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior izquierda, luego 27px para la esquina superior derecha, de 100px para la inferior derecha y 0px para la inferior izquierda. (Hay que explicar que un border-radius de 0px es un borde con esquina en ángulo recto)
Es bueno aclarar que este atributo sólo se ve si se tiene definido
algún borde visible al elemento que se los asignamos, ya sea solid, dotted, etc.
Por el momento esto es todo mas adelante hablaremos de :
•Múltiples imágenes de fondo
•Colocar varios fondos de imagen a un elemento
•Colores RGBA en CSS 3
•Notación de color RGBA
•Word-wrap en CSS 3
Espero que les sea de gran utilidad.
Qué es CSS
Si no sabes lo que es CSS cabría decir que CSS es un lenguaje para definir
el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.
Propiedades nuevas en CSS 3
He aquí una lista de las principales propiedades que son novedad en CSS3.
Bordes
• border-color
• border-image
• border-radius
• box-shadow
Fondos
• background-origin
• background-clip
• background-size
• hacer capas con múltiples imágenes de fondo
Color
• colores HSL
• colores HSLA
• colores RGBA
• Opacidad
Texto
• text-shadow
• text-overflow
• Rotura de palabras largas
Interfaz
• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left
Selectores
• Selectores por atributos
Modelo de caja básico
• overflow-x, overflow-y
Otros
• media queries
• creación de múltiples columnas de texto
• propiedades orientadas a discurso o lectura automática de páginas web
• Web Fonts
Este listado de nuevas propiedades de CSS 3 lo he sacado de: http://www.css3.info/preview/.
Es un sitio en inglés, pero puede estar bien visitar para ir conociendo más detalles sobre CSS3.
Bordes redondeados en CSS 3
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se permiten bordes con las esquinas redondeadas, bordes con imágenes,
sombras, etc.
Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería aproximado este:
border-radius: 5px;
Definiría un radio de 5 píxeles en el redondeo de las esquinas del elemento.
Este atributo Mozilla lo ha adoptado con un nombre especial
-moz-border-radius y los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas pero de la siguiente forma -webkit-borderradius. Con respecto a Internet Explorer lo incorpora en la version 10.
Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3, podemos utilizar el atributo border-radius de la siguiente manera:
DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}
Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de 7 píxeles. Fijarse en el uso de los atributos -moz-border-radius y -webkit-border-radius, que sirven para lo mismo, pero en navegadores basados en Mozilla y basados en WebKit.
El atributo border-radius tiene otras posibles configuraciones definiendo los valores de las cuatro esquinas por separado de esta manera:
-moz-border-radius: 7px 27px 100px 0px;
Así estaríamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior izquierda, luego 27px para la esquina superior derecha, de 100px para la inferior derecha y 0px para la inferior izquierda. (Hay que explicar que un border-radius de 0px es un borde con esquina en ángulo recto)
Es bueno aclarar que este atributo sólo se ve si se tiene definido
algún borde visible al elemento que se los asignamos, ya sea solid, dotted, etc.
Por el momento esto es todo mas adelante hablaremos de :
•Múltiples imágenes de fondo
•Colocar varios fondos de imagen a un elemento
•Colores RGBA en CSS 3
•Notación de color RGBA
•Word-wrap en CSS 3
Espero que les sea de gran utilidad.