28 de enero de 2013

CSS3 básico


En esta ocasión, vamos a hablar de css3, aunque será de una forma básica.

Todas las etiquetas que incorpora css3 se engloban dentro de las siguientes:

  • 2D Transforms
  • Animations
  • Backgrounds
  • Borders
  • Fonts
  • Multiple Columns
  • Text Effects
  • Transition

Como he dicho al principio, lo veremos de forma básica ya que hablaremos de algunas de ellas, las siguientes las dejaremos para más delante.

Border:
Consta de tres propiedades, border-radius, box-shadow y border-image. Como su nombre indica, es un efecto que afecta al borde, es decir, previamente debemos establecer con css un borde a la propiedad en cuestión (un div, un span, etc).
El más usado y conocido es border-radius y su función es la de redondear las esquinas del borde. Se establece con una medida estándar como puede ser px.
Border-shadow es para añadir sombras a la caja y border-image, para poder usar una imagen como borde, en lugar de la típica línea de la propiedad border.

Fonts:
Esta propiedad se usa o está más orientada para que todos los navegadores, especialmente Internet Explorer, puedan visualizar un tipo de letra concreta. Por ejemplo, si queremos que cualquier navegador pueda reproducir el tipo de letra Arial, debemos indicar la dirección donde se encuentra la fuente, de extensión ttf y además la misma fuente con extensión eot. Posteriormente se usa llamando a la función creada. Ejemplo:

<style>
@font-face
{
font-family: miFuente;
src: url('Arial.ttf'), url('Arial.eot'); /* IE9+ */
}

p
{
font-family:miFuente;
}
</style>

Con el ejemplo anterior, establecemos esa fuente para todos los párrafos de la página. Para conseguir la fuente eot, en Internet se pueden encontrar muchos conversores y tan sólo es necesario subir la fuente en ttf para que nos la devuelva transformada.

Multiple Columns:
Consta de tres formatos column-count, column-gap y column-rule. El más usado es el primero y sirve para dividir un texto en columnas, indicando el número de éstas que deseamos crear. Los otros, son para dar un ancho entre columnas y poco más. Un ejemplo sería el siguiente:

div
{
column-count:3;
}

El texto que contenga ese div, se dividirá en tres columnas.

Text Effects:
Se usa para dar efecto al texto, el más destacable es text-shadow, pero también existe Word-wrap. Un ejemplo del primero sería:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

De esta manera, las etiquetas h1 tendrían un efecto de sombra de un tamaño de 5 píxeles y de color rojo.

La segunda propiedad se usa para contener el texto dentro de un contenedor sin que se salga de éste. Con este ejemplo nos vale:

p
{
word-wrap:break-word;
}


Nota: estas propiedades son genéricas y todavía están en desarrollo, por lo que la mayoría de ellas no funcionan en ningún navegador, para ello hay que usar las implementadas por los navegadores:

Firefox: -moz-propiedad.
Safari y Chrome: -webkit-propiedad.
Opera: -o-propiedad.

Un ejemplo para firefox sería: -moz-border-radius:25px;

Para más información, visitar http://www.w3schools.com/

4 de noviembre de 2012

Selectores css


Css se forma por dos partes, una llamada selector y otra llamada declaración, un ejemplo de ello sería: h1 { color: red; }, donde lo que se encierra entre llaves es la declaración, es decir, lo que se pretende hacer y la etiqueta h1 sería el selector, a lo que se le aplicaría la declaración.

En este apartado, nos centraremos más en los selectores, próximamente se abordará el contenido de la declaración.

