Menu horizontal desplegable con CSSIII

Se trata de un tutorial realizado por Catalin Rosu en donde ha creado un menú horizontal desplegable con CSS3, sin ningún tipo de código Javascript ni tampoco imágenes.
Menú horizontal desplegable con CSS3
Ejemplo real:

Para hacer este bonito menú te transladas a edición de plantilla y buscas con Ctrl+F la etiqueta ]]></b:skin> y justo encima colocas el CSS:

/* Menú en general */
#menu
{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a
{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
    color: #fafafa;
}

*html #menu li a:hover 
{
    color: #fafafa;
}

#menu li:hover > ul
{
    display: block;
}

/* Submenús */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a
{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a 
{
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a 
{
    height: 10px;
    width: 150px;
}

#menu ul a:hover
{
    background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Borrar elementos flotantes */
#menu:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu { zoom: 1; } 
*:first-child+html #menu { zoom: 1; }

Ahora colocas este HTML como elemento HTML/Javascript y listo:

<ul id="menu">
        <li><a href="#">Titulo 1</a></li>
        <li><a href="#">Titulo 2</a>
                <ul>
                      <li><a href="#">Subtitulo 1</a></li>
                      <li><a href="#">Subtitulo 2</a></li>
                      <li><a href="#">Subtitulo 3</a></li>
                      <li><a href="#">Subtitulo 4</a>
                </ul>
        </li>
        <li><a href="#">Titulo 3</a></li>
        <li><a href="#">Titulo 4</a></li>
</ul>

Puedes ir agregando las listas de los títulos y subtítulos de esta forma:

<li><a href="#">Titulo 3</a>
         <ul>
               <li><a href="#">Subtitulo 1</a></li>
               <li><a href="#">Subtitulo 2</a></li>
               <li><a href="#">Subtitulo 3</a></li>
               <li><a href="#">Subtitulo 4</a></li>
         </ul>
</li>
<li><a href="#">Titulo 4</a></li>

Como se puede ver, la estructura del HTML es muy fácil de entender. Espero y lo puedas aplicar en tu blog.

p1

Lista de nueve editores de fotos en linea

Si necesitas editar tus fotografias este es el post indicado para encontrar una recopilacion de los mejores editores de fotos en linea.
Editores de fotos en línea

Aquí la lista:

Pixlr
iPiccy
Splashup
Citrify
Foto flexer
Sumo paint
Drpic
Pixer
Image editor

Me cuentas cual es el editor que mas te a sido útil.

p1

Tablas con CSS efecto IIID

En un pots anterior había mostrado los diferentes tipos de tablas que se pueden obtener con HTML, ahora te quiero mostrar esas mismas tablas pero incluyendo un poco de CSS para obtener un efecto tipo 3D.
Tablas con CSS efecto 3D


Demostración

El CSS colócalo arriba de ]]></b:skin>

/* Tabla en general */ 
table{
background-color: #BBB; /* Color de fondo */
color: #FFFFFF; /* Color de texto */
font-family: Helvetica; /* Tipo de letra */
font-size: 16px; /* Tamaño de letra */
width: 800px;/* Ancho */
height: 500px;/* Alto */
padding: 20px; /* Expansión */ 
border-top:8px solid #F4F4F4; /* Borde de arriba */
border-left:8px solid #F4F4F4; /* Borde de izquierda */
border-right:8px solid #CCC; /* Borde de derecha */
border-bottom:8px solid #CCC; /* Borde de abajo */
}
th{
border-top:20px solid #CCC; /* Borde de arriba */
border-left:20px solid #CCC; /* Borde de izquierda */
border-right:20px solid #F4F4F4; /* Borde de derecha */
border-bottom:20px solid #F4F4F4;/* Borde de abajo */
}
th:hover{
border-top:20px solid #F4F4F4; /* Borde de arriba */
border-left:20px solid #F4F4F4; /* Borde de izquierda */
border-right:20px solid #CCC; /* Borde de derecha */
border-bottom:20px solid #CCC;/* Borde de abajo */
}

/* Un enlace */
a{
font-size: 10px; /* Tamaño de letra */
text-decoration: underline;/* Texto subrayado */
}
a:hover{
text-decoration: none; /* Texto sin subrayado */
}

Y el HTML colócalo en una entrada o como Elemento HTML/Javascript

<!— Tabla 1 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr>
</table>
</div>

<!— Tabla 2 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 3 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 4 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th colspan="3">Titulo</th></tr>
<tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 5-->

<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="5">Mensaje</th></tr>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 6 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
</table>
</div>

<!— Tabla 7 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

p1

Generador de banners en linea

Generador de banners en lineaBannerBreak es un sitio en donde podrás obtener diferentes tipos de banners para el diseño de tu web o blog. Tiene varias opciones para personalizarlos como es fuente del texto, tamaño, color, degradados, etc.



También podrás obtener el código que se encuentra del lado derecho.



Ejemplos:










p1

Parrafos con HTML

A veces aunque casi nunca, tratamos de personalizar nuestros párrafos de las entradas dándoles un toque distinto de acuerdo a nuestras necesidades.




Para ello si tienes pensado hacerlo, te presento los siguientes ejemplos:

Ejemplo 1:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

En este ejemplo como ves, se justifica el párrafo.

<div style="word-spacing: 30px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Si necesitas distanciar un poco mas o un poco menos las palabras, solo varía la cifra del parámetro.


Ejemplo 2:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ahora, las palabras del párrafo son las que se justifican.

<div style="letter-spacing: 5px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Al igual que en el ejemplo anterior, si quieres separar las letras, varía la cifra del parámetro.


Ejemplo 3:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

y por ultimo si observas, las palabras de este párrafo se encuentran amontonadas por lo mismo que los renglones están unidos.

<div style="line-height:15px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Si deseas juntar o separar los renglones, haces lo mismo variando la cifra.


Por ultimo para terminar, un párrafo combinado.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<div style="word-spacing: 30px; letter-spacing: 5px; line-height: 15px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

Eso es todo por hoy pero por supuesto que nos vemos en una nueva próxima entrada.

p1

Patrones de texturas

Patrones de texturasSubtle patterns es un sitio que te brinda una galería de 72 patterns o patrones de texturas de alta calidad y de uso gratuito para proyectos comerciales y de impresión.




Puedes ver unas muestras aquí mismo:
















p1

Realizar notas con las etiquetas fieldset y legend

Las etiquetas <fieldset> y <legend> son utiles para la creación de recuadros sencillos que suelen usarse para enmarcar una nota o un texto que querramos resaltar.



Por ejemplo con la etiqueta <fieldset> obtenemos:
Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar



Ahora fusionando la etiqueta <fieldset> con <legend> obtenemos estos ejemplos:

TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar



Código del primer ejemplo:

<!-- Recuadro en general -->
<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

Código del segundo ejemplo:

<!-- Recuadro en general -->
<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<!-- Titulo -->
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>
<!-- Fin del titulo -->
Aquí el texto que quieres enmarcar 
</fieldset>

Recuadro en general y titulo:

0
Alineación del titulo
0
Color de fondo
0
Color de texto
0
Texto en negrita
0
Alineación de texto
0
Ancho
0
Borde redondeado
0
Sombra



Son sencillos pero ojala y te sean útiles estos ejemplos:

Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border-left:2px solid #FF0000; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border-left:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>



TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-left:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='right' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border-left:2px solid #FF0000; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='center' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>



Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar

Aquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>



TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar

TituloAquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='center' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='right' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

Nos vemos en la próxima entrada.

p1

Fondos de pantalla, relojes, calendarios y juegos interactivos

Fondos de pantalla, relojes, calendariosArt digital design es un sitio que posee en formato SWF (flash), fondos de pantalla interactivos o animados para el escritorio o sitio web así como relojes, calendarios, juegos, entre otros.
Cada fondo de pantalla, reloj, etc. Incluye un código para insertarlo en tu blog (como elemento HTML/Javascript o en una entrada).
<object type="application/x-shockwave-flash" data="http://www.artdigitaldesign.com/desktop-animated-wallpaper/?movies/desktop-calendars/football-play-time.swf" width="800" height="600"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="800" height="600"><param name="movie" value="http://www.artdigitaldesign.com/desktop-animated-wallpaper/?movies/desktop-calendars/football-play-time.swf" /><param name="loop" value="true" /><param name="menu" value="false" /><p><a href="http://www.artdigitaldesign.com/desktop-animated-wallpaper/?multimedia/desktop-calendars/football-play-time.html">Desktop calendars, themes, Football play Time, ArtDigitalDesign.com</a></p></object>

0
URL del archivo flash
0
Anchura
0
Altura

Esto es algo de lo que se puede encontrar en el sitio:

Tiempo de jugar fútbol (calendario):

Reloj mundial en 3D (reloj):

Efecto de agua realista (fondo de pantalla):

p1

Fusion entre dibujo y la fotografia

Ben Heine es un artista autodidacta que realizo una estupenda serie de imágenes mezcladas entre dos disciplinas como son el: dibujo y la fotografía, mezcla de imaginación y realidad.

Fusion entre dibujo y la fotografía

A continuación unos ejemplos:

900x599px


900x593px


1000x1019px


1000x704px


602x900px


950x632px


850x829px


900x599px


1000x666px


1000x727px


850x723px


1000x932px


1000x691px

p1

Tooltip brillante hecho con CSSIII

Blizaga, ha creado un tutorial sobre como hacer un tooltip brillante sin ningun efecto de hover.
El ejemplo tiene algunas características interesantes, tales como bordes redondeados, un icono y una especie de punta de flecha.

Imagen:
Tooltip brillante hecho con CSS

Ejemplo real:
?

Dentro de esta burbuja va incluido el mensaje deseado.

Y este es un ejemplo de un párrafo normal.





Para llevarlo a cabo, vas a tu plantilla y con Ctrl+F buscas ]]></b:skin> y justo encima colocas el CSS:

