Página 1 de 1

Bordes de tabla con imagen

NotaPublicado: 2014-09-16 06:43 @321
por BigBear
Hola, quería preguntar cómo podría hacer una tabla con un borde, pero el borde necesito que sea una línea de una imagen como la siguiente página: http://www.exploitdb.com/ ¿Alguien encuentra algo en Google?

Re: Bordes de tabla con imagen

NotaPublicado: 2014-09-16 08:38 @401
por explorer
No es ninguna imagen. El aspecto lo definen los estilos definidos en el archivo styles.css. En concreto, el borde que aparece en la capa principal "content" se define así:
Sintáxis: [ Descargar ] [ Ocultar ]
Using css Syntax Highlighting
  1. .content {
  2.         padding: 20px 30px 60px;
  3.         background-color:#000; /*background: transparent url(images/content_bg.png) repeat-x top;*/
  4.         min-height: 162px;
  5.         position:relative;
  6.         border: solid #222 2px;
  7.         -webkit-border-radius: 4px;
  8.         -moz-border-radius: 4px;
  9.         border-radius: 4px;
  10.         display:block;
  11. }
Coloreado en 0.003 segundos, usando GeSHi 1.0.8.4
Son las propiedades border las que definen ese aspecto.

Si quieres usar una imagen, no es algo sencillo.

Debes crear una imagen que se componga de 8 partes, que definen el aspecto de las cuatro esquinas y el aspecto de las repeticiones superior, inferior, derecha e izquierda. Luego, en el estilo CSS debes indicar algo así:
Sintáxis: [ Descargar ] [ Ocultar ]
Using css Syntax Highlighting
  1.         border-width:           102px;
  2.         -moz-border-image:      url('borde.png') 102 102 102 102;
  3.         -webkit-border-image:   url('borde.png') 102 102 102 102;
  4.         border-image:           url('borde.png') 102 102 102 102;
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4
La primera línea indica el tamaño del borde, que puede ser el mismo para los cuatro lados, o cuatro números, si son diferentes. Las otras tres reglas definen la imagen y las dimensiones. La primera regla es para el Firefox; la segunda para iOS, Android, Safari y Chrome; y la última, para el Opera.

Las dimensiones indican el tamaño de las esquinas. El espacio sobrante se toma como base para crear las repeticiones superior, inferior, derecha e izquierda. En el ejemplo, se está indicando que las esquinas tienen 102 píxeles de ancho y de alto. Si creamos 'borde.png' con un tamaño, de por ejemplo, 205x205, estamos queriendo decir que dejamos un solo píxel en anchura y en altura donde se definen las repeticiones.

Aquí lo tienes más descrito. Y aquí, un generador.

P.D.: Sacado del libro «HTML 5 para iOS y Android», de Robin Nixon, Anaya Multimedia, 2011. 978-84-415-3066-9

Re: Bordes de tabla con imagen

NotaPublicado: 2014-09-16 09:31 @438
por BigBear
Gracias por la ayuda, explorer. Te quería preguntar cómo se llama las imágenes chiquitas que se usan en las páginas como fondo para repetirlos un montón de veces y quedan bien, te lo pregunto porque estoy cambiando el fondo de mi página y los fondos grandes ya no quedan bien. ¿Qué nombre tienen esas pequeñas imágenes para fondos? Te lo pregunto y así busco varios así en Google.

Re: Bordes de tabla con imagen

NotaPublicado: 2014-09-16 18:25 @809
por explorer
Te recomiendo que hagas o leas un curso de HTML5 + CCS3.

No te voy a pedir que te leas un muerto de 500 páginas como hice yo con el «CCS. The Definitive Guide», Eric A. Meyer, O'Reilly, 3ª ed., porque es tremendamente denso (yo he tardado once meses en terminar de leerlo). Pero a lo largo de Internet hay bastantes cursos, artículos y demás.