Menu flotante: Flowers & Love

Vista previa~

Para tener este lindo menu en tu bloggie debes simplemente pegar el siguiente code arriba de </body> {para ambos tipos de plantilla} y editarlo a gusto {puse cartelitos para explicar que hace que}

<style>
#fresas { /* Posision en que se encuentra */
  position:fixed;
  left: 20px;
  top: 20px;
}
/* Estilo de las imágenes */
.choco {
  background: #FF8C94; /* Color de fondo */
  padding: 4px;  /* Lo que sobresale del fondo */
  border: 2px solid #FFD3B5; /* Tamaño del borde */
  border-radius: 100px; /* redondeado */
  margin-bottom: 30px; /* Separación entre la imagen de abajo */
  width: 65px; /* Tamaño de la imagen */
}
/* Efecto en las imágenes hover */
.choco:hover {
  -webkit-animation: rumble linear 2s infinite; /* Efecto de giro */
}
#canela { /* Estilo del texto */
  position: absolute;
  background: #fcc; /* color de fondo */
  letter-spacing: 1px; /* espacio entre las letras */
  border-radius: 5px;  /* redondeado */
  border: solid 2px #FFD3B5; /* borde */
  color: #666; /* color del texto */
  font-size: 6pt; /* tamaño de la fuente */
  margin-top:30px;
  margin-left:18px;
  font-family: PF Arma Five;
  text-shadow: -1px 0 #fff, 0 1px #fff,1px 0 #fff, 0 -1px #fff; /* sombra del texto */
  padding-left: 3px;
  padding-right: 3px;
  width: 30px; /* tamaño de la cajita del texto */
  opacity: 0;
  z-index: 1000;
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
 }
@font-face {font-family: PF Arma Five;src: url('http://static.tumblr.com/hhfgqo5/6Dlmfpt2j/pf_arma_five.ttf');}
.cont {
  display: inline-block;
  text-align: center;
}
.cont:hover #canela {
  transtition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  opacity: 1;}
/* Animacion de giro */
@-webkit-keyframes rumble {
  0% {-webkit-transform: rotate(360deg)}
  20% {-webkit-transform: rotate(0deg)}
  40% {-webkit-transform: rotate(0deg)}
  60% {-webkit-transform: rotate(120deg)}
  80% {-webkit-transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg)}
}
</style>
<div id="fresas">
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div><br/>
<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>
</div>

• Para colocar el menu de forma horizontal deben borras los <br/> 
• Para agregar otro boton deben colocar el código de abajo arriba del </div> que se encuentra en negrita

<div class="cont">
<div id="canela">
Texto
</div>
<a href="#"><img class="choco" src="urldetuimagen"/></a></div>

Espero les sirva el tuto ^^ cuidado con no borrar el </div> solito del final porque armará desastre xD

Seguir leyendo

Tipos de cursores

Tipos de cursores:

{pasa tu cursor sobre los nombres para una vista previa de cada uno}

all-scroll
auto
col-resize
crosshair
default
hand
help
move
no-dropnot-allowed
pointer
progress
row-resize
text
vertical-text
wait

n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
Por url

¿Como colocarlos en tu blog?

 Para colocar cualquiera de estos cursores solo debes agregar en .body { o en a.link:hover { lo siguiente:

para los cursores comunes
cursor: nombre del cursor;

para cursores a partir de una url
cursor: url ('url del cursor'), auto;

Seguir leyendo

Efecto Css: Bordes con outline-offset

Holi~ ya me siento mucho mejor y ya no me duele nada :3 .. algún día en mi blog personal escribiré que paso conmigo.. fue algo que paso con unas hormiguitas asesinas xD .. bueno como me sentía mejor decidí traerles un pequeño y sencillo tuto de como colocar bordes como arriba con un code Css al que le llamé Outline-offset.. 

Es muy fácil solamente debes agregar el siguiente código en donde quieras colocar ese efecto {algún tittle por ejemplo}

outline-offset: -3px;
outline: 1px dashed #fff;
padding: 6px;

Y lo editas~
 outline-offset: acá va la cantidad de pixeles de la distancia en que tu borde estará del centro
{-3px -4px -5px se ira más haca el centro -2px -1px 0px se irá más hacia afuera.}

outline: el tipo, color y grosor del borde. {prometo hacer alguna entrada con todos los tipos de bordes que existen :3}

padding: evita que el contenido por ejemplo el texto se acerqué mucho al borde.

Un ejemplo de este código dentro de algún titulo puede ser este:

.h2 {
  padding: 6px;
  background: #9f2c3d;
  color: #FFF;
  font-size: 7pt;
  font-family: 'pf ronda';
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #D69774;
  outline-offset: -3px;
  outline: 1px dashed #fff;}

lalala

La linea tendría que estar centrada pero a blogger le gusta distorsionar todo ¬¬

Bueno eso es todo, {les dije no era la gran cosa xD } espero les sirva el tuto~

Seguir leyendo