Novas propiedades CSS3

Evolución de CSS

Introdución

Partimos de que se ten un coñecemento básico de CSS. Non é así? Revisa o artigo de introducion.

Selectores

Os selectores CSS son usados para seleccionar elementos na páxina web os que aplicar CSS ruleset (declaracións, isto é, propiedade e valor asociado).

Os máis empregados son:

Universal selector CSS
Element selector
Class selector CSS (o máis relevante!)
Id selector CSS
Group selector
Attribute selector

Unidades de medida

Unidades de medida en CSS

As medidas en CSS empréganse para entre outros fins definir a altura, anchura e márxenes dos elementos e para establecer o tamaño de letra do texto. Todas as medidas indícanse como un valor numérico entero ou decimal seguido dunha unidade de medida (sen espazo en branco entre o número e a unidade!).

CSS divide as unidades de medida en dous grupos:

absolutas: establecen de forma completa o valor dunha medida (o seu valor real é directamente o valor indicado)
relativas: definen o seu valor en relación con outra medida, polo que para obter o seu valor real débese realizar algunha operación co valor indicado

Unidades de medida absolutas e relativas

As unidades absolutas definidas polo CSS e o seu significado:

in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
cm, centímetros.
mm, milímetros.
pt, puntos. Un punto equivale a 1 pulgada/72 (uns 0.35 milímetros)
pc, picas. Unha pica equivale a 12 puntos (uns 4.23 milímetros)

Unidades relativas

As unidades relativas son:

Relativas as fontes

em
ch
ex
rem

Relativas a porcentaxes (%)
E relativas a Viewport

vw
vh
vmin
vmax

Tes información detallada en artigos [1], [2]

Cores

Posibles colores con nome

Podense indicar de cinco xeitos diferentes:

palabras clave
cores do sistema
RGB hexadecimal (moi habitual)
RGB numérico
RGB porcentual

Exemplo en formato hexadecimal:

p { color: #4762B0; }

Tes nestes artigos información máis detallada ([3],[4])

De xeito equivalente pódense indicar as cores de fondo dos elementos:

Propiedades de fondo de CSS

Deseño (Layout)

Modelo de caixas

O modelo de caixas ou box model é a característica máis importante da linguaxe de follas de estilos CSS, xa que condiciona o deseño de todas as páxinas web: é o comportamento de CSS que fai que todos os elementos das páxinas se representen mediante caixas rectangulares.

Máis información en artigos ([5], [6] e [7]).

O modelo de caixas está relacionado con estes conceptos que veremos a continuación:

Anchura e altura
Marxe e recheo
Bordes

Posicionamiento e visualización

Os navegadores aplican un procesamiento moi complexo do contido HTML e CSS das páxinas web antes de amosalas na pantalla.

Para cumplir co modelo de caixas presentado no capítulo anterior, os navegadores crean unha caixa para representar a cada elemento da páxina HTML. Os factores que se teñen en conta para xenerar cada caixa son:

As propiedades width e height da caixa (de estar establecidas)
O tipo de cada elemento HTML (elemento de bloque ou elemento en liña)
Posicionamiento da caixa (normal, relativo, absoluto, fixo ou flotante)
As relacións entre elementos (onde se atopa cada elemento, elementos descendeentes, etc.)
Outro tipo de información, coma por exemplo o tamaño das imaxes e o tamaño da fiestra do navegador

Veremos os cinco tipos de posicionamentos definidos para as caixas e outras propiedades que afectan o xeito no que se visualizan as caixas.

Tipos de elementos

O estándar HTML clasifica a todos os seus elementos en dous grandes grupos

elementos en liña (inline elements en inglés): non comezan necesariamente en nova liña e ocupan so o espazo necesario para amosar os seus contidos
elementos de bloque (block elements en inglés): sempre comezan nunha nova líña e ocupan todo o espazo disponible ata o final da liña

Debido a este comportamento, o tipo dun elemento inflúe de xeito decisivo na caixa que o navegador crea para amosalo. A seguinte imaxe amosa as caixas cajas que crea o navegador para representar os diferentes elementos que forman unha páxina HTML:

Caixas con elementos html: <p> en bloque. <a> e <strong> en liña

O primeiro elemento é un párágrafo. Os parágrafos son elementos de bloque e por ese motivo a súa caixa comeza nunha nova liña e chega ata o final desa mesma liña. Aínda que os contidos de texto do parágrafo non son suficientes para ocupar toda a liña o navegador reserva todo o espazo disponible nesa primeira liña.

O segundo elemento da páxina é un strong. Os strong son elementos en liña, polo que a súa caixa ocupa só o espazo necesario para amosar os seus contidos. Se despois deste elemento inclúese outro elemento en liña (por exemplo outro enlace ou unha imaxe) o navegador amosaría os dous elementos na mesma liña, ya que existe espazo dabondo.

Por último, o terceiro elemento da páxina é un párrafo que se comporta do mesmo xeito que o primeiro parágrafo. Porén o segundo parágrafo ocupa toda unha liña e o segundo enlace ocupa só o espazo necesario para amosar os seus contidos.

Polas súas características, os elementos de bloque non poden inserirse dentro de elementos en liña e tan só poden aparecer dentro doutros elementos de bloque. En cambio, un elemento en liña pode aparecer tanto dentro dun elemento de bloque coma dentro doutro elemento en liña.

Os elementos en liña definidos por HTML son:

a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Os elementos de bloque definidos por HTML son:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

Os seguintes elementos tamén se considera que son de bloque:

dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

Os seguintes elementos poden ser en liña e de bloque segundo as circunstancias:

button, del, iframe, ins, map, object, script.

Posicionamento

Os navegadores crean e posicionan de forma automática todas as caixas que forman cada páxina HTML; mais CSS permite ó deseñador modificar a posición na que se amosa cada caixa.

Utilizando as propiedades que proporciona CSS para alterar a posición das caixas é posible realizar efectos moi avanzados e deseñar estruturas de páxinas que de outra forma non serían posibles.

Posicionamento CSS

O estándar de CSS define cinco modelos diferentes para posicionar unha caixa:

Posicionamiento normal ou estático: Trátase do posicionamento que utilizan os navegadores se non se indica o contrario.
Posicionamiento relativo: Variante do posicionamento normal: Posiciona unha caixa segundo o posicionamiento normal e despois é desplazarada respecto da súa posición orixinal.
Posicionamiento absoluto: A posición dunha caixa establécese de forma absoluta respecto do seu elemento contedor e o resto de elementos da páxina ignoran a nova posición do elemento
Posicionamiento fixo: Variante do posicionamiento absoluto: Convirte unha caixa nun elemento inamovible, de forma que a súa posición na pantalla sempre é a mesma independentemente do resto de elementos e de se o usuario sube ou baixa a páxina na fiestra do navegador.
Posicionamiento flotante: modelo máis especial de posicionamiento: despraza as caixas todo o posible hacia a esquerda ou dereita da liña na que se atopan.

Veremos máis en detalle cada un deles no artigo de Posicionamento CSS.

CSS Grid

Citando á Wikipedia:

CSS grid layout ou CSS grid é unha técnica das follas de estilo en cascada (CSS) que permite aos desenvolvedores web crear deseños complexos e adaptables con maior facilidade en todos os navegadores; é unha alternativa a outros métodos de deseño de páxinas web, coma as táboas, o modelo de caixa e CSS flex.
CSS grid non é actualmente un estándar oficial (é unha W3C Candidate Recommendation) mais foi adoptado pola maioría dos navegadores

Máis información no artigo de CSS Grid.

CSS Flexbox

Citando á Wikipedia:

Flexbox, (Deseño de Caixa Flexible) é un modelo de deseño CSS3 na actualidade na etapa de recomendación de candidatos do W3C. A disposición de flexbox permite que os elementos adaptables dentro dun contenedor se organicen automáticamente dependendo do tamaño da pantalla ou do dispositivo.

Máis información no artigo de CSS Flexbox.

Funcións matemáticas

Poden ser usadas para calcular valores das propiedades. Por exemplo:

calc()
max()
min()

Por exemplo con calc podemos calcular o ancho (width) dun elemento div, par que ocupe todo menos 100 px (50 px por cada lado):

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Máis información e exemplos no artigo de w3schools ou nesta completa guía de calc() en CSS.

Texto e fontes

Texto

Algunhas propiedades relevantes no tocante a texto:

Fontes

Fontes CSS

Os nomes de fontes xenéricas disponibles en CSS son:

cursivo
fantasía
monoespaciado
serif
sans-serif

CSS contempla un sistema tolerante a erros para fontes, polo que permite escoller varias fontes para permitir fallback: se a primeira fonte non é posible por incompatibildade co navegador ou sistema operativo, vai probando cos sucesivos.

As fontes Web safe son as que están universalmente instaladas en todos os navegadores e dispositivos, pero nunca hai garantía 100%. Algunhas fontes web safe:

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Exemplo de diferentes fontes para tres parágrafos:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Tamaño de fontes

A propiedade:

font-style úsase principalmente para especificar texto en italics.
font-size úsase para fixar o tamaño do texto
font é un atallo para configurar aas propiedades das fontes

Tamén e posible usar as Google Fonts: son gratis é hai máis de 1000 onde escoller, con posibilidade de darlles estilos e efectos.

Ten en conta que escoller a tipografía axeitada é unha decisión de deseño moi importante; e que os deseñadores adoitan traballar con parellas de fontes que combinan ben xuntas.

Enlaces

Enlaces con estilos

Os enlaces poden ter estilo con calquera propiedade CSS, e ademáis dependendo do estado no que se atopan:

a:link - un enlace normal non visitado
a:visited - un enlace xa visitado
a:hover - un enlace cando o punteiro do rato está enriba
a:active - un enlace no momento de facer clic

A propiedade text-decoration permite eliminar o subliñado dos enlaces.

Exemplo dun enlace que parece un botón.

Enlace con estilo que parece un botón

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

Imaxes

Redondeando as imaxes

Utilizando as propiedades width e height é posible amosar as imáxenes con calquer altura/anchura:

#destacada {
  width: 120px;
  height: 250px;
}

