sábado, 15 de outubro de 2011
Menu colorido com CSS
fonte:
gemablog-
Encontré este menú hace tiempo en algún sitio que no recuerdo y me llamó la atención por lo alegre que resulta y que está creado con CSS.
Da para jugar un rato y probar distintas gamas de colores o añadirle estilos distintos, incluso imagen de fondo en las pestañas.
Da para jugar un rato y probar distintas gamas de colores o añadirle estilos distintos, incluso imagen de fondo en las pestañas.
Los ejemplos tiene un tamaño reducido para poder mostrarlos en la entrada pero si seguimos los pasos nos proporcionará un menú como podemos ver aquí.
En plantilla Edicción de HTML añadimos los estilos justo antes de ]]></b:skin>
#middle {
width: 920px;
float:right;
padding:30px 10px 10px 10px;
margin:10px 0;
background:transparent url() no-repeat;
}
.category {
width:164px;
float:left;
border-top:8px solid #333;
margin:20px;
padding:5px 10px 10px 10px;
background:transparent;
}
.category p {
margin:0;
}
#cat-1 {width:164px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:164px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:164px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:164px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:164px; margin:0; border-top:8px solid #FFDD33; color:#000000;}
#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}
Una vez añadidos los estilos vamos a plantilla de diseño y editamos un nuevo gadget de HTML, en su interior añadimos lo siguiente:
<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='Enlace-1'>Enlace-1</a></h2>
</div></div></div>
<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='#'>Enlace-2</a></h2>
</div></div></div>
<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='#'>Enlace-3</a></h2>
</div></div></div>
<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='#'>Enlace-4</a></h2>
</div></div></div>
<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='#'>Enlace-5</a></h2>
</div></div></div></div>
❋ El menú está creado para cinco enlaces, para configurar esos enlaces editamos el gadget deHTML, buscamos la parte que dice:
<h2 class='title'><a href='#'>Enlace-1</a></h2>
Haremos la misma operación con los enlaces 2, 3, 4, 5.
❋ Enlace-1, 2, 3, 4 y 5 es el texto que visualizamos y hará las veces de enlace.
❋ La almohadilla # la sustituimos por la url del sitio que vamos a enlazar.
❋ La anchura del menú la podemos modificar en:
#middle {
width: 920px;
❋ El margen se muestra transparente, es decir que se mostrará como fondo el color del blog. Si deseamos que se muestre un color distinto lo podemos cambiar en:
#middle {
background:transparent url(aquí url de imagen optativa) no-repeat;
También podemos añadir una url de imagen.❋ Color de fondo en las pestañas
.category {
background: none repeat scroll 0 0 #5B0720;
❋ Para sustituir los colores de las pestañas por otros tendremos en cuenta que, #cat-1 y siguientes es el color de la línea superior que visualizamos. Ahí mismo podemos cambiar la anchura de las pestañas en width:164px.
❋ Donde #cat-1:hover y siguientes es el color de la pestaña cuando situamos el cursor sobre ella.
❋ El color del texto lo cambiaremos en
.category a
color:#ffffff;
❋ Igualmente cambiaremos el color de el texto cuando situamos el cursor sobre él en:
.category a:hover
color:#fff;
Parece complicado tanto cambio pero es cuestión de intentarlo.
fonte:
http://gemablog-.blogspot.com/2011/02/menu-colorido-con-css.html
gemablog-.blogspot.com/2011/02/menu-colorido-con-css.html
traduzido:
Menu colorido com CSS
Eu encontrei este menu em algum lugar há muito tempo que eu me lembro e fiquei impressionado com o quão feliz e que é criado com CSS.Da para brincar e tentar gamas de cores diferentes ou para adicionar estilos diferentes, incluindo a imagem de fundo em guias.
Os exemplos têm um pequeno para aparecer na entrada, mas se seguirmos os passos que irá fornecer um menu como vemos aqui.
No modelo HTML edições estilos acrescentou pouco antes de ]]></ b: skin>
# {Médiowidth: 920px;float: right;padding: 30px 10px 10px 10px;margin: 10px 0;background: url transparente () no-repeat;}. {Categoriawidth: 164px;float: left;border-top: 8px solid # 333;margin: 20px;padding: 5px 10px 10px 10px;background: transparente;}. Categoria {pmargin: 0;}
# Cat-1 {width: 164px; margin: 0; border-top: 8px solid # 9977FF; color: # 000000;}# Cat-2 {width: 164px; margin: 0; border-top: 8px solid # 66BB88, color: # 000000;}# Cat-3 {width: 164px; margin: 0; border-top: 8px solid # FF55FF, cor: # 000000;}# Cat-4 {width: 164px; margin: 0; border-top: 8px solid # 9911FF; color: # 000000;}# Cat-5 {width: 164px; margin: 0; border-top: 8px solid # FFDD33, color: # 000000;}
# Cat-1 h2, h2 h2-2 # cat, # cat-3 h2, h2 gato-4 #, # cat-5 {text-transform: lowercase;margin: 0;font-weight: bold;font-size: 1.5em;letter-spacing:-0.05em;color: # 333;}. Categoria a {color: # ffffff;display: block;background: none;}. Categoria a: hover {background: none;color: # fff;text-decoration: none;}# Cat-1: hover {background: # 9977FF; color: # 352726;}# Cat-2: hover {background: # 66BB88, color: # 352726;}# Cat-3: hover {background: # FF55FF, color: # 352726;}# Cat-4: hover {background: # 9911FF; color: # 352726;}# Cat-5: hover {background: # FFDD33, color: # 352726;}# Cat-1 h2 a: hover, # cat-2 h2 a: hover, # cat-3 h2 a: hover, # cat-4 h2 a: hover, # cat-5 h2 a: hover {color: # fff;}Uma vez que nós adicionamos a estrutura do modelo estilos e editar um novo gadget HTML, dentro de acrescentar o seguinte:
class='clearfloat' <div id='middle'><div class='cat-1'><div id='cat-1'> <div class='widget class='category id='text1'> section' text'<h2 class='title'> <a href='Enlace-1'>-Link 1 </ a> </ h2></ Div> </ div> </ div>
<div class='cat-2'><div id='cat-2'> <div class='widget class='category id='text2'> section' text'<h2 class='title'> <a href='#'>-Link 2 </ a> </ h2></ Div> </ div> </ div>
<div class='cat-3'><div id='cat-3'> <div class='widget class='category id='text3'> section' text'<h2 <a class='title'> href='#'>-Link 3 </ a> </ h2></ Div> </ div> </ div>
<div class='cat-4'><div id='cat-4'> <div class='widget class='category id='text4'> section' text'<h2 <a class='title'> href='#'>-Link 4 </ a> </ h2></ Div> </ div> </ div>
<div class='cat-5'><div id='cat-5'> <'seção' div class texto category = 'widget class =' <h2 classe id='text5'> = 'title'> <a href='#'>-Link 5 < / a> </ h2></ Div> </ div> </ div> </ div>❋ O menu é criado por cinco links, para configurar esses links editar o gadget HTML, procure a parte que diz:
<h2 class='title'> <a href='#'>-Link 1 </ a> </ h2>
Vamos fazer o mesmo com os links 2, 3, 4, 5.
❋-Link 1, 2, 3, 4 e 5 é o texto que você imagina e vai agir como o link.
❋ A almofada # substituí-lo com a url do site que apontam para.
❋ A largura do menu, você pode modificar em:# {Médiowidth: 920px;
❋ A margem é mostrado transparente, que deve ser exibido como a cor de fundo do blog.
Se você quiser exibir uma cor diferente que pode mudar:
# {Médiobackground: url transparente (url imagem opcional aqui) no-repeat;Podemos também adicionar um url da imagem.❋ cor de fundo nas guias. {Categoria background: repetir nenhum rolar 0 0 # 5B0720;
❋ Para substituir as cores das guias por outras pessoas,
vamos considerar que, # cat-1 e seguintes é a cor da linha superior para ser exibido. Ali você pode alterar a largura das guias de largura: 164px.Onde ❋ # cat-1: hover e seguintes é a cor da guia quando você passa sobre ele.
❋ A cor do texto irá alterá-la em. Categoria paracolor: # ffffff;
❋ também mudar a cor do texto quando você passa o mouse sobre ele em:. Categoria a: hovercolor: # fff;
Soa complicado, mas a mudança é muito mais uma questão de tentar.
sexta-feira, 10 de junho de 2011
Assinar:
Postagens (Atom)
Subscribe To
Postagens
Comentários
