CSS Drive's Image to Colors Palette Generator

0 COMENTARIOS -  Publicado hace 13 meses -  Clasificado en: ,

Herramienta online ofrecida desde CSS Drive que obtiene una paleta de color a partir de los colores primarios de una imagen. Tan solo deberemos seleccionar una imagen desde nuestro ordenador o introducir la URL donde se encuentra una imagen y pulsar el boton "GET PALETTE". De inmediato obtendremos una paleta de color completa así como unas variaciones en tonalidad. El generador nos ofrece la posibilidad de exportar la paleta tanto a CSS como a un formato .aco para Photshop -muestras o swatches-.

CSS Drive's Image to Colors Palette Generator » »

Algunas entradas relacionadas:

 

CSS-Reset.com

1 COMENTARIO -  Publicado hace 14 meses -  Clasificado en: , ,

Los CSS para "resetear" los estilos por defecto de los navegadores se han hecho muy populares de un tiempo a esta parte. En CSS-Reset.com han ido un paso más allá y nos ofrecen poder incluir estas hojas de estilo utilizando las ventajas que proporciona Google. CSS-reset.com, queestá alojado en Google App Engine lo que proporciona una excelente velocidad y estabilidad gracias a su CDN (red distribuida de contenidos), han decidido compartir las hojas de estilo más populares para resetearlos:

De este modo tenemos nos evitamos el alojamiento y el tráfico de estos CSS.Tan sólo hay que incluirlos llamando directamente al dominio de css.reset. Dependiendo del css que elijamos deberemos hacer una de éstas inclusiones: 

<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />

CSS-reset.com » »

Algunas entradas relacionadas:

 

Iron Myers CSS Layouts

0 COMENTARIOS -  Publicado hace 14 meses -  Clasificado en: , , , , ,

En ironmyers.com nos ofrecen una buena colección de layouts, multitud de diseños preestablecidos para todas nuestras necesidades. Los layouts estan divididos en tres grandes bloques: con ancho 100%, con ancho de 950px y con ancho de 750px. Estos diseños CSS son totalmente compatibles con los navegadores actuales, lo que significa que estos diseños CSS se verán y se comportarán de la misma en todos los navegadores de Internet: Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari, etc.

Iron Myers CSS Layouts

Iron Myers CSS Layouts » »

Algunas entradas relacionadas:

 

Crear cajas de mensajes con CSS y jQuery

8 COMENTARIOS -  Publicado hace 14 meses -  Clasificado en: , , ,

Haciendo uso de CSS y jQuery podemos mostrar de una manera mucho más atractiva los mensajes que deseemos mostrar al usuario de nuestro sitio o aplicación web. Lo primero que deberemos hacer es crear el CSS para nuestras cajas. Si necesitas más información sobre este tema puedes consultar "CSS Message Boxes for different message types" . 

.info, .exito, .alerta, .error {
       font-family:Arial, Helvetica, sans-serif; 
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('info.png');
}
.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('exito.png');
}
.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('alerta.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('error.png');
}

Los iconos utilizados para este ejemplo son "Knob Buttons Toolbar icons".

El código XHTML sería, para cada uno de los mensajes, algo similar a: 

<div class="info">Mensaje de información que deseamos mostrar al usuario</div> 
<div class="exito">Mensaje de éxito de la operación realizada</div>
<div class="alerta">Mensaje de alerta que deseamos mostrar al usuario</div> 
<div class="error">Mensaje que informa al usuario sobre el error que se ha producido</div>

Lo que nos daría un resultado similar al siguiente:

Ahora tan sólo queda añadir algún tipo de efecto con jQuery. Para poder interactuar con las cajas de mensajes de una forma genérica con jQuery, le añadiremos una clase más a cada uno de los elementos: 

<div class="info mensajes">Mensaje de información que deseamos mostrar al usuario</div> 
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<div class="alerta mensajes">Mensaje de alerta que deseamos mostrar al usuario</div> 
<div class="error mensajes">Mensaje que informa al usuario sobre el error que se ha producido</div>

Ahora tan sólo queda darle algún efecto con jQuery. Podemos animar el mensaje, cambiarlo de color, hacerlo aparecer, etc. En este ejemplo, y creo que es una forma bastante interesante de mostrar los mensajes, la caja que muestra el mensaje aparece, permanece durante tres segundos y desaparece tras un ligero parpadeo.

El código para ello sería: 

$(document).ready(function(){
      setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000); 
});

El código para este ejemplo sería: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mensajes2</title>
<style type="text/css">
.info, .exito, .alerta, .error {
       font-family:Arial, Helvetica, sans-serif; 
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
       position:relative;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('info.png');
}
.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('exito.png');
}
.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('alerta.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('error.png');
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
       setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000); 
});
</script>
</head>
<body>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<p>El mensaje desaparecerá a los tres segundos.</p>
</body>
</html>

Lógicamente podremos cambiar el tipo de mensaje variando la primera clase del div en función del resultado de las operaciones realizadas por el usuario o por la información que deseemos suministrarle.

Ver ejemplo en funcionamiento » »

Descargar ejemplo completo » »

Algunas entradas relacionadas:

 

Marcas de agua con CSS

3 COMENTARIOS -  Publicado hace 14 meses -  Clasificado en: ,

CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).

Simplemente hay que incluir el CSS: 

<link href="Watermark/Watermark.css" type="text/css" rel="stylesheet"></link>

y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua: 

<div class="watermark posicion">
    <div class="text">Marca de agua</div>
    <img src="Nombre_Imagen.jpg" width="300" height="199" alt="alt imagen" >
</div>

donde "posicion" puede tomar los valores: topleft, topright, bottomleft, bottomright.

Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css: 

div.watermark .text {
	position: absolute;
	cursor: default;
	font: bold 22px Verdana, Arial, Sans-serif;
	color: White;
	margin: 4px;
	line-height: 20px;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	opacity: .5;
	-moz-opacity: .5;
}

Ver ejemplo en funcionamiento » »

CSS Watermark » »

Algunas entradas relacionadas:

 

Distinguir Google Chrome y Safari con CSS

1 COMENTARIO -  Publicado hace 14 meses -  Clasificado en: , ,

No es lo más ortodoxo pero a veces no hay más remedio que echar mano de ellos: dos hacks para distinguir los navegadores Chrome y Safari. 

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
     /* Propiedades para Google Chrome */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
     /* Propiedades para Safari */
}

Vía anieto2k » »

Algunas entradas relacionadas:

 

Styled Menus

2 COMENTARIOS -  Publicado hace 15 meses -  Clasificado en: ,

Styled Menus es un sitio web que ofrece menús de navegación diseñados por profesionales. Los menús están realizados con CSS, y son compatibles con todos los navegadores.

Styled CSS Menus

Styled Menus » »

Algunas entradas relacionadas:

 
Páginas: < Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Siguiente >