29 de septiembre de 2012

BAT MAN

Volviendo a uno de los temas de este blog y teniendo en cuenta que hace meses que no traigo nada "nuevo",  dedicaré esta entrada a un juego que seguro que al menos os sonará. Es famoso por su modelo de juego (consistente en la recolección de objetos para poder acabarlo) y su protagonista, que aumento la popularidad del juego y tenia un aspecto muy gracioso con unos sprites de BatMan que recuerdan a los actores vestidos con leotardos y turbopackets de las series "gore" de la antigua televisión. Esta fue la primera aparición del murciélago más famoso en los videojuegos.


También es famoso por su perspectiva isométrica, si bien no fue el primero, sí que está en medio de dos de los grandes de esta perspectiva:
  1. Knight Lore: su gran inspiración, creado por Ultimate Play The Game, que luego será conocida como Rare, y que tendría otros éxitos en Nintendo con Donkey Kong Country o GoldenEye 007 hasta que fue absorbida por Microsoft. Desde mi punto de vista éste fue el comienzo del fin del estudio de desarrollo que ha traído grandes ideas a los videojuegos.
  2. Head Over Heels: de los mismos creadores de BatMan utilizando un motor de juego modificado de éste para que pudieran jugar dos jugadores y que sin duda todos debéis conocer.
Fue creado por Jon Ritman y Bernie Drummond para Ocean Software y publicado en 1986.

La finalidad es reconstruir nuestra nave (dividida en nueve fragmentos) y rescatar a nuestro amigo Robin que ha sido raptado por el Joker. Para ello tendremos que encontrar las bat-botas, el bat-cinturón, la bat-bolsa y el bat-impulsor, que mejorarán nuestros movimientos y nos permitirán terminar nuestra misión. Por el camino nos encontraremos con todo tipo de peligros en un laberinto de más de 150 habitaciones.

Aquí dejo el juego rescatado desde World of Spectrum en su versión de 128K:

Your browser doesn't support Java or you turned it off
Please upgrade to Netscape v4.0+ or Internet Explorer v4.0+

También hay un remake para Windows en RetroSpec que os podéis descargar aquí.

Se que es difícil pasarse el juego pero, antes de cortaros las venas, podéis echar un vistazo a este fantástico vídeo de un tío pasándose el juego en poco mas de media hora. ¡Un autentico máquina!



Espero que disfrutéis del juego, una joya del software retro, que puede atraparos peligrosamente y terminar jugando un rato más largo de lo que habíais pensado inicialmente cuando sólo queríais echarle un vistazo rápido.

Un saludo.

22 de septiembre de 2012

VLC: Grabar vídeo de una ventana

Una vez mas me reconozco amante del software libre, especialmente de algunos proyectos realmente buenos como ApacheOpenOfficePostgreSQL, GitWordPress, GIMPAudacity/Ardour, etc... y hoy hablaré sobre uno de estos: VLC Media Player.


VLC es conocido por ser gratis, ligero y reproducir prácticamente todo lo que le echen sin tener que descargar ningún códec. Pero lo mejor es que tiene tantas sorpresas esperándonos que lo hacen aún mejor.

Hoy voy a deciros como podéis grabar en vídeo una ventana de vuestro escritorio y codificarlo a un formato que podáis distribuir o subir a YouTube. Es algo que necesitaba para no tener que comprarme una capturadora y quería que fuese con una solución de código abierto para saber qué estoy descargándome realmente.

He de decir que probé otras soluciones gratuitas y no gratuitas. Algunas me daban unos resultados pobres, y otras no me daban mejores resultados que lo que conseguí finalmente con mi amigo VLC.

Todo esto está hecho sobre Windows 7 que es donde necesitaba hacer la captura en ese momento.

