Apuntes de CSS Novedades CSS3

Transcripción

1 Apuntes de CSS3 14. Novedades CSS3 0. Bordes en nuestra página. Todos los elementos HTML son considerados como bloques. Para visualizar sus bordes podemos recurrir a nuestra hoja de estilos CSS. El ejemplo más sencillo y claro se llevará a cabo con un bloque <p>...</p>. Hagámos un fichero.html donde se incluya un párrafo <p> y escribamos un texto cualquiera. Después vayamos a nuestra hoja de estilos CSS e incluyamos la siguiente regla. border:solid #5B6DCD 10px; Se utilizará un borde sólido con el color #5B6DCD y un grosor de 10px En general los tres valores que puede tener la propiedad border son el ancho del borde, el estilo y el color de borde. Se pueden especificar en cualquier orden y la forma de hacerlo es como se puede apreciar en la regla anterior. A continuación se detallan las posibles variantes de los tres valores. Ancho de borde (border-width): thin, medium, thick, o los píxeles que estimes oportunos. Estilo (border-style): none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Color (color): Podemos utilizar un color en HEX, usando rgb(), rgba(), o poner directamente colores básicos como grey, green, red, yellow, etc. Para rizar más el rizo se pueden colorear y personalizar los bordes por separado. Es decir, el border-top, border-right, border-left y el border-bottom pueden tener valores diferentes. border-left: red 10px solid; border-top: blue 5px dashed; border-bottom: yellow 10px dotted; border-right: green 15px solid; Una forma muy buena de colorear los bordes por separado y de forma rápida es la siguiente: Las propiedades border-color, border-width y border-style permiten establecer, respectivamente, el color, el grosor y el estilo de los cuatro bordes de un elemento. A cada una de las propiedades se le puedes dar uno, dos, tres o cuatro valores, que se interpretan de la siguiente manera: 1 valor: este valor se aplica a los cuatro bordes 2 valores: el primer valor se aplica a los bordes inferior y superior y el segundo a los bordes derecho e izquierdo 3 valores: el primer valor se aplica al borde superior, el segundo a los bordes derecho e izquierdo y el tercer valor al borde inferior 4 valores: el primer valor se aplica al borde superior, el segundo al borde derecho, el tercer valor al borde inferior y el cuarto al borde izquierdo

2 Ejemplos: border-color: red; border-color: red black; border-color: red black green; border-color: red black green orange; border-color: red black green; border-width: 10px 40px; border-style: dashed solid dotted; Se puede establecer de forma independiente cada propiedad de cada borde mediante las propiedades: border-top-color, border-right-color, border-bottom-color, border-left-color border-top-width, border-right-width, border-bottom-width, border-left-width border-top-style, border-right-style, border-bottom-style, border-left-style En general, para que el navegador muestre un borde, se tienen que definir las tres propiedades (color, grosor y estilo), aunque normalmente los navegadores asignan el color negro como color prederminado, por lo que si no se establece el color del borde suele mostrarse de color negro

3 1. Esquinas redondeadas en los bloques. Todos los elementos de HTML son considerados como bloques, otra cosa es que no los visualicemos que es lo más normal. Para llevar a cabo el redondeo de las esquinas de un bloque se usará la propiedad: border-radius: 10px; Donde definiremos el radio del arco que cierra las esquinas de los bloques. Sin embargo, si quisiéramos especificar el radio de las esquinas por separado empezando por la esquina superior izquierda y en el sentido de las agujas del reloj. Border-radius: 10px 20px 30px 25px; Y para rizar más el rizo se puede definir para cada esquina los radios verticales y horizontales. Los valores se separarán por una barra y los que estén a la izquierda representan el radio horizontal y los de la derecha el vertical. border-radius: 80px 40px 10px 120px / 40px 20px 10px 120px; En este caso los bordes vendrán definidos por los radios horizontales y verticales en orden. 2. Bonitas sombras (box-shadow). Para hacer que un bloque tenga una sombra se utilizará la propiedad box-shadow y en ella especificaremos el color y el desplazamiento en píxeles en el eje x y el eje y. box-shadow: rgb(150,150,150) 5px 5px; Si queremos difuminar la sombra utilizaremos un valor más después del desplazamiento de la sombra. box-shadow: rgb(150,150,150) 5px 5px 10px; Si quisiéramos que la sombra se desplegara interiormente al bloque añadiríamos el valor inset al final. box-shadow: rgb(150,150,150) 5px 5px 10px inset; 3. Bonitas sombras (text-shadow). Se puede hacer lo mismo con los textos, sólo hay que incluir la propiedad text-shadow en la regla correspondiente. Esta propiedad funciona exactamente igual que box-shadow. text-shadow: rgb(0,0,150) 3px 3px 5px; 4. Incluir nuevas fuentes (@font-face). Antes de deberíamos explicar el modo de trabajar con fuentes que no se encuentran instaladas en el sistema. Para trabajar con cualquier fuente se deben incluir instrucciones en nuestro código HTML y en nuestro CSS. Es muy recomendable cargar dichas fuentes con nuestra página porque nadie nos asegura que quien

