por Omar Benyakhlef | CSS, Diseño Web, jQuery
Buscador elástico con jQuery y CSS
Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa «x» que también podemos ver en los buscadores de iPhone o iPad.
Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.
MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM
Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño Web, Trucos CSS
Creación de Patterns con CSS3
Hoy traemos a este Blog de Diseño Web, un ejemplo de cómo hacer un pattern con CSS3, más que un ejemplo, un par de utilidades que nos vendrán muy bien a la hora de diseñar nuestro background de fondo. Como siempre, ojo con las versiones de navegador, especialmente al Explorer.
En http://leaverou.me/css3patterns/ podemos encontrar varios ejemplos de patterns hechos con CSS. Lo mejor de todo es que estos ejemplos son editables, por lo que podréis customizarlos.
El segundo ejemplo, lo he encontrado en http://patternizer.com Una web en la que podrás diseñar tu propio pattern mediante un interface gráfico, para más tarde copiar el código CSS generado
por Omar Benyakhlef | Ajax, CSS, Diseño de páginas web, Diseño Web, jQuery
Efectos a imágenes con jQuery y CSS3
Diseño Web con jQuery y CSS3,… Una vez más, vamos a poder comprobar cómo cada día son más las facilidades que nos aportan estas dos herramientas a la hora de diseñar para web.
En este caso vais a poder ver cómo con CSS3 y jQuery, es posible aplicar toda clase de estilos a una imagen. Bordes, brillos, sombras, contornos, reflejos,…
Una gran variedad de efectos que además de facilitarnos el tiempo de trabajo, nos ayuda a controlar el peso de nuestra web.
Podéis ver todos estos efectos y el modo de aplicarlos en http://webdesignerwall.com
por Omar Benyakhlef | accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!
El diseño webestá en constante evolución.
La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.
Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que «todo es posible«.
Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.
A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3, que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.
(más…)
por Omar Benyakhlef | CSS, HTML, HTML5, Trucos CSS
GENERADOR DE CÓDIGO CSS
CSS 3.0 MAKER es una herramienta de diseño web que ya lleva un tiempo online, creada para generar CSS3, y con la cual podemos crear todo tipo de esquinas redondeadas, gradientes, animaciones, transiciones, sombras, rotar texto,…
La interfaz es muy intuitiva. Generamos gráficamente el efecto que deseamos, lo vemos en pantalla simultáneamente y cuando lo tenemos definido y terminado nos descargamos la CSS, así de fácil.
Cada una de las posibilidades de CSS 3.0 MAKER, nos muestra la compatibilidad con los distintos navegadores del mercado
por Omar Benyakhlef | CSS, HTML5, Trucos CSS
Generador de texto curvo en CSS y HTML5
Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.
Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.
El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón «Generar HTML», sencillamente GENIAL !!!
por Omar Benyakhlef | CSS, jQuery
Botones Social Media con jQuery y CSS
En diseño web se ha vuelto imprescindible poder compartir tus contenidos con tus usuarios, si además lo puedes hacer de una manera vistosa, no solo gustará más a tus usuario, si no que será mucho más fácil que se vean tentados a utilizarlo.
AjaxMint nos muestra un alucinante ejemplo en el que además nos permite descargarnos el código.
por Omar Benyakhlef | CSS
Herramientas CSS
Conocer bien las tecnologías web, nos ayuda a tener una mejor perspectiva a la hora de poder realizar con éxito un buen diseño web.
El uso de CSS así como Ajax son hoy en día fundamentales en un buen diseño web. Existen herramientas que además nos pueden ayudar a la hora de optimizar y aplicar nuestros conocimientos de una manera más eficaz.
En este post vamos a ver varias herramientas CSS que nos van a ayudar a conseguir mejorar nuestra web. Compresores de CSS, generadores, programas que nos ayudan a limpiar la CSS, validadores, etc…
(más…)
por Omar Benyakhlef | Diseño de páginas web, HTML5, Trucos CSS
HTML5 y CSS3
TUTS+ es uno de los mejores sitios (conjunto de sitios) que existen en la red relacionados con el diseño web. En este caso el artículo es de net tuts +
En él podréis aprender a montar una estructura de página típica para blog, es decir, cabecera, menú de navegación, cuerpo principal, columna lateral y pie. Veréis cómo se utiliza el HTML5 en compañía de CSS3.
Desgraciadamente todavía existen navegadores que no reconocen el uso conjunto de estas dos tecnologías, sin embargo parece ser que todos los esfuerzos se encaminan a que un día podamos dejar de la do el «parcheo» de las CSS para cada navegador, y dedicarnos a lo que verdaderamente nos ocupa, diseñar un sitio web para sus usuarios.
En cualquier caso, el artículo me parece muy útil, ya que todas las tendencias nos encaminan al uso de HTML5 con CSS3.
En este post, nos enseñan a estructurar una página en HTML5, y a usar etiquetas como <article>, que sirve para denotar la entrada independiente en un blog.
Respecto al CSS3, en este post se analiza cada contenido del blog por separado y nos introduce en «nuevos trucos», como son los degradados, sombras o esquinas redondeadas.
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Rotar texto Html con CSS
Hoy vamos a ver otro «truco de diseño web con CSS«. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún «retoque», pero se consigue girar, que es lo importante.
Ese «truco», nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div>
</body>
</html>
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
CSS3
En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.
Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.
Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…
CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Optimizar la CSS al máximo
Cuando hacemos un diseño web, tenemos que tener muy en cuenta cómo luego vamos a optimizarlo de la mejor manera, para que que no pese demasiado.
En el post anterior, Gabriel, me preguntaba cómo optimizar la CSS, espero que este post, os sirva de algo.
Hace un par de años, recuerdo volverme loco para hacer páginas que no superasen en ningún caso los 100kb de peso, era una auténtica pesadilla, ya que sólo la gráfica te llevaba casi la mitad.
Hoy en día las velocidades de carga son más rápidas, pero eso no significa que podamos permitirnos hacer nuestras páginas sin optimización alguna.
Además, cada vez son más, los usuarios que nos conectamos con un terminal de bolsillo, por lo que se agradece muy mucho, el poder navegar con fluidez sobre una página «ligera».
Tendremos pues que intentar optimizar al máximo nuestras imágenes, el Html y los archivos que mandamos cargar al navegador cuando lee nuestro código, como los .js y los .CSS
En este post vamos a tratar de conseguir la mejor CSS para nuestra web.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
ancho de capas con CSS
Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.
Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.
Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …
Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:
- margin – es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
- padding – es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.
Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin, (padding: 0px; margin: 0px; border; 0px). Yo, para no tener problemas con los navegadores, coloco los bloques «contenedores» con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los «contenedores» sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS, Tutoriales, Usabilidad
CSS Trucos
La evolución en el diseño web ha venido de la mano entre otros, pero sobre todo, de las nuevas CSS. Además de conseguir ahora páginas más ligeras, hemos podido añadir efectos especiales que antes sólo eran imaginables con flash. Son varias las tecnologías que ahora nos permiten dar movimiento a capas, movimientos suaves, incluso con efectos de aceleración.
Los menús que antes había que hacer con imágenes de sustitución, ahora se pueden hacer con una única imagen que cambia su posición mediante cambio de coordenadas.
En este post voy a dejar unos cuantos ejemplos sorprendentes de la cantidad de efectos y utilidades que se pueden hacer con CSS.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Enlaces visitados con CSS
Buenísimo código CSS para que todos aquellos enlaces que hayan sido visitados aparezcan marcados con una imagen (por ejemplo).
Me parece una utilidad genial, sobre todo para hacer más usable el menú de una web o blog. El usuario siempre sabrá si ya ha pasado por ese enlace o no. El código es el que aquí os apunto, si queréis ir a la página original y ver el código funcionando pulsad los enlaces de la columna derecha de http://www.colly.com/index.php
#sidebar ul { list-style-type:none; padding:3px; }
#sidebar li a { display:block; line-height:150%; width:239px; background:url(ticks_grey.gif); text-decoration:none; }
#sidebar li a:link, a:active { color:#666; }
#sidebar li a:hover { color:#F33; background-position: 0 -20px; }
#sidebar li a:visited { background-position: 0 -40px; }
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Trucos CSS: pie de página fijo
En este caso se trata de hacer un pie de página que siempre está visible, de tal modo que el diseño siempre ocupa el 100% de la altura del monitor.
De todos los ejemplos que circulan por ahí, creo que el mejor es este que os apunto en este post.
Se trata de una práctica no muy aprovechada debido a la altura excesiva que normalmente tienen los sitios, pero para casos en los que se trate de una web no muy grande, como un porfolio o una web de una empresa, se trata de una práctica que puede ser muy útil y visual.
Para todos aquellos que queráis ver el tutorial en inglés este es el enlace. Para el resto, esto es lo que hay que hacer:
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacks CSS
Los hacks son «condiciones» que se colocan en la CSS para que cada navegador interprete de modo diferente las órdenes del estilo que nos esté dando problemas, de tal manera que al final consigamos que nuestros diseños no difieran en función del navegador usado por el usuario.
(más…)
por Omar Benyakhlef | Trucos CSS
Transparencias de imágenes y textos con CSS
Voy a iniciar una categoría de trucos con CSS. En este primer post os voy a explicar cómo hacer transparencias tanto de imágenes como de textos.
La orden que tenemos que usar es opacity, y vamos a ver cómo de fácil es jugar con ella para conseguir efectos muy vistosos. Pero como no podría ser de otra forma, veremos que hay órdenes que valen para Explorer, otras que valen para Mozilla, otras que sólo funcionan en Frefox, otras que no…. (más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS, Tutoriales
Código CSS para centrar una web en pantalla
Raro es ya ver una web que no esté centrada horizontalmente, por otro lado, existen webs de poca altura que en algunos casos nos interesa más, verlas centradas verticalmente en el monitor. Por otro lado una tendencia ya muy expandida es el uso de «pies de web«. Aquí os dejo algunos códigos CSS que espero os puedan servir en vuestros próximos diseños para solucionar estos conceptos.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.
Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.
En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…
dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.
Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.
Sin duda es una web de consulta obligatoria.