<img id="destacada" src="imagen.png" />

Establecer a altura/anchura de todas las imágenes mediante CSS é pouco recomendable:

normalmente dúas imaxes diferentes non comparten a mesma altura/anchura, o que implica crear unha nova regra CSS (e un novo selector) para cada unga das imaxes.
prodúcese una sobrecarga de estilos que a desaconsellan

Porén aínda que é unha solución que non respeta a separación completa entre contidos (XHTML) e presentación (CSS), recoméndase establecer a altura/anchura das imáxenes mediante os atributos width e height da etiqueta <img>:

<img src="imagen.png" width="120" height="250" />

Cando unha imaxe forma parte dun enlace, os navegadores amosan por defecto un borde azul groso alrededor das imáxenes. Para evitalo, unha das regras máis utilizadas á a que elimina os bordes das imágenes con enlaces:

img {
  border: none;
}

Podes atopar moitas máis posiblidades de estilo neste artigo [15].

Iconas

Trataremos aquí as iconas como un caso particular de imaxe. Poden ser engadidas na web usando unha biblioteca de iconas, coma Font Awesome ou Google Icons.

Unha vez engadida para insertar unha icona engade o nome desa clase de incona en un elemento HTML en liña (coma <i> ou <span> ).

As iconas son vectores escalables que poden ser personalizados con CSS (tamaño, cor, sombreado, etc.)

Para usar as iconas deFont Awesome icons, visita fontawesome.com, rexístrate e obten un código para engadir na sección <head> da túa páxina HTML:

<script src="https://kit.fontawesome.com/oteucodigo.js" crossorigin="anonymous"></script>

Podes xogar con este exemplo:

Alguhas iconas de Font Awesome

<!DOCTYPE html>
<html>
 <head>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
 </head>
 <body>
  <i class="fas fa-cloud"></i>
  <i class="fas fa-heart"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>
 </body>
</html>

Podes aprender máis neste titorial de Font Awesome.

Listas

Priopiedade list-style-type

Os navegadores amosan por defecto os elmentos das listas:

non ordenadas cunha viñeta formada por un pequeno círculo de cor negra
ordenadas coa numeración decimal utilizada na maioría de países.

CSS define varias propiedades para controlar o tipo de viñeta que amosan as listas, ademáis de poder controlar a posición da propia viñeta.

A propiedade básica que controla o tipo de viñeta que se amosa e list-style-type.

Outra propiedade interesante que permite insertar imaxes como marcador de items é list-style-image.

Propiedade List-style-position

Finalmente a propiedade list-style-position especifica a posición dos marcadores dos items da lista.

Táboas

Separate vs collapse

