Hola Soy @boca_97 y en este post les voy a tratar de enseñarles o mostrarles mejor dicho,como dar estilo al tooltip que creamos en el post anterior con css,También vamos a crear fácilmente un tooltip pero en photoshop,bueno antes de empezar quiero decirles que cualquier comentario fuera de lugar va a ser borrado y dependiendo la gravedad borrado...ok empecemos con el css y html
Bueno antes de empezar quiero decirles que tienen que pasar por mi anterior post [] ok si ya pasaron bueno vamos a proceder con el tutorial ...Bueno obviamente lo primero que hay que poner son los elementos básicos de html y la etiqueta para poner el tooltip (todo eso lo explico en el post anterior)
ANTES DE QUE PREGUNTEN USO BLOC DE NOTAS PORQUE NO TENIA GANAS DE ABRIR OTRO EDITOR DE TEXTO USTEDES USEN CUALQUIERA DA IGUAL 
Ok después de hacer eso vamos a guardar el archivo como yo estoy usando bloc de notas me voy a ir a Archivo - Guardar Como y cuando lo guarde es Importante! que se guarde con la extensión de .html el nombre no importa [Por ahora: digo esto porque al momento de subir un archivo al servidor el archivo por defecto tiene que ser index.html
Bueno ahora vamos a poner los elementos "básicos" del tooltip en css no? como enlazar un archivo aparte en css ya lo explique ok ... bueno así quedaría un tooltip con el efecto "Por defecto"
como enlazar un archivo aparte en css ya lo explique ok ... bueno así quedaría un tooltip con el efecto "Por defecto" bueno ahora a darle tu propio estilo para eso hay que tener conocimiento de CSS para eso les voy a intentar dar unos tips (nose si se escribe así)
Opacidad:
RGB (red, green, blue, es decir rojo, verde, azul) es un modelo que permite obtener cualquier color a partir de la combinación de esos tres colores. Los que conocéis CSS estáis habituados a especificar un color por su valor hexadecimal, por ejemplo #000000 para el negro. Pero todo color tiene también su valor RGB, que en el caso del negro es R:0 G:0 B:0. En el extremo contrario estaría el blanco que sería R:255 G:255 B:255.
Hasta ahora podíamos definir un color no sólo mediante su valor hexadecimal, sino también según sus valores RGB. Por ejemplo. para poner un fondo negro a un div:
div {
background: rgb(0, 0, 0);
width: 50px;
height: 50px;
}
Resultado:
Pero gracias a CSS3 podemos incluir un valor más para cada color: su opacidad. Entonces hablaríamos de RGBA, siendo A=Alpha, que nos permitirá especificar la opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos:
div {
background: rgba(0, 0, 0, .5);
width: 50px;
height: 50px;
}
Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vería.
Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo:
Degradado:
La función de gradiente de CSS fue presentado por el Webkit por cerca de dos años,no hay mucho que decir no fue muy usada ya que no tenia compatibilidad con los demás navegadores pero con firefox 3.6 apoyando ahora se puede usar en la mayoría de los navegadores poniendo sus respectivas extensiones ej:
div{
height: 130px;
width: 630px;
background: -webkit-linear-gradient(orange, pink);
background: -moz-linear-gradient(orange, pink);
background: -o-linear-gradient(orange, pink);
}
Radial:
div{
background: -webkit-radial-gradient(#0f0, #06f);
background: -moz-radial-gradient(#0f0, #06f);
border: 1px solid #333;
height: 200px;
width: 250px;
}
Un poco mas de información:
Para que tengan una idea mas clara busquen manuales o tutoriales en vídeo de css3
Bueno para empezar esta yapa bien fácil hay que crear un documento de las dimensiones que quieran yo voy a crear uno de 120 x 120 px
Después con la herramienta de rectángulo vamos a crear uno
después de eso vamos a crear una nueva capa después a buscar en las formas personalizadas algo que sea parecido a un triangulo y hacemos un triangulo al lado
después vamos a apretar CTRL+T y nos vamos a los controles de arriba acá:
y tal como muestra la imagen le damos a -90 y va a quedar mirando hacia la izquierda:
Si quieren que quede mirando hacia el otro lado solo le ponen 90 y así pueden ir jugando con las posiciones ahora solo nos queda acomodarlo eso se hace con esta herramienta mover que es esta: que es la segunda herramienta de PS, bueno cuando Hagas todo eso nos debería de quedar así:
No explico como darle estilo porque css no es lo mismo que photoshop osea photoshop es mas fácil
Desde ya gracias por pasar si les gusto el post recomienden