martes, 14 de agosto de 2012

Bordes para Blog

  1. Primero, copia los códigos HTML con el ratón:

  2. <div style="padding: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 20px; border: 1px solid rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>


  3. Segundo, pégalos en nueva entrada de Blog (configurado en HTML, OjO).
  4. Así se verá reconfigurando a REDACTAR, tu nueva entrada al Blog (antes de Publicar, OjO):

  5. COPIA PEGA lo tuyo (blog, texto, etc) ACÁ

  6. Ya puedes reemplazar el texto "COPIA PEGA lo tuyo (blog, texto, etc) ACÁ", en HTML o en REDACTAR, según tu preferencia.
  7. Y NO te olvides de PUBLICARLO (SAVE)

COLORES
    En el código rgb(255, 128, 0), puedes cambiar el color del borde, cambiando cada grupo de números (desde CERO hasta 255). Por ejemplo:

  • el Rojo Brillante sería rgb(255, 0, 0,) para verse así:
    <div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 20px; border: 1px solid rgb(255, 0, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ
    </div>

  • el Verde Brillante sería rgb(0, 255, 0,) para verse así:
    <div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 20px; border: 1px solid rgb(0, 255, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ
    </div>

  • el Azul Brillante sería rgb(0, 0, 255,) para verse así:
    <div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 20px; border: 1px solid rgb(0, 0, 255); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ
    </div>

  • el Blanco Brillante sería rgb(255, 255, 255,) para verse así:
    <div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 15px; border: 1px solid rgb(255, 255, 255); padding: 16px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ
    </div>

ESTiLOS
  1. PUNTEADO:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px dotted rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  2. DiSCONTíNUO:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px dashed rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  3. SÓLiDO:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px solid rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  4. DOBLE:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px double rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  5. RANURA:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px groove rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  6. MOLDURA:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px ridge rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  7. HUNDiDO:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px inset rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

  8. RESALTADO:
    <div style="-goog-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 4px outset rgb(255, 128, 0); padding: 15px;">
    COPIA PEGA lo tuyo <i>(blog, texto, etc)</i> ACÁ </div>

No hay comentarios.:

Publicar un comentario

BiENVENiDO, estás en tu casa.