• Publicidad

Bordes de tabla con imagen

Preguntas y comentarios relacionadas con HTML y CSS.

Bordes de tabla con imagen

Notapor BigBear » 2014-09-16 06:43 @321

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?
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Publicidad

Re: Bordes de tabla con imagen

Notapor explorer » 2014-09-16 08:38 @401

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.002 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
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Bordes de tabla con imagen

Notapor BigBear » 2014-09-16 09:31 @438

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.
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Re: Bordes de tabla con imagen

Notapor explorer » 2014-09-16 18:25 @809

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.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España


Volver a HTML

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados