RGBA
Hasta este momento los colores fueron declarados como sólidos utilizando
valores hexadecimales o la función rgb() para decimales. CSS3 ha agregado una
nueva función llamada rgba() que simplifica la asignación de colores y
transparencias. Esta función además resuelve un problema previo provocado por
la propiedad opacity. La función rgba() tiene cuatro atributos. Los primeros
tres son similares a los usados en rgb() y simplemente declaran los valores
para los colores rojo, verde y azul en números decimales del 0 al 255. El
último, en cambio, corresponde a la nueva capacidad de opacidad. Este valor se
debe encontrar dentro de un rango que va de 0 a 1, con 0 como totalmente
transparente y 1 como totalmente opaco.
En el ejemplo anterior ofrece un simple ejemplo que demuestra cómo los
efectos son mejorados aplicando transparencia. Reemplazamos la función rgb()
por rgba() en la sombra del título y agregamos un valor de opacidad/transparencia
de 0.5. Ahora la sombra de nuestro título se mezclará con el fondo, creando un
efecto mucho más natural. En previas versiones de CSS teníamos que usar
diferentes técnicas en diferentes navegadores para hacer un elemento
transparente. Todas presentaban el mismo problema: el valor de opacidad de un
elemento era heredado por sus hijos. Ese problema fue resuelto por rgba() y
ahora podemos asignar un valor de opacidad al fondo de una caja sin afectar su
contenido.
Fuentes
La selección de fuentes es importante
Elegir la fuente correcta tiene un gran impacto en cómo los lectores
experimentan un sitio web.
La fuente correcta puede crear una fuerte identidad para su marca.
Es importante usar una fuente que sea fácil de leer. La fuente agrega valor
a su texto. También es importante elegir el color y el tamaño de texto
correctos para la fuente.
Familias de fuentes genéricas
En CSS hay cinco familias de fuentes genéricas:
1 1. Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean
una sensación de formalidad y elegancia.
2.
Las fuentes sans-serif tienen líneas limpias (sin pequeños trazos adjuntos).
Crean un aspecto moderno y minimalista.
3.
Fuentes monoespaces: aquí todas las letras tienen el mismo ancho fijo.
Crean un aspecto mecánico.
4.
Las fuentes cursivas imitan la escritura humana.
5.
Las fuentes de fantasía son fuentes decorativas/divertidas.
6.
Todos los diferentes nombres de fuentes
pertenecen a una de las familias de fuentes genéricas.
@font-face
@font-face Obtener un texto con sombra es realmente un muy buen truco de
diseño, imposible de lograr con métodos previos, pero más que cambiar el texto
en sí mismo solo provee un efecto tridimensional. Una sombra, en este caso, es
como pintar un viejo coche, al final será el mismo coche. En este caso, será el
mismo tipo de letra. El problema con las fuentes o tipos de letra es tan viejo
como la web. Usuarios regulares de la web a menudo tienen un número limitado de
fuentes instaladas en sus ordenadores, usualmente estas fuentes son diferentes
de un usuario a otro, y la mayoría de las veces muchos usuarios tendrán fuentes
que otros no. Por años, los sitios webs solo pudieron utilizar un limitado
grupo de fuentes confiables (un grupo básico que prácticamente todos los usuarios
tienen instalados) y así presentar la información en pantalla. La propiedad
@font-face permite a los diseñadores proveer un archivo conteniendo una fuente
específica para mostrar sus textos en la página.
La propiedad @font-face necesita al menos dos estilos para declarar la
fuente y cargar el archivo. El estilo construido con la propiedad font-family
especifica el nombre que queremos otorgar a esta fuente en particular, y la
propiedad src indica la URL del archivo con el código correspondiente a esa
fuente. En el Listado 3-10, el nombre MiNuevaFuente fue asignado a nuestro
nuevo tipo de letra y el archivo font.ttf fue indicado como el archivo
correspondiente a esta fuente. Una vez que la fuente es cargada, podemos
comenzar a usarla en cualquier elemento del documento simplemente escribiendo
su nombre (MiNuevaFuente). En el estilo font en la regla del Listado 3-10,
especificamos que el título será mostrado con la nueva fuente o las
alternativas verdana y sans-serif en caso de que la fuente incorporada no sea
cargada apropiadamente.
Bordes
La propiedad border-style especifica qué tipo de borde mostrar.
Se permiten los siguientes valores:
·
dotted - Define un borde punteado
·
dashed - Define un borde discontinuo
·
solid - Define un borde sólido
·
double - Define un borde doble
·
surco: define un borde ranurado en 3D. El
efecto depende del valor del color del borde.
·
ridge: define un borde con estrías en 3D.
El efecto depende del valor del color del borde.
·
recuadro: define un borde de inserción 3D.
El efecto depende del valor del color del borde.
·
salida: define un borde de salida 3D. El
efecto depende del valor del color del borde.
·
ninguno: no define ningún borde
·
hidden - Define un borde oculto
La propiedad de estilo de borde puede tener de uno a cuatro valores (para
el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Text-Shadow
La propiedad text-shadow en CSS se usa para agregar sombras al texto. Esta
propiedad acepta una lista de sombras que se van a aplicar al texto, separadas
por coma. El valor predeterminado de la propiedad text-shadow es none.
Valores de propiedad:
- ·
h-shadow: esta propiedad es necesaria y se
utiliza para especificar la posición de la sombra horizontal. Acepta los
valores negativos.
- ·
v-shadow: esta propiedad es necesaria y se
utiliza para especificar la posición de la sombra vertical. También acepta los
valores negativos.
- ·
blur-radius: Se utiliza para establecer el
radio de desenfoque. Su valor predeterminado es 0 y es opcional.
- ·
none: No representa ninguna sombra añadida
al texto, este es el valor por defecto.
- ·
color: Se utiliza para establecer el color
de la sombra. es opcional
- ·
initial: se utiliza para establecer la
sombra de texto en su valor predeterminado.
- ·
heredar: esta propiedad se hereda de su
elemento padre.
DEMOSTRACIÓN
En Visual Studio Daremos Click en Menú à File à New à Project
Y en la Ventana Emergente colocaremos como Nombre del Proyecto “Demo 6
20480”
Le damos click
a OK y Nos aparecerá la siguiente ventana donde Seleccionamos Emty y tildamos la
opción de WebForm:
Al dar click
en OK, En el espacio de nombre del proyecto damos click derecho y
seleccionamos Add à New Items
En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos
como nombre del archivo “Colores.html”, para luego presionar el botón Add.
Dela misma forma procederemos a crear otras dos páginas más, con los
nombres EjEstilos.html y Pseudo.html.
En el panel de proyectos vamos a crear una carpeta llamada Imágenes y
agregamos una imagen cualquiera, de la misma forma que hemos hecho en otros ejemplos
anteriores crearemos una carpeta para guardar los archivos de tipo CSS
En el nuestro archivo CSS, vamos a inscrustar las
siguientes líneas de Código:
@font-face permite al autor especificar fuentes
online para visualizar en sus páginas web. Al permitir a los autores
proporcionar sus propias fuentes, @font-face elimina la necesidad de
depender del número limitado de fuentes de usuarios instaladas en sus computadoras.
De este ejemplo se creará unas series de clases que
las utilizaremos posteriormente
Para las clases que estamos creando para las sombreas
estamos usando la propiedad text-shadow que nos permite definir una sombra a un
texto, la sintaxis más común es:
Elemento { text-shadow: desplazamientoX desplazamientoY radio-de-desenfoque color; }
La propiedad tiene 4 valores que son los siguientes:
- El desplazamiento horizontal de la sombra, un
desplazamiento negativo pondrá la sombra a la izquierda.
- El desplazamiento vertical, un valor negativo
dispone la sombra en la parte superior del texto, uno positivo la sombra estará
por debajo del texto.
- El tercer parámetro es el radio de desenfoque, si se
pone a 0 la sombra será fuerte y con color liso, más grande el número, más
borrosa será.
- El último parámetro es el color de la sombra.
Ahora nos dirigimos al panel de proyectos y le damos
doble click a la página de colores.html
En el elemento <HEAD></HEAD> de nuestra
página, escribiremos el siguiente código:
Los cuadrados y los rectángulos son las formas
geométricas más fáciles de dibujar con CSS. Basta definir un bloque con la
altura y anchura del cuadrado o rectángulo y darle un color de fondo o
definirle un borde. Por ejemplo:
.cuadrado {width:100px;
height:100px;
background:#428bca;
}
Si en lugar de un color de fondo definimos un borde
(esto se puede aplicar al resto de formas):
Seguimos en nuestro ejemplo y codificaremos lo
siguiente en las etiquetas <BODY></BODY>:
En el panel de proyecto colocamos el mouse en la
página de Colores.html, le damos click derecho y damos click en opción “Seta As
Star Page”
Y al desplegar nuestra página web:
Se nos muestra de la siguiente forma:
Nos dirigimos otra vez a nuestro panel de proyectos y
le damos doble-click en la página EjEstilos.html
Y escribiremos el siguiente código en la etiqueta
<HEAD></HEAD>
En la etiqueta <BODY></BODY> lo siguiente:
En el panel de proyecto colocamos el mouse en la página
de EjEstilos.html, le damos click derecho y damos click en opción “Seta As Star
Page”
Y al desplegar nuestra página web:
Se nos muestra de la siguiente forma:
