Este tutorial muestra como crear un menú desplegable utilizando solo Css3, en el tutorial muestra como usar Border-Shadhow, Text-Shadow y Box-Shadow.
Como ven en la imagen trae soporte para navegadores que soportan Css3 y para los que no lo soportan también.
Aquí el código en una imagen.
Link | CSS3 Dropdown Menu
Demo | Demo Dropdown Menu
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
En Fuel Your Creativity, hicieron un PSD (archivo de photoshop) con el layout del nuevl Twtitter directamente para que lo editen y perzonalicen su nuevo Twitter, esta fácil de entender, así que será también fácil modificarlo.
Link | Free New Twitter PSD Background Template
Descarga | Download Free New Twitter Template
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
En Line25, hicieron una recopilación de 30 sitios en los cuales se usan texturas tanto en backgrounds como en imágenes, esta lista puede servirnos a muchos a ver el buen uso de texturas, como bien lo dice el autor estas texturas ayudan a dar al sitio una sensación más realista de la interface, en la lista hay sitios como estos:
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Este es un pequeño tutorial de como crear los items del menú en dos lineas como se ha visto en las plantillas de pago del Joomla.
Primero y antes que nada copiar el default.php del modulo “mod_mainmenu” en el directorio de “html” del template que estamos editando o diseñando
Copiar -> root\modules\mod_mainmenu\tmpl\default.php a -> root\templates\NombrePlantilla\html\mod_mainmenu\default.php
Luego abrir con el archivo copiado para editarlo y copiar la siguiente linea entre la linea nro 75.
// Código para poner el item del menu en dos lineas
if (isset($node->_children[0]) && isset($node->_children[0]->span[0])) {
$title = $node->_children[0]->span[0];
$split = explode('//', $title->data(), 2);
if (count($split) == 2) {
$span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'title'));
$span->setData(trim($split[0]));
$span =& $node->_children[0]->span[0]->addChild('span', array('class' => 'sub'));
$span->setData(trim($split[1]));
}
}
y el resultado seria este en el html interpretado en el navegador
<li class="active item16" id="current">
<a href="/index.php?option=xxxxx">
<span>
<span class="title">Ubicación</span>
<span class="sub">Direcciones</span>
</span>
</a>
</li>
El resto es el CSS
.topmenu li span.title{ display:block; margin:10px 0 0 0; color:#12266B; font-weight:bold; font-size:13px;}
.topmenu li span.sub{ display:block; margin:1px 0 7px 0; font-size:11px; font-style:italic; color:#fff;}
Como ven lo que hace el código es agregar dos spans con clases de title y sub estos se separan por “//” que se tienen que agregar en el administrador de joomla al crear el menu:
Todos los estilos y el código que separa los span se pueden editar a gusto, así que no tengan miedo en experimentar.
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
CSS Refresh, es un complemento(plugin) de Firefox que permite actualizar el CSS sin necesidad de actualizar toda la página, esto ayuda a mejorar el tiempo de desarrollo de una página en especial si estamos trabajando directamente en el hosting de manera live, y ayuda bastante en servidores compartidos ya que se vuelven lentos.
Este complemento añade un nuevo item en el menú contextual del clic derecho “Refresh CSS”, mediante el cual su uso se hace sencillo y más sencillo aún porque añade un acceso directo desde el teclado con las teclas de CTRL-SHIFT-R, el autor lo recomienda especialmente para los desarrolladores de ajax.
Link | CSS Refresh
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Esta es una lista que se hizo en Designm.ag ya hace algún tiempo pero siempre es útil recordarla, bueno es una lista de más de 5o0 Brushes de manchas y salpicones para photoshop, viene en Sets en total son 26 sets faciles de almacenar porque ya vienen categorizados por sets espero les sirva.
Splatter Brushes (11 brushes)
High Res Splatter Brushes (10 brushes)
High Res Grunge Ink Splatter Brushes (9 brushes)
Splash Photoshop Brushes (45 brushes)
Ink and Splatters – Pack 1 (27 brushes)
Ink and Splatters – Pack 2 (28 brushes)
Splatter Paint Brushes (7 brushes)
Dot Splatter Brushes – Volume 1 (12 brushes)
Dot Splatters – Volume 2 (12 brushes)
Dot Splatters – Volume 3 (10 brushes)
Dot Splatters – Volume 4 (11 brushes)
Ady’s Splatter Brushes (17 brushes)
Splatter Brushes (12 brushes)
Huge Splatter Pack (23 brushes)
SplatterisM (35 brushes)
Super Crazy Splatter Brushes (9 brushes)
Splatter Brushes (11 brushes)
Splashes of Paint (30 brushes)
Splatter Brushes (13 brushes)
Ink Splatter Brushes (20 brushes)
Blood and Ink Splatters (42 brushes)
Large Splatter Brushes (20 brushes)
Splatter Brushes (16 brushes)
Splatter Brushes (25 brushes)
Splat & Spray Brushes – $5 (22 brushes)
Splatter Brushes – $5 (23 brushes)
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Muchas veces pasa que surge esta intriga, y para eso se creo el plugin de Post From Site, que sirve exclusivamente para eso, como la imagen muestra crea el post con lo básico que todos los post necesita, como el titulo, contenido, se puede subir imágenes, crea categorías y tags, así que tiene lo básico y en muchos casos es por demás de necesario, todo eso lo muestra en un lighbox.
Link | Post From Site
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
En Zurb, se hizo hace algun tiempo un tutorial de como crear botones con solo CSS3 y propiedades como gradientes, hover y onclick sin usar imagenes ni javascripts, puro CSS3, usan los atributos de border-radius, box-shadow y text-shadow, en estos dos últimos se usan colores en RGBA para crear las gradientes.
Y obtiene un resultado igual a este:
Y se nota perfectamente los bordes redondeados, las gradientes y las sombras.
Link | Super Awesome Buttons with CSS3 and RGBA
Demo | Demo Super Awesome Buttons
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
CanvasXpress es una libreria hecha con javascript con el unico motivo de generar gráficos con los tag <canvas> implementados en html5, lo interesantes de la etiqueta canvas es que con ella se puede crear casi todo tipo de gráficos en 2d y en 3d.
Su uso no es tan complicado ya que en la web oficial tiene todos los ejemplos necesarios para crear las gráficas y lineas.
Link | canvasXpress
Demos | Examples canvasXpress
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...
Easy, es un framework para el front-end de sus nuevos proyectos esta hecho en base de Css, Html y Javascript.
Para que sirve?
Sirve para tener una base sobre la cual trabajar y evitar escribir codigo, ahorrando tiempo y obviamente te hace la vida mas sencilla al empezar un proyecto, este framework tiene 3 layouts para elegir, por otra parte los efectos estan hechos bajo jQuery y tiene todos los básicos tales como el tooltip, el popup box, el scroll y el slide.
Link | Easy front-end framework
Demo | Demo Easy
Descarga | Download Easy
Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...