O estándar CSS 2.1 define dous modelos diferentes para o tratamento dos bordes das celdas. A propiedade que permite seleccionar o modelo de bordes é border-collapse, que eefine o mecanismo de fusión dos bordes das celdas adxacentes dunha táboa. Permite tres valores: collapse, separate (por defecto) e inherit

O modelo collapse fusiona de forma automática os bordes das celdas adyxcentes, meetras que o modelo separate forza a que cada celda amose os seus catro bordes. Por defecto, os navegadores utilizan o modelo separate, mais os deseñadores adoitan preferir o modelo collapse porque estéticamente resulta máis atractivo e máis parecido ás taboas de datos tradicionaos.

Co modelo separate pódese utilizar a propiedade border-spacing para controlar a separación entre os bordes de cada celda:

Se soamente se indica como valor unha medida, asígnase ese valor coma separación horizontal y vertical
Se se indican dúas medidas, a primeira é a separación horizontal e a segunda é a separación vertical entre celdas.

Tamén con separate pódese definir a propiedade empty-cells: o valor show e por defecto, e co valor hide indicase que as celdas vacías non se deben amosar.

Coa propiedade caption-side establécese a posición do título da taboa (que se establece mediante o elemento ).

Finalmente, co selector :hover no elemento podemos destacar as filas da táboa cando o punteiro do rato pasas por encima delas. Máis información sobre táboas nos artigos ([16] e [17]).

Formularios

Son moitas as posibilidades para mellorar a apariencia dos formularios:

Styling Input Fields
Padded Inputs
Bordered Inputs
Colored Inputs
Focused Inputs
Input con icona/imaxe
Animated Search Input
Styling Textareas
Styling Select Menus
Styling Input Buttons
Responsive Form con Media Queries

Máis información no artigo ([18] e [19])

Animacións

CSS vs JavaScript para animacións

CSS permite a animación de elementos HTML sen facer uso de JavaScript ou Flash.

Unha animación permite a un elemento gradualmente cambiar de un estilo a outro. Pódense cambiar tantas propiedades e tantas veces como desexes.

Para reflexionar. Tanto CSS coma Javascript permiten xestionar amacións. Cales son as ventaxas e desventaxas de cada enfoque? Cal é a mellor? Podes consultar este artigo.

keyframes

Para o seu uso debes espeficicar coa regra @keyframes qué estilos terá o elemento en certos momentos.

Cando especificas estilos CSS dentro da regra @keyframes, a animación cambiará gardualmente do estilo actual o novo estilo.

Para que a animación funcione debes relacionar (bind) a animación co elemento.

O seguinte exemplo relaciona a animación denominada examplo co elemento <div>. A animación durará 5 segundos e cambiará gradualmente a cor de fondo do elemento <div> de amarelo a azul:

Animacións CSS

 /* O código da animación */
@keyframes exemplo {
  from {background-color: yellow;}
  to {background-color: blue;}
}

/* O elemento o que se lle aplicará a animación */
div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  animation-name: exemplo;
  animation-duration: 5s;
}

Algunhas propiedades:

Retraso de inicio e número de execucións
A animación reprodúcese hacia diante, hacia atrás ou ciclos alternos
Especifica a velocidade da animación

Máis información no artigo.

Transition

As transicións CSS permiten cambiar os valores das propiedades suavemnte durante unha duración determinada:

Para crear un efecto de transición debense especificar:

a propiedade CSS a que lle queres engadir o efecto
a duración do efecto (se non, a transición non terá lugar porque por defecto é cero)

O seguinte exemplo amosa un div amarelo de 50px 50px. O elemento <nowiki>

ten espeficado un efecto de transición para a propiedade width con tres segundos de duración:

div {
  width: 50px;
  height: 50px;
  background: yellow;
  transition: width 3s;
}

div:hover {
  width: 300px;
}

Máis información no artigo.

Transformation

As transformacións CSS permiten mover, rotar, escalar ou recortar elementos coa propiedade CSS transform. Con ela podes usar os seguintes métodos de transformación 2D:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Con este último método matrix() combínanse o resto dos métodos mediante seis parámetros que conteñen funcións matemáticas.

Exemplo de método matrix

Os parámetros son:

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Por exemplo:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Tamén son posibles transformacións 3D coa propiedade transform e os métodos:

rotateX()
rotateY()
rotateZ()

Coñecendo CSS en detalle

Para aprender en profundidade utilizaremos os seguintes titoriais:

E videotitoriais:

CSS en profundidade

Sumario