Marca de agua

CF

En esta ocasión le vengo a traer una forma de crear tu propia marca de agua para que le agregue algo màs a tus publicaciones estáticas o de lo que se te ocurra.
Este es un claro ejemplo de como funciona: como puedes darte cuenta en la parte trasera de este texto se muestra la marca de agua hecha con este procedimiento y que la verdad se ve muy bien como fondo en un reglamento por ejemplo, y que pongas este texto como marca de agua con tu siglas.
Es solo una idea de lo que pudieras hacer con esta utilidad que la verdad funciona muy bien y lo mejor es que se hace con css

Leer completo

Boton Css con efecto

Debo decir que la verdad este botón es de los que más me encanta porque me costó un buen entender cómo hacerlo y no recuerdo de donde había obtenido la explicación sobre el tipo de códigos que está escribiendo pero la verdad siento envidia de mi mismo XD la verdad porque me gusta este botón pero no sé donde se vería bien ponerlo pero de todos modos les regalo el código de los estilos para que ustedes puedan implementarlo en sus sitios web y claro respetando como siempre los derechos sobre la obra vale?.
Bueno la manera de funcionar de el botón ya en acción es como en el siguiente ejemplo:

Presióname :3

Los estilos son los siguientes:

.btn span {
display: inline-block;
padding: 10px 20px;
background: #3194c6;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
background: #3194c6;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
background: #3194c6;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background: -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
background: #3194c6;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background: -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
}

.btn:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
.btn { display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-webkit-transition: -webkit-box-shadow .2s ease-in-out;
-moz-transition: -moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
}

.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
background: #3194c6;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background: -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}

Y se implementa con:

<a class="btn"><span><font color="white">Texto del botón</font></span></a>

Leer completo

Borde en imagen estilo polaroid

Imagen de ejemplo

A muchos como a mi se que nos gusta el diseño en todo lo que hacemos, sea muy simple o muy elaborado pero bien, de hecho fue así como me di a la búsqueda sobre formas de darle un nuevo estilo a mis imágenes que ponía en mi pagina de ow donde una imagen era la cabecera de cada post y fue asì como encontré este estilo que la verdad me gustó mucho ya que gracias a esto logré hacer que se viera mas elegante cada entrada y que la imagen tuviera algo que nos representara como por ejemplo el color corporativo que tengo para Ow

El código es el sig.:

<div><u><strike><img height="300" src="URL DE IMAGEN" style="border-color: rgb(190, 107, 158); border-style: solid; border-width: 25px 25px 80px;" width="300" /></strike></u><div style="font-size: 110%; font-weight: bold; margin-top: -70px;">
<span style="color: white;">TEXTO PIE DE FOTO</span></div></div>

Lo único que tendrías que modificar es:
- El tamaño para adaptarlo al de la imagen
- Los colores según tu gusto
- El texto del pìè de la imagen
- Y lo más importante la url de tu imàgen

Leer completo