Los selectores básicos son: universal, etiqueta, de clase, de id, descendente y combinando selectores.

  • Universal: el selector es el asterisco “*” y sirve para seleccionar todos los elementos de la página.

  • Etiqueta: selecciona todos los elementos cuya etiqueta HTML coincida con ésta, estos pueden ser: p, h1, div, etc.

  • De clase: son selectores individuales formados por un nombre precedido por punto, es decir, si en un texto tenemos varios párrafos “<p>”, podemos nombrar a uno o varios de ellos de la siguiente manera: <p class=”parrafo”>, de esta manera el selector sería .parrafo y al cambiar las propiedades de la clase párrafo, se cambiarían exclusivamente a aquellas que ostentaran esta clase. De esta manera, se puede aplicar diferentes estilos a varios elementos diferentes.

  • Id: el selector id es prácticamente igual al de clase, la diferencia es que para llamarlo sería con sostenido “#” seguido del nombre, por ejemplo, <p id=”parrafo”>, el selector sería #parrafo. La otra diferencia es que mientras el de clase se usa para varios elementos iguales o diferentes, éste es único, se debe emplear para un único elemento.

  • Descendente: selecciona los elementos que se hallan dentro de otros elementos, por ejemplo, para seleccionar todos los elementos <span> que hay dentro de un párrafo <p>, sería de la siguiente manera: p span {}.

  • Combinados: es similar al anterior, salvo que se puede complicar mucho más de manera que si establecemos como selectores a .parrafo .especial, el selector seleccionará los elementos de clase especial que se encuentran dentro de los elementos de clase parrafo. Pero se puede modificar y ser, por ejemplo, p.parrafo span.especial, de esta manera, el selector seleccionaría los span de clase especial que son contenidos por aquellos párrafos de clase parrafo.

Esto en cuanto a selectores básicos, ahora veremos los selectores avanzados.

  • Selector de hijos: similar al selector descendente, salvo que tiene que ser que el elemento que se selecciona debe estar justo debajo de otro elemento, de ahí que se conozca como selector hijo. Se representa con “>”, un ejemplo: p > span.

  • Selector adyacente: es más complejo de explicar, aun así haya vamos. Este selector, sirve para seleccionar elementos que deben cumplir dos reglas, deben ser hermanos (bajo el mismo elemento padre) y el segundo elemento debe ir justo después del primero. Se usa el símbolo más “+” y un ejemplo sería: h1 + h2 {}. Siendo el código html el siguiente:

<body>
<h1> Título </h1>
<h2> Subtítulo </h2>
</body>

Ambos elementos son hijos del elemento padre <body> y <h2> va después de <h1>, de manera que cumple con las condiciones necesarias.

  • Selector atributos: como su nombre indica, permite seleccionar elementos por sus atributos, se encierran entre corchetes “[]” y son cuatro tipos: [nombre atributo], [nombre atributo = valor], [nombre atributo ~= valor], [nombre atributo |= valor]. Un ejemplo de cada uno es el siguiente:

    1. a[class] {}. Selecciona los enlaces con atrbuto class, da igual su valor.
    2. a[class=”enlace”] {}. Selecciona los enlaces de clase con valor “enlace”.
    3. a[class ~= ”enlace”] {}. Selecciona los enlaces con atributo class y que al menos uno de sus valores sea “enlace”.
    4. *[lang |= “es”] {}. Selecciona todos los elementos de la página cuyo atributo lang empice por “es”.

30 de octubre de 2012

Tabla de colores

Tras crear varias páginas web y tener que buscar todas las veces el hexadecimal del color deseado, he decidido crear una tablita con algunos colores. Espero que sea de utilidad para tod@s.



Nombre del color
Código hexadecimal
BLANCO
#FFFFFF
MARFIL
#FFFFF0
AMARILLO CLARO
#FFFFE0
AMARILLO
#FFFF00
NIEVE
#FFFAFA
BLANCO FLORAL
#FFFAF0
GASA LIMÓN
#FFFACD
SEDA DE MAÍZ
#FFF8DC
CONCHA
#FFF5EE
SONROJO LAVANDA
#FFF0F5
BATIDO DE PAPAYA
#FFEFD5
BLANCO ALMENDRA
#FFEBCD
ROSA BRUMOSA
#FFE4E1
SOPA
#FFE4C4
MOCASÍN
#FFE4B5
BLANCO NAVAJO
#FFDEAD
SOPLIDO MELOCOTÓN
#FFDAB9
DORADO
#FFD700
ROSA
#FFC0CB
ROSA CLARO
#FFB6C1
NARANJA
#FFA500
SALMÓN CLARO
#FFA07A
NARANJA OSCURO
#FF8C00
CORAL
#FF7F50
ROSA CALIENTE
#FF69B4
TOMATE
#FF6347
NARANJA ROJO
#FF4500
ROSA INTENSO
#FF1493
FUCSIA
#FF00FF
MAGENTA
#FF00FF
ROJO
#FF0000
ENCAJE ANTIGUO
#FDF5E6
AMARILLO ALAMBRE DORADO CLARO
#FAFAD2
LINO
#FAF0E6
BLANCO ANTIGUO
#FAEBD7
SALMÓN
#FA8072
BLANCO FANTASMA
#F8F8FF
CREMA
#F5FFFA
HUMO BLANCO
#F5F5F5
BEIGE
#F5F5DC
TRIGO
#F5DEB3
MARRÓN ARENA
#F4A460
AZUR
#F0FFFF
MELÓN VERDE
#F0FFF0
AZUL ALICIA
#F0F8FF
CAQUI
#F0D58C
CORAL CLARO
#F08080
DORADO ALAMBRE PÁLIDO
#EEE8AA
VIOLETA
#EE82EE
SALMÓN OSCURO
#E9967A
LAVANDA
#E6E6FA
CIAN CLARO
#E0FFFF
MADERA FORNIDA
#DEB887
CIRUELA
#DDA0DD
GAINSBORO
#DCDCDC
CARMESÍ
#DC143C
VIOLETA ROJO PÁLIDO
#DB7093
DORADO ALAMBRE
#DAA520
ORQUÍDEA
#DA70D6
CARDO
#D8BFD8
GRIS CLARO
#D3D3D3
BRONCEADO
#D2B48C
CHOCOLATE
#D2691E
PERÚ
#CD853F
ROJO INDIO
#CD5C5C
VIOLETA ROJO MEDIO
#C71585
PLATA
#C0C0C0
GRIS
#BEBEBE
CAQUI OSCURO
#BDB76B
MARRÓN ROSADO
#BC8F8F
ORQUÍDEA MEDIO
#BA55D3
DORADO ALAMBRE OSCURO
#B8860B
LADRILLO REFRACTARIO
#B22222
POLVO AZUL
#B0E0E6
AZUL ACERO CLARO
#B0C4DE
TURQUESA PÁLIDO
#AFEEEE
AMARILLO VERDE
#ADFF2F
AZUL CLARO
#ADD8E6
GRIS OSCURO
#A9A9A9
MARRÓN
#A52A2A
SIENA
#A0522D
VERDE AMARILLO
#9ACD32
ORQUÍDEA OSCURO
#9932CC
VERDE PÁLIDO
#98FB98
VIOLETA OSCURO
#9400D3
PÚRPURA MEDIO
#9370DB
VERDE CLARO
#90EE90
VERDE MAR INTENSO
#8FBC8F
MARRÓN MONTURA
#8B4513
MAGENTA OSCURO
#8B008B
ROJO OSCURO
#8B0000
AZUL VIOLETA
#8A2BE2
AZUL CIELO CLARO
#87CEFA
AZUL CIELO
#87CEEB
ACEITUNA
#808000
PÚRPURA
#800080
GRANATE
#800000
AGUAMARINA
#7FFFD4
CHARTREUSE
#7FFF00
VERDE CÉSPED
#7CFC00
AZUL PIZARRA MEDIO
#7B68EE
GRIS PIZARRA CLARO
#778899
GRIS PIZARRA
#708090
GRIS ACEITUNA
#6B8E23
AZUL PIZARRA
#6A5ACD
GRIS DIFUSO
#696969
AGUAMARINA MEDIO
#66CDAA
ACIANO AZUL
#6495ED
AZUL CADETE
#5F9EA0
VERDE ACEITUNA OSCURO
#556B2F
ÍNDIGO
#4B0082
TURQUESA MEDIO
#48D1CC
AZUL PIZARRA OSCURO
#483D8B
AZUL ACERO
#4682B4
AZUL REAL
#4169E1
TURQUESA
#40E0D0
VERDE MAR MEDIO
#3CB371
VERDE LIMA
#32CD32
GRIS PIZARRA OSCURO
#2F4F4F
VERDE MAR
#2E8B57
VERDE BOSQUE
#228B22
VERDE MAR CLARO
#20B2AA
AZUL DODGER
#1E90FF
AZUL MEDIANOCHE
#191970
AGUA
#00FFFF
CIAN
#00FFFF
VERDE PRIMAVERA
#00FF7F
LIMA
#00FF00
VERDE PRIMAVERA MEDIO
#00FA9A
TURQUESA OSCURO
#00CED1
AZUL CIELO INTENSO
#00BFFF
CIAN OSCURO
#008B8B
VERDE CERCETA
#008080
VERDE
#008000
VERDE OSCURO
#006400
AZUL
#0000FF
AZUL MEDIO
#0000CD
AZUL OSCURO
#00008B
AZUL MARINO
#000080
NEGRO
#000000