La propiedad border es aquella que nos permite eso, agregar un borde a casi cualquier etiqueta. Sólo es necesario indicar el grosor, el tipo de borde y el color para que, aplicada a un elemento, este quede enmarcado en sus cuatro bordes.
Siempre insisto con lo mismo, toda etiqueta es un rectángulo así que tiene cuatro lados y la propiedad border nos da la posibilidad de identificarlos por separado:
Siempre insisto con lo mismo, toda etiqueta es un rectángulo así que tiene cuatro lados y la propiedad border nos da la posibilidad de identificarlos por separado:
border: 1px solid #FFF; agregará un borde en los cuatro border-top: 1px solid #FFF; agregará un borde arriba border-bottom: 1px solid #FFF; agregará un borde abajo border-left: 1px solid #FFF; agregará un borde a la izquierda border-right: 1px solid #FFF; agregará un borde a la derecha
El borde ocupa espacio por lo tanto, si el elemento tiene determinado ancho, cuando usamos esta propiedad, ese ancho se incrementará sin importar si hemos definido el ancho con width o no; a veces, eso crea problemas cuando se diagrama una página; por ejemplo, si tuviéramos un DIV de 400 pixeles de ancho y adentro colocamos otros dos de 200 pixeles cada uno y a esos les ponemos la propiedad float, se verán uno al lado del otro:
Pero si a uno de ellos le agregamos un borde, se irá para abajo porque no hay suficiente espacio:
Para solucionar esto, debemos aumentar el ancho del contenedor o reducir el ancho del DIV con el borde tantos pixeles como sea necesario.
Algo similar ocurre cuando se colocan bordes en elementos inline al utilizar estilos de hover; por ejemplo, si tuviéramos esta definición:
Algo similar ocurre cuando se colocan bordes en elementos inline al utilizar estilos de hover; por ejemplo, si tuviéramos esta definición:
a:hover {border:3px solid #FFF;}
al colocar el cursor encima de este enlace, todo el texto se desplazará:
Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
Esto, se soluciona colocándole un borde de color transparente al enlace yde ese modo, ya estamos "reservando" el espacio necesario:
a {border:3px solid transparent;} a:hover {border:3px solid #FFF;}
Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
Pero border no es la única propiedad que nos permite recuadrar etiquetas, hay otra que no utilzamos mucho y que hace lo mismo, se trata de la propiedad outline. Pero, en realidad, no hace lo mismo porque tiene dos caracterísiticas particulares. La primera es que no nos permite definir cuál borde agregar, siempre se agregarán los cuatro; la segunda es que no ocupa espacio así que en el ejemplo anterior, si usáramos outiline en lugar de border, el DIV no bajaría:
Teniendo entonces estas dos propiedades a nuestra disposición, podemos utilizarlas juntas para crear bordes dobles sabiendo que outline será siempre el borde exterior y border será el borde interior:
.borderdobles { border: 5px solid #FFFF00; outline: 5px solid #FF0088; padding:10px; margin:0 auto; width:300px; }
Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
Un detalle a tener en cuenta es que outline no admite curvas y redondeces así que no se ve afectado por las propiedades border-radius:
.borderdobles { border: 5px solid #FFFF00; outline: 5px solid #FF0088; padding: 10px; margin: 0 auto; width: 300px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
En algunos casos, se utiliza el borde para resaltar los enlaces; se hace para reemplazar la propiedad text-decoration:underline así que en lugar de esto:
a:hover {text-decoration: underline;}
se coloca algo así:
a:hover {border-bottom: 2px dotted red;}
ya que, border tiene muchas más opciones; de ese modo, el "subrayado" puede ser definido con otro color o con otro tipo distinto de "sólido":
Donec quis velit orci. Nam euismod enim ut rutrum luctus ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
Con CSS3 hay un tercer tipo de borde posible que son las sombras aunque este método no será aplicable en Internet Explorer ya que por ahora, en ese navegador, las sombras son tratadas de manera diferente:
.borderdobles { border: solid 5px #FFFF00; padding:10px; margin: 5px auto; width: 300px; -moz-box-shadow: 0 0 0 5px #FF0088; -webkit-box-shadow: 0 0 0 5px #FF0088; box-shadow: 0 0 0 5px #FF0088; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }
Donec quis velit orci. Nam euismod, enim ut rutrum luctus; ante ante ullamcorper metus, in aliquet justo purus non turpis! Phasellus ac justo ut nisl interdum pulvinar ut nec magna.
Si se trata de imágenes hay una alternativa extra que nos permitiría tener tres bordes; para eso, lo que haremos es establecer un padding es decir, una "separación" y luego, le colocamos un fondo de color:
.borderdobles { background-color: #883000; border: solid 5px #FFFF00; display: block; padding:5px; margin: 5px auto; -moz-box-shadow: 0 0 0 5px #FF0088; -webkit-box-shadow: 0 0 0 5px #FF0088; box-shadow: 0 0 0 5px #FF0088; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }
TABLA - FUENTES - FONTS
SOUV2
- SOUV2P.TTF - 57 KB
- SOUV2I.TTF - 59 KB
- SOUV2B.TTF - 56 KB
- SOUV2T.TTF - 56 KB
- bai_____.ttf - 46 KB
- babi____.ttf - 47 KB
- bab_____.ttf - 45 KB
- balaram_.ttf - 45 KB
- SCAGRG__.TTF - 73 KB
- SCAGI__.TTF - 71 KB
- SCAGB__.TTF - 68 KB
- inbenr11.ttf - 64 KB
- inbeno11.ttf - 12 KB
- inbeni11.ttf - 12 KB
- inbenb11.ttf - 66 KB
- indevr20.ttf - 53 KB
- Greek font: BibliaLS Normal
- Greek font: BibliaLS Bold
- Greek font: BibliaLS Bold Italic
- Greek font: BibliaLS Italic
- Hebrew font: Ezra SIL
- Hebrew font: Ezra SIL SR
Disculpen las Molestias
TABLA - INFORMÁTICA - UTILIDADES
- 2011
- enero 2011 (25 posts)
- Oloblogger
- Vagabundia
- CSS3 GENERATOR - OLOBLOGGER
- HAGA SU PROPIA MUSICA
- Vagabundia
- 100 packs de íconos surtidos - Vagabundia
- tablas en css
- Curvas y redondeces - Vagabundia
- Vagabundia
- Oloblogger
- Vagabundia
- 3.9. The background-size’ property - w3.org
- Patterns con CSS3
- Oloblogger
- Usar JSON para mostrar Twitter - Vagabundia
- Sliderman: Un script para hacer sliders sin librer...
- Thought of you - Vagabundia
- Efecto cinta adhesiva en imágenes - Oloblogger
- Bloggers - Vagabundia
- BigImg: Otra forma de insertar imágenes gigantes -...
- Vagabundia: : “Los parámetros de los feeds de Blog...
- Alojar scripts para Blogger Edición rápida - OLOBL...
- Plugins sociales aleatorios para Facebook
- Fire - shadow
- Neon - shadow
- 2010
- diciembre
- efecto de linterna de Zachary Johnson en www.zachs...
- Shadow - Sombreados en los Textos - Vagabundia
- 4. DICCIONARIO BÍBLICO ADVENTISTA DEL SÉPTIMO DÍA
- 3. DICCIONARIO BÍBLICO ADVENTISTA DEL SÉPTIMO DÍA
- 2. DICCIONARIO BÍBLICO ADVENTISTA DEL SÉPTIMO DÍA
- 3. DICCIONARIO BÍBLICO ADVENTISTA DEL SÉPTIMO DÍA
- octubre
- septiembre
- julio
- junio
- mayo
- HTML ASCII Reference - The ASCII Character Set
- Typing Arabic and Farsi Numerals
- Smoothing Screen Fonts
- Outlook 2000
- Outlook Express 5
- Netscape Messenger 4.7
- Netscape
- Internet Explorer
- Windows XP: Language Settings
- Windows 2000: Language Settings
- General Unicode Information
- General Farsi Unicode Information
- Unicode in Internet Explorer 5, 5.5 and 6
- Unicode in Firefox for Windows
- UNICODE - Internet Explorer
- abril
- marzo
- Porque no me abre el disco local c
- Glosario Informático (H-Z)
- Glosario Informático (C-G)
- Glosario Informático (A-B)
- febrero
- Direcciones about: FIREFOX
- ASCII codes table - Format of standard characters
- 24 Character entity references in HTML 4
- Table of character entity references in HTML 4
- HTML Codes
- Index of Elements - Html
- ISO 639. Code for the representation of the names ...
- ASCII stands for American Standard Code
- enero
- 2009
- CUADRO GENERAL CONTENIDO MITOLOGÍA Y RELIGIÓN
- MITOLOGÍA HINDÚ
- Conceptos Hinduistas (1428)SC
- Category:Hindu (mythology) (3256)SC
- Category:Hindu mythology (3270)SC
- Categoría:Mitología hindú (3288)SC (indice)
- Categoría:Mitología hindú (videos) (3289)SC
- Conceptos Hinduista (A - G) SK y SC (videos) (3294)SC
- Conceptos Hinduistas (2919)SK · (2592)SK
- JUDAISMO
- VAISHNAVISMO
- Ärî Garga-Samhita
- Oraciones Selectas al Señor Supremo
- Devotees Vaishnavas
- Dandavat pranams - All glories to Srila Prabhupada
- Hari Katha
- SWAMIS VAISHNAVAS
- DEVOTOS VAISHNAVAS - FACEBOOK
- Santos Católicos
- EGIPTO
- Archivo Cervantes
- Sivananda Yoga
- Neale Donald Walsch
- ENCICLOPEDIA - INDICE
No hay comentarios:
Publicar un comentario