4 visite nuestro sitio vaya a disponer de cierta fuente por muy popular que sea. Una forma de cargar fuentes al vuelo es utilizar la API de Google: Entremos en la siguiente URL: (Es posible que con el tiempo dicha dirección cambie, por lo que se recomienda hacer una búsqueda en vuestro buscador favorito escribiendo algo así: fonts api google En la página de Google encontraremos suficientes fuentes para nuestro proyecto. Habrá que elegir una y pulsar sobre el botón rojo de añadir. Una vez seleccionada la familia que nos interesa aparecerá en la parte baja de la pantalla una pequeña ventana que estará plegada y que simplemente clicando sobre ella se expandirá quedando como se detalla a continuación en la siguiente figura, en la cual podemos observar que también se nos ofrecen varias formas de trabajar con dicha fuente. Nosotros lo haremos de la forma estándar. Para incluir nuestra fuente seleccionada hay que copiar el enlace <link>, que aparece sombreado, en el <head> de nuestro HTML y la regla, que aparece sombreada algo más abajo, en nuestra hoja de estilos CSS. No obstante lo dicho, siempre se puede leer la documentación proporcionada en el enlace getting started guide que aparece en la parte inferior en rojo. Por supuesto, también se permite la descarga de la fuente elegida para su instalación en un equipo.

5 @font-face La nos permite añadir nuestros archivos de fuentes en nuestro proyecto sin necesidad de cargarlas desde terceros cada vez que alguien visite nuestro sitio. Veamos cómo funciona. Descargamos el archivo de fuente que nos interese. Hay muchas webs especializadas en fuentes, también se puede descargar desde la API de Google anteriormente mencionada. Copiamos la fuente en cualquier carpeta de nuestro proyecto. No estaría de más que tuviéramos una carpeta llamada fonts donde guardar las fuentes utilizadas. (los archivos de fuentes suelen tener extensión.ttf.otf, etc) En nuestra hoja de estilos añadiremos la siguiente regla. (No importa donde la { font-family: 'MiNuevaFuente'; /*Se escribe el nombre*/ src: url('fonts/font.ttf'); /*Ruta de la fuente*/ Donde pone MiNuevaFuente escribiremos el nombre que queremos reciba la fuente en cuestión a lo largo de nuestro proyecto. Donde pone fonts/font.ttf evidentemente habrá que especificar la ruta del archivo de fuente y su nombre real. Para utilizar la fuente tan solo debemos añadir en nuestra hoja de estilos la regla correspondiente. font: bold 100px pepa, verdana, sans-serif; Esta regla puede añadirse en el selector correspondiente. Establecemos negrita, a tamaño 100px, y la fuente denominada como pepa. Si esta no cargara por la razón que sea intentará cargar verdana y si no sans-serif. 4. Gradientes (Gradient en inglés) Degradado en Castellano. Los degradados se pueden utilizar en los fondos de los bloques. Por eso es muy habitual que se utilice con la propiedad background. Utilizaremos la función linear-gradient() y a continuación vemos unos ejemplos: background: linear-gradient(top, red, orange); En este ejemplo tendremos un degradado lineal que empieza desde arriba (top) y va desde el rojo al naranja. Background: linear-gradient(left, blue, green); En este caso empezamos desde la izquierda e iremos desde el azul al verde. Es más que probable que necesitemos incluir el prefijo -moz- a la función linear-gradient para que todo funcione as expected porque esta característica es todavía experimental. En caso de usar un Chrome o derivado se añadirá el prefijo -webkit-

6 Para realizar un degradado radial se utilizará la función radial-gradient(). La posición de comienzo es el origen y puede ser declarada en pixeles, porcentaje o una combinación de las palabras clave center, top, bottom, left y right. Existen dos posibles valores para la forma (circle y ellipse) y la terminación para el color indica el color y la posición donde las transiciones comienzan. 5. Ejercicio. Realiza si no lo has hecho ya una página completa desde cero y personalizada a tu gusto e incluye los efectos estudiados en esta práctica. Sería conveniente que experimentaras con todas las posibilidades que se te ofrecen.