/* Burbuja en general */
.box {
    position: relative; /* Permitir que los elementos situados dentro de la burbuja */
    width: 280px; /* Ancho */
    height: 100px; /* Alto */
    padding: 10px; /* Expansión */
    background: #bfdcff; /* Color de fondo */
    border: 3px solid #76b3ff; /* Borde */
    -moz-border-radius: 10px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 10px; /* Redondeados para navegadores WebKit */
    border-radius: 10px; /* Redondeada */
}

/* Burbuja mitad hacia arriba*/
.box .highlight {
    position: absolute; /* Posición absoluta con respecto a la caja */
    width: 100%; /* Anchura 100% de la caja */
    padding: 3px; /* Agrega 3px de la anchura (100% + 3px)*/
    height: 60px;
    top: -3px; /* Posición sobre el borde izquierdo de la caja */
    left: -3px; /* Posición sobre el borde superior de la caja */
    background: white;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20); /* Opacidad para IE */
    opacity: .2; /* Opacidad para otros navegadores */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; /* Borde izquierdo redondeado */
    border-top-right-radius: 10px; /* Borde derecho redondeado */
}

/* Mensaje dentro de la burbuja */
.box h2 {
    position: relative; /* Lugar por encima de los otros elementos */
    margin: 0 0 0 62px; /* Margen */
    color: #555555; /* Color */
    font: bold 20px arial; /* Tipo de letra */
}