Empecemos. VLC tiene una opción que es "Abrir volcado de red...". Se puede usar para recibir o para emitir. De hecho, para mí es el mejor método para guardar en un archivo un vídeo de YouTube:

  1. Elegís abrir volcado de red (podéis usar el atajo de teclado Ctrl + N).

  2. Ponéis la dirección de Internet (URL) del vídeo.
  3. Donde pone reproducir le dais a la flecha y elegís "Convertir"

  4. Indicáis el destino del archivo con el vídeo grabado y la codificación que queréis (si sólo deseáis el audio podéis elegir un fichero .ogg por ejemplo, escogiendo la codificación "Audio - Vorbis (OGG)")

  5. Si queréis ver el vídeo mientras se graba podéis marcar la casilla que pone "Mostrar Salida". Yo no lo recomiendo ya que, si no os muestra la salida en tiempo real, puede crear el archivo mas rápido. Sólo lo veo útil en caso de querer cortar la grabación antes de que termine, así podremos elegir el momento de darle a stop y dejar de grabar.

Pues bien, si ponéis en volcado de red la URL "screen://" conseguiréis acceder al vídeo de vuestro escritorio (también se consigue escogiendo el "Modo de Captura" "Escritorio" desde la opción de "Abrir dispositivo de captura..."). Siguiendo los mismo pasos anteriores podéis convertir el vídeo a vuestro formato favorito (no así el audio, ya que es una señal únicamente de vídeo).

Hasta aquí nada que no podáis encontrar en muchos otros blog. Lo que me resulto realmente útil es capturar una parte de ese escritorio (la ventana donde estaba sucediendo lo que quería guardar). La forma de hacerlo es la siguiente:
  1. Vais a "Herramientas/Preferencias".
  2. Tenéis que abrir las opciones avanzadas y depende de la versión que tengáis. Yo tengo la 2.0, donde tendréis que buscar "Mostrar ajustes" y seleccionar "Todo".
  3. Entre todas esas opciones vamos a "Entrada-Códecs/Módulos de Acceso/Pantalla".
  4. En esta ficha podremos indicar:
    1. Posición en pixels de la esquina superior izquierda de la región de pantalla que vamos a capturar.
    2. Tamaño en pixels de la región a capturar.
    3. Si queremos capturar el ratón también.
    4. Tasa frames por segundo a capturar.

De esta forma podréis capturar en vídeo una parte de vuestro escritorio y codificarla directamente en un archivo de vídeo de la misma forma que haríais con un vídeo de You Tube o vuestra WebCam.

Por otra parte dependiendo de qué estemos grabando puede que estéis tirando mucho de vuestra CPU, y si es un gameplay o algo así puede que no tengáis los resultados esperados. En ese caso es mejor que en vez de elegir la opción "Convertir" dejéis "Reproducir" y abráis la vista de controles avanzados en "Ver/Controles Avanzados". Ahora podréis ver el botón rojo de grabar. Desde ese momento podéis pulsar grabar para comenzar la captura y volverle a dar para pararla. Vais a la carpeta donde tengáis configurado el volcado de archivos y ahí estará el vídeo en bruto. Ahora podéis abrirlo y convertirlo en un formato comprimido que pese menos.

Espero que haya sido de vuestro interés.

PD: Esto es lo que usé para hacer los tutoriales de Skyrim Xtreme XD.

9 de septiembre de 2012

Skyrim: Custom Extreme, crea tu máquina de matar | make your killing machine

Estas vacaciones tenía ganas de darle caña al ordenador con algún juego, concretamente con The Elder Scrolls V: Skyrim. Hace poco sus desarrolladores han sacado la primera expansión: Dawnguard donde le dan mas protagonismo a los vampiros, etc... pero no vengo a hablaros de eso.

Como quería poner en orden un poco todos mis personajes y no me acordaba cómo los había dejado después de navidades, me puse a ver algunas guías o trucos para hacerme la vida más fácil. Yo tengo el juego en PC y prefería usar la consola antes que aprovecharme de fallos del juego para ahorrarme tiempo en conseguir el personaje como quiero (porque estoy harto de farmear ingredientes y enseñar lo mismo a todos los personajes una y otra vez mientras hago muchas misiones repetidas)


Consola

Usando la guía de comandos de consola que aparece en una de las wikis sobre el juego (yo use esta), me puse a hacer unos cuantos experimentos, y descubrí que configurando el personaje con unos perks/ventajas y poderes determinados podía hacerlo más poderoso y flexible de lo que viene con el juego. Utilizando el comando "bat", que permite ejecutar scripts por lotes contenidos en ficheros de texto, decidí ir haciendo unos que consigan lo siguiente:
  1. Subir todas las habilidades a 100
  2. Colocar los perks estratégicamente (ver apartado alternar perks)
  3. Hacer olvidar los perks que "estorban" (ver apartado alternar perks)
  4. Enseñar los hechizos más útiles o poderosos (desde mi punto de vista es mejor que tenerlos todos y buscar los buenos entre la morralla)
  5. Conseguir los gritos de dragón más atractivos con sus tres palabras
  6. Otorgar los poderes más útiles independientemente de la raza del personaje, incluyendo los de misiones o los propios del vampirismo o la licantropía
  7. Obtener los objetos necesarios para crear un equipo de fabricación/crafteo cojonudo y poder utilizar las armas y armaduras que más me gustan (y no las que me obliga a usar el juego si quiero las mejores estadísticas). Esto implica:
    1. Equipo para desencantar y aprender esos encantamientos
    2. Materiales para encantar, hacer pociones y mejorar armas y armaduras
    3. Las armas y armaduras que más me gustan
    4. Para redondear la jugada ¿qué tal 10.000 en oro, diez pociones de recuperar la salud completa y una ganzúa?
Todo esto al final son una serie de archivos de texto donde guardo todos los scripts. Están divididos para que se pueda llamar un script en particular sin que tenga que llamarlos a todos (por ejemplo sólo colocarme los perks o sólo darme el equipo de acero). Os lo dejo en este enlace. Los debéis copiar a la carpeta donde esta el ejecutable de Skyrim (en Windows 7 normalmente C:\Program Files (x86)\The Elder Scrolls V Skyrim). Todos los scripts que queráis llamar desde la consola tienen que estar en esa carpeta.

Están preparados para hacer lo que yo prefiero y lo que muestro en la guía en vídeo que he subido. Si queréis modificarlos lo más cómodo es abrir el fichero paso1.txt y "comentar o no" las lineas de llamada a otros script. Como ejemplo, si queréis tener la armadura de escamas de dragón en vez de la armadura de acero, comentáis la linea "bat armaduraacero" poniendo un ';' delante, y lo quitáis de la línea "bat armaduraescamasdragon".

Aplicando todo a un personaje

Con los scripts copiados en la carpeta del juego, cogéis el personaje que prefiráis y hacéis lo siguiente (la consola de juego se abre pulsando la tecla 'º', la que está a la izquierda del '1'):
  1. Deshaceros de todas vuestras pertenencias. Se hace con el comando "player.removeallitems" (esto no eliminará los objetos de misiones)
  2. Ir a una estancia especial preparada para todas las operaciones que debemos hacer (disponiendo de armarios con todos los objetos del juego y de fragua, banco de trabajo, mesa de alquimia, encantador arcano, etc...). Esto se consigue con el comando "coc qasmoke"
  3. Una vez allí ejecutar el primer script con "bat paso1". Si las líneas anteriores las queréis hacer, también podéis añadirlas al script paso1.txt.
  4. Subir los niveles que haya podido ganar. Recomiendo pasar de magia, poner unos 300 puntos de aguante y el resto a salud
  5. NO MODIFICAR LAS VENTAJAS. Esto lo pongo en mayúsculas por si alguno siente la tentación de aumentarse perks que vea con un solo punto. Esto es parte del truco. Luego lo explico en el apartado de alternar perks.
  6. Crear el equipo de alquimia hasta poder conseguir una mejora del +81% en cada pieza que permita el encantamiento de reforzar alquimia.
  7. Hacer el equipo de mejora de herrería y alquimia. (cuello, dedo y manos con +81% en alquimia y herrería, cuerpo con +81% de herrería y dos cabezas de +81% de alquimia que se puedan vestir juntas: existen tres objetos de cabeza en el juego que pueden vestirse a la vez que un Anillo/Circlet o una Máscara de Sacerdote Dragón, son el Yelmo Falmer, el Penitus Oculatus y La Corona Dentada)
  8. Hacer las pociones definitivas de +145% en encantamiento y +582% de herrería.
  9. Mejorar las armas y armaduras que más me gusten
  10. Encantar el resto del equipo a su gusto. Yo recomiendo hacer un anillo y un collar que en total lleven refuerzo de alteración, conjuración, destrucción e ilusión. Ayudaros del script "bat paso2". Así tendríamos los hechizos de esas escuelas de magia gratis (siempre que encantemos con al menos una reducción del 100% en los hechizos). Podéis seguir encantando con mejoras de daño en arquería, armas, etc... pero sólo si queréis matar dragones de un sólo golpe como en estos vídeos
    1. con arco 
    2. con espada
  11. No recomiendo ningún otro encantamiento (ya tenemos el cap de armadura, casi el cap de resistencia a la magia [ver nota], somos prácticamente invisibles a los enemigos, podemos llevar 600 de peso, no gastamos magia, tenemos pociones de vida gratis [basta con llamar a "bat pociones"], todo el dinero que queramos [basta con llamar a "bat oro"], las ganzúas no se nos rompen,... ). No nos hacen falta.
  12. Ir a la "Piedra del corcel". Me parece la más útil, así tendremos una capacidad de carga 100 puntos mayor. Podéis hacerlo usando el comando "coc doomstonenorthernpineforest01".
  13. Si tenéis un seguidor os recomiendo que lo despidáis (por el sigilo)
Y ya sólo os queda disfrutar del juego a vuestro antojo, lo espectacular de su motor, sus personajes, su historia, etc...
Pero ¿Cómo hemos conseguidos esas estadísticas? Alternando los perks.

Alternar perks

Esto es la base de todo. Lo descubrí al observar que si activaba por consola sólo el rango uno y el tres de "Resistencia mágica", en la rama de "Alteración", en los efectos activos me aparecían dos bonificaciones distintas de +10 y +30 a la resistencia a la magia, y si activaba después el rango dos por consola o a mano, sólo conservaba la bonificación de +30.

Haciendo más pruebas con otros perks, observé que si otorgaba ventajas no contiguas, las bonificaciones se acumulaban, mientras que si añadía los "huecos" de en medio, se perdían y sólo se conservaba la mayor.
Con esto, decidí que mis script tuvieran los rangos 1, 3 y 5 y olvidaran los rangos 2 y 4 de los siguientes perks:
  1. Armadura Pesada. Perk: Fuerza arrolladora. Ventaja total: 180% en vez de 100%.
  2. Armadura Ligera. Perk: Defensor ágil. Ventaja total: 180% en vez de 100%.
  3. Armas a una mano. Perk: Hombre de armas. Ventaja total: 180% en vez de 100%.
  4. Armas a dos manos. Perk: Bárbaro. Ventaja total: 180% en vez de 100%.
  5. Especializaciones en armas (espadas, hachas y mazas) 30% crítico en vez de 20%.
  6. Arquería. Perk: Máxima tensión. Ventaja total: 180% en vez de 100%.
  7. Arquería. Perk: Disparos críticos. Ventaja total: 30% en vez de 20%.
  8. Bloqueo. Perk: Muro de escudos. Ventaja total: 90% en vez de 40%.
  9. Discreción. Perk: Sigilo. Ventaja total: 90% en vez de 40%
  10. Robo. Perk: Dedos largos. Ventaja total: 180% en vez de 100%.
  11. Elocuencia. Perk: Regateo. Ventaja total: 60% en vez de 30%
  12. Encantamiento. Perk: Encantador. Ventaja total: 180% en vez de 100%.
  13. Alquimia. Perk: Alquimista. Ventaja total: 180% en vez de 100%.
Además:
  1. Alteración. Perk: Resistencia mágica. Ventaja total: 40% en vez de 30%. Rango 1 y 3. Elimino el 2.
  2. Elimino "Atronarch" de "Alteración" para evitar que se pueda absorber el efecto de sigilo del último perk "Guerrero sombrío".
Así que NO ACTIVÉIS VENTAJAS A MENOS QUE NO QUERÁIS IR TAN MAZADOS. Lo cual es una opción pues si no vais repartiendo demasiada estopa incluso en "Muy Difícil".

Como ejemplo pongo unos pantallazos con los números que podéis conseguir sin pociones, sólo con equipo encantado. Como resumen:
  • Armadura Pesada (daédrica):  26.298 
  • Armadura Ligera (escamas de dragón):  25.843
  • Daño de arco daédrico: 15.173
  • Daño de martillo de guerra daédrico: 12.797
  • Daño de espada daédrica: 12.225
  • Máximo nivel de poción encantamiento: 145%
  • Máximo nivel de poción herrería: 582%
  • Máximo nivel de mejora de herrería y alquimia: 81%

Haz click en las imágenes para ampliarlas:

Armadura y habilidades
Daño de Arco
Daño de martillo a dos manos
Daño de espada a una mano
Poción de encantamiento
Poción de herrería


Conclusiones

Visto los resultados, yo recomiendo usar esta guía para:
  1. Vestir el equipo que nos guste más estéticamente (armas y armaduras) o vaya mas a juego con nuestro rol sin tener que renunciar a las mejores estadísticas.
  2. Tener un único personaje que pueda llevar a cabo todas las mecánicas del juego (guerrero, mago y ladrón por así decirlo)
  3. Montaros una partida para hace el animal y desahogaros un poco XD
  4. Vengaros del juego por haber cogido un perk inútil y que tengáis que volver a empezar de nuevo con un personaje porque no os salgan las cuentas respecto a donde debéis poner cada perk (sobretodo si os tangaron como a mí con el perk "Golpe de desarme" de "Bloqueo", ya sabéis, ese que se supone que alguna vez debería desarmar a alguien al darle un embate con escudo... yo nunca lo he visto aún)
Para terminar, deciros que el comando "COC" que he usado antes, es para moveros al centro de la celda que le digáis. Es algo muy útil sobretodo si es la primera vez que vais a un sitio. Por ejemplo, en la guía vamos a la celda de pruebas, a la piedra del corcel y al próstilo de Boethiah. Hay una web que podéis usar para descubrir nuevas ubicaciones de vuestro interés. El enlace es: Skyrimsearch. Recomiendo guardar la partida la primera vez que probéis cada una, ya que en algunas podéis morir nada mas aterrizar.

En fin empecé diciendo que quería darle caña al juego en mis vacaciones, pero al final con todo esto mas bien he dedicado dos semanas a investigar y a hacer vídeos para que podáis ver los resultados.

Si tenéis algún problema, duda o queréis algo de ayuda con la consola o los scripts, podéis dejarme un comentario.

¡¡Un saludo jugones!!

1 de septiembre de 2012

CSS: Botones redondeados con brillo

Sabiendo lo que os expliqué ligeramente en la primera entrada de CSS, hoy voy a dedicarme a las propiedades CSS border-radius, box-shadow y linear-gradient. Con su apoyo, al final haré un botón que parezca azul cristalino y que se ilumine cuando pongamos el cursor encima,  todo ello sin utilizar ninguna imagen y con sólo un estilo.


Pero antes: ¿qué nos ofrece cada una de estas propiedades?
  • border-radius: Redondeo de las esquinas de un elemento (incluido imágenes)
  • box-shadow: Aplicar un efecto de sombra a un elemento
  • linear-gradient: Aplicar un degradado de colores de fondo
En los enlaces de la W3C que pongo arriba se explica todo en más detalle. Aquí voy a poner lo que veo más útil y unas demostraciones de lo que se puede conseguir con cada una de ellas. En cada muestra podréis ver los efectos que produce el código que esta dentro del elemento estilizado.
Debemos tener en cuenta que todavía no son un estándar y que cada navegador puede tener una implementación distinta hasta que se asiente cada una de las propiedades (yo compruebo los efectos en Chrome y Firefox que son los que más me visitan XD).

border-radius:

El valor de esta propiedad viene dada por dos valores, el primero marca el radio horizontal de la esquina y el segundo el radio vertical, ya que podemos hacer que sean distintos. De esta forma tenemos:

Elemento con las cuatro esquinas iguales y redondas. Sólo hace falta un valor:

