Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
jueves, 20 de febrero de 2014
jueves, 24 de octubre de 2013
Simple Lightbox with "img" not "a"
Soy bastante lerdote en JQuery y ayer me pasé la tarde buscando un Lightbox que cogiera el enlace de la imágen desde el "src" de la propia imágen en vez del tag "a" dentro del cual se encontraba nuestra thumbimage. Porque no siempre necesitamos tirar de "a" y su "href" ya que con el css podemos redimensionar la imágen para tener un thumb y al hacer click sobre ella simplemente mostrarla en su tamaño real. No es que sea la mejor solución hacer eso pero cuando tienes una carousel (Bootstrap) y le fijas un tamaño, estaría bien mostrar algunas imágenes en su tamaño real.
Era algo muy sencillo que finalmente esta mañana lo he conseguido. Apoyándome en lo que he encontrado en webtuts+ (enlace), he conseguido con pequeñas modificaciones.
* No olvidéis de cargar JQuery (<script src="http://code.jquery.com/jquery-1.6.2.min.js"-/script>).
Aquí tenéis el enlace al .html (descargar).
El código CSS:
Era algo muy sencillo que finalmente esta mañana lo he conseguido. Apoyándome en lo que he encontrado en webtuts+ (enlace), he conseguido con pequeñas modificaciones.
* No olvidéis de cargar JQuery (<script src="http://code.jquery.com/jquery-1.6.2.min.js"-/script>).
Aquí tenéis el enlace al .html (descargar).
El código CSS:
<head>
<style>
#lightbox::before{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:#000;
opacity: 0.9;
martes, 22 de octubre de 2013
Bootstrap full width tooltip
I was trying to make full width of tooltip because when you have a small button and long tooltip it looks like a column and is a bit ugly :).
So, go to bootstrap.css and find ".tooltip" then just add "white-space: nowrap;". With this line we are saying that the text will never wrap to the next line.
This is a original .tooltip code:
This is a final .tooltip code:
So, go to bootstrap.css and find ".tooltip" then just add "white-space: nowrap;". With this line we are saying that the text will never wrap to the next line.
This is a original .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}
This is a final .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
white-space: nowrap;
}
miércoles, 9 de octubre de 2013
Botón estilizado: efecto translate, solo CSS3
Un sencillo botón con ensanchamiento en el hover. Es muy sencillo y se puede aplicar a diferentes componentes, creamos un estilo en este caso es ".button" y definimos el estilo del botón. Después creamos el estilo "hover".
Hemos de tener en cuenta el ancho (width) en ".button:hover" porque al hacer hover si queremos que se quede en el centro, tenemos que restarle al "margin-left" ese ancho para conseguir mantenerlo en el mismo sitio. Además de "translate", podemos utilizar otras propiedades como: "rotate", "scale", "skew" ej: -moz-transform: rotate(180deg) scale(1.5) skew(10deg) translate(50px);
Código CSS:
Hemos de tener en cuenta el ancho (width) en ".button:hover" porque al hacer hover si queremos que se quede en el centro, tenemos que restarle al "margin-left" ese ancho para conseguir mantenerlo en el mismo sitio. Además de "translate", podemos utilizar otras propiedades como: "rotate", "scale", "skew" ej: -moz-transform: rotate(180deg) scale(1.5) skew(10deg) translate(50px);
Código CSS:
.boton{
cursor: pointer;
display: inline;
font-size: 12px;
text-align: center;
font-weight: bold;
width: 60px;
padding: 5px 10px;
color: #f2f2f2;
jueves, 4 de julio de 2013
Formulario con PHP & Bootstrap + responsive design
Un formulario para la gestión de imágenes. Permite subir una imágen con varios campos de datos adiccionales, hacer consultas para ver las imagenes subidas y abrir cada una de ellas y permite el borrado de cada una.
Está desarrollado en HTML5 + CSS3 + Bootstrap + PHP.
Para el responsive design he utilizado el Bootstrap, un framework muy bueno y con muy bonito diseño.
Enlace para descargar el formulario: descargar
Está desarrollado en HTML5 + CSS3 + Bootstrap + PHP.
Para el responsive design he utilizado el Bootstrap, un framework muy bueno y con muy bonito diseño.
Enlace para descargar el formulario: descargar
domingo, 2 de junio de 2013
Mi portafolios
Buenas tardes, hace poco "terminé" lo pongo entre comillas porque nunca estará terminado y siempre iré actualizando y mejorando cosas, mi portafolios. Por ahora arranco con la versión beta en un servidor gratuito www.serversfree.com. Para septiembre espero tener una versión estable y estar con un dominio propio.
Por ahora lo podeis ver en el siguiente enlace: http://aleksanderzaytsev.bugs3.com/
Gracias.
Por ahora lo podeis ver en el siguiente enlace: http://aleksanderzaytsev.bugs3.com/
Gracias.
domingo, 17 de febrero de 2013
Formulario (HTML 5)
Un sencillo formulario hecho en HTML 5, CSS 3, JavaScript y JQuery (datepicker).
El formulario incluye:
- validacion de campos
- aplicación de estilo en el caso de error
- JQuery para la fecha
- botón para mostrar y ocultar la descripción del producto
Enlace para descargar: descargar
El formulario incluye:
- validacion de campos
- aplicación de estilo en el caso de error
- JQuery para la fecha
- botón para mostrar y ocultar la descripción del producto
Enlace para descargar: descargar
viernes, 6 de enero de 2012
Dando forma al input type file
Un día haciendo una página web al registarse, al usuario quería darle la opción de subir imágen. Previamente tenía el input de texto estilizado con css, pero no se aplicaba al input file. Ya que este viene con el botón añadido y trás unas horas de fallidos intentos, estilizarlo, quitar el botón y dejar solo a parte de text decidí buscarlo en internet y ver que ideas existen sobre como hacerlo. Mucha gente lo esconde y por encima pone un botón que llamará a nuestro input file através de un pequeño javascript. Es una solución bastante lógica y sencilla pero no conseguí hacerlo funcionar y encontre otra solución utilizando capas y es la que voy a comentar a continuación.
Ejemplo sencillo, consiste en crear un input file y un botón, el input file lo hacemos invisible y lo ponemos encima de nuestro botón, con lo
Ejemplo sencillo, consiste en crear un input file y un botón, el input file lo hacemos invisible y lo ponemos encima de nuestro botón, con lo
miércoles, 16 de noviembre de 2011
WebDeveloper
Otra herramienta muy útil para los desarrolladores de paginas web, llamada WebDeveloper es un complemento de Mozilla creado por Chrispederick. Es una herramienta con multitud de opciones, la mayoría de ellas es mostrar y ocultar, es decir, mostrar las marcas div, ó mostrar los enlaces, ó ocultar css además de validación de codigos. Cualquier desarrollador web debería probarla e incluso tenerla a mano.
miércoles, 2 de noviembre de 2011
5 Maneras de reiniciar el CSS
¿Por qué es aconsejable reiniciar el CSS antes de hacer nada? Porque por defecto cada navegador toma ciertos valores, los cuales varian en cada navegador. Por eso para que nuestra página we vea igual en cualquier navegador (Mozilla, Chrome, Opera, Internet Explorer...) se vea igual, es aconsejable reiniciar los estilos.
Realmente los que suelo utilizar son: normalize.css o modernizr.
1. Reinicio del CSS por Chris Poteet
Realmente los que suelo utilizar son: normalize.css o modernizr.
1. Reinicio del CSS por Chris Poteet
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
domingo, 23 de octubre de 2011
www.actumteatro.com
Lenguajes utilizados: HTML + CSS + JQuery
Otras herramientas: Photoshop CS2
Año de realización: 2009
Página web: http://actumteatro.com/
Otras herramientas: Photoshop CS2
Año de realización: 2009
Página web: http://actumteatro.com/