/* Párrafo */
.box p {
    margin-top: 50px; /* Margen hacia abajo */
    font: 15px "Arial"; /* Tipo de letra */
}

/* Signo de interrogación */
.box .icon {
    float: left; /* Alineado en general a la izquierda */
    border: 1px solid #76b3ff; /* Borde */
    height: 50px; /* Alto */
    width: 50px; /* Ancho */
    background: white; /* Color de fondo */ 
    text-align: center; /* Signo alineado */
    color: #555555; /* Color */
    font: bold 40px/40px "times new roman"; /* Tipo de letra*/
    -moz-border-radius: 30px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 30px; /* Redondeados para navegadores WebKit */
    border-radius: 30px; /* Redondeada */
}

/* Triángulo */
.box .arrow, .box .arrow_overlay {
    position: absolute; /* Posición absoluta con respecto al triángulo */
    width: 0px; /* Ancho */
    height: 0px; /* Alto */
    bottom: -15px; /* 15px posición por debajo del fondo de la caja*/
    right: 40px; /* Posición 40px por la derecha de la caja */
    border-top: 15px solid #76b3ff; /* El triángulo */
    border-right: 15px solid transparent; /* Ancho de la derecha */
    border-left: 15px solid transparent; /* Ancho de la izquierda */
}
.box .arrow_overlay {
    top: -15px; /* Posición en relación con la flecha */
    left: -10px; /* Posición en relación con la flecha */
    border-top: 10px solid #bfdcff; /* Más pequeño triángulo */
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}


Ya que colocaste el CSS, ahora vas elementos HTML/Javascript o en una entrada para colocar el HTML y listo:

<div class="box"> 
<div class="icon">?</div> 
<div class="highlight"></div> 
<div class="arrow"><div class="arrow_overlay"></div></div> 
<h2>Dentro de esta burbuja va incluido el mensaje deseado.</h2><p>Y este es un ejemplo de un párrafo normal.</p></div>

p1
p1
                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000