Tag Archive for: diseño web

09Nov 2011 1 Comment */?>

15 Generadores de CSS3 Online

Categories: Recursos - Tags: , ,

Hoy les traigo una colección de generadores online de CSS3. Ideal para gente vaga o con poco sentido del diseño como yo jejeje ya que con un par de clicks pueden crear botones css3, degradados css3, bordes redondeados y un montón de cosas más. Los animo a probarlos!!
Read more

24Oct 2011 0 Comments */?>

Centrar menu con submenu de ancho variable con CSS

Categories: Tutoriales - Tags: , ,

Si en el artículo anterior les explique una forma de centrar menus de ancho dinámico , ahora les explico como hacer lo mismo cuando el menu tiene un submenu o dropdowns. Para ellos tan solo hay que cambiar algunas reglas.

Read more

24Oct 2011 5 Comments */?>

Centrar menu con ancho variable solo con CSS

Categories: Tutoriales - Tags: , ,

Cuando tenemos un menu y no sabemos el width del mismo se complica un poco a la hora de centrarlo en nuestras webs. A veces no sabemos el width porque ni siquiera controlamos los elementos del menu , sino que estos son añadidos a gusto y piacere del usuario como en el caso de usar WordPress Nav menus.

Hay varias soluciones para este problema pero la que más me gusta a mí es la siguiente:

Read more

07Ago 2010 21 Comments */?>

Los mejores blogs de programación y diseño web

Categories: Recursos - Tags: , , ,

Hoy cuando me levante se me ocurrió hacer una lista con los mejores blogs  o webs sobre diseño web , programación , maquetación css, javascript  y frameworks, etc .  Como esto de “los mejores blogs” es muy amplio y según  el parecer de cada uno la lista va a ser totalmente diferente me parece mejor hacer directamente una lista abierta donde cada uno pueda agregar la web que le parezca. Así que si conoces alguna web interesante o querés presentar la tuya deja un comentario con el link .

Otra cosa que pensé es dividirlos en categorías pero como la mayoría  ocupan varias categorías es mejor que cada uno ponga al lado los principales temas  que se tratan y simplemente los dividimos en 2 grandes grupos. Páginas en Ingles y en Español

Español

Timersys <—- JQuery ,PHP , tutoriales , recursos y mucho más @Damian Logghe

Anieto2K <—- Desarollo web, wordpress, fotografía ,etc @Andres Nieto

CSSBlog Es <—- CSS 100% y monton de recursos @Pedro Corchero Murga

Foros del web <—- Impresionante comunidad con miles de miembros activos dispuestos a ayudarte @Forosdelweb

LibrosWeb <—- Manuales completamente gratis de programación y diseño web.

Todo Tutoriales Web <—- Recursos y trucos para foroactivo, diseño, etc @Carlos

Ingles

WoorkUp <—- Recursos , tutoriales y artículos muy buenos @Antonio Lupetti

Smashing Magazine <—- Excelente web con miles de recursos gráficos @Smashing Mag

Nettuts+ <—- Página super completa con tutoriales y ejemplos de todos @nettuts

Ahora por favor colaboren que entre todos podemos hacer una buena lista. Saludos!!

02Ago 2010 3 Comments */?>

Como mejorar la velocidad de carga de tu página web

Categories: Recursos, Tutoriales - Tags:

Hoy en día los buscadores están empezando a puntuar la velocidad de carga de las páginas webs para mostrar los diferentes resultados ( engrosando así sus algoritmos para mejorar la experiencia de los usuarios). Hay diversidad de formas de acelerar la carga de una página web pero podemos resumirlas en unas cuantas.

Read more

13Jun 2010 10 Comments */?>

Esquinas redondeadas y degradados con CSS3

Categories: Tutoriales - Tags: , ,

Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1
<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

12Jul 2009 0 Comments */?>

Ejemplo de estilo para tu contador del blog

Categories: Tutoriales - Tags: , ,

En este tutorial les voy a mostrar como crear un simple contador de comentarios o comments counter como se suele decir en ingles. Con un HTML muy básico y un poco de CSS vas a poder dar un nuevo aire a tu blog.
counter

Estructura:

La estructua HTML es muy simple.

counter2

Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:

1
2
3
4
<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>

Para el globo usamos una imagen que vamos a aplicar como fondo del DIV

bubble

El código CSS que aplicamos es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
	font-size:16px;
	color:#666666;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
	margin-bottom:8px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
}

Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE

Descargar Ejemplo