border-width: 2; border-radius: 1em;
NOTA: si os fijáis el tamaño del radio esta medido en 'em', esta es una medida relativa al tipo de letra que se esta usando y que puede asemejarse a una 'm' minúscula. De esta forma el radio guardará una proporción acorde al contenido.

Elemento con esquinas distintas dos a dos. Hacen falta dos valores:

border-width: 2; border-radius: 1em 0.5em;

Elemento con las cuatro esquinas distintas. Un par valor por esquina (además añadí distintos grosores):

border-width: 2px 6px;
border-top-left-radius: 1em 0.5em;
border-top-right-radius: 0.2em 0.2em;
border-bottom-right-radius: 2em 2em;

Con todo esto es posible darle vueltas a la imaginación para que quede todo mas curioso.

box-shadow:

El valor de esta propiedad es una lista de sombras separadas por comas, cada una especificada por 2-4 valores, un color opcional y una clave "interior":
  1. Desplazamiento horizontal de la sombra respecto al elemento.
  2. Desplazamiento vertical de la sombra respecto al elemento.
  3. Difuminado de la sombra.
  4. Extensión de la sombra (cuánto más grande/pequeña es respecto el elemento).
  5. Color de la sombra. Opcional (si no se indica nada se hereda la propiedad color del elemento).
  6. Indica si la sombra es interior. Opcional. Se pondría la palabra clave 'inset'.
Con esto ya podemos empezar a ver que obtenemos:

Sombra exterior del mismo tamaño que el elemento desplazada 10px a la derecha y abajo:

box-shadow: 10px 10px rgba(0,0,0,0.4);

Sombra interior del mismo tamaño que el elemento desplazada la mitad:

box-shadow: 5px 5px rgba(0,0,0,0.4) inset;

Sombra interior y exterior, de distintos colores, con distintos desplazamientos y con la sombra exterior 3px mayor que el elemento:

box-shadow: 8px 4px 0 3px rgba(0,0,200,0.4), 4px 8px rgba(200,0,0,0.4) inset;

Sombra centrada en el elemento 3px más grande y con 4px de difuminado:

box-shadow: 0 0 4px 3px rgba(0,0,0,0.4);

Bien ya nos vamos acercando a lo que queremos.

linear-gradient:

Esta propiedad necesita que se le indiquen los colores que vamos a usar, el ángulo de pintado, dónde obtenemos cada color, el punto de partida... es bastante complejo de hacer a mano para algunos efectos más complicados.
Gracias a Dios, tenemos un enlace con una aplicación web que nos proporciona una interfaz parecida a la de Adobe Photoshop para crear los gradientes y nos genera el código preparado para ser compatible con todos los navegadores.
Aquí dejo el enlace a esta aplicación: Ultimate CSS Gradient Generator.

Así podemos conseguir fácilmente efectos como estos:

background: -moz-linear-gradient(-45deg, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); background: -ms-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -o-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); background: -webkit-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: linear-gradient(135deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=1 ); text-align: center;

Todo el texto interior no es que me haya vuelto loco, es todo el código que hace falta para que funcione... así que yo prefiero que me lo haga una aplicación.

Muy bien... ¿y dónde está el botoncito?

Para terminar voy a sacarle partido a todo lo que hemos visto y a crear sólo con CSS un botón con esquinas redondeadas y textura cristal que se ilumine cuando estemos encima de él sin usar ninguna imagen. Para ello haré lo siguiente:
  1. Creare un estilo de clase "botonRapido" con:
    • Bordes redondeados
    • Un gradiente que me dé la textura cristal apagado
    • Una sombra centrada en el botón
    • Un color para la fuente del texto que no sea blanco puro
  2. Modificaré el estilo anterior cuando suceda el evento "hover" (pasar el ratón por encima) para que:
    • El gradiente sea más luminoso
    • La sombra más clara
    • El color de la fuente blanco puro.
Implementando todo eso ya tenemos nuestro botón. Probarlo.



Si queréis saber como lo hice exactamente, os dejo el enlace a los archivos que he creado para que podáis verlo tranquilamente y hacer pruebas en local con vuestro navegador.

Si tenéis algún problema podéis comentármelo. Un saludo.

Compárteme

Entradas populares