Jump to content
William Bruno

Repente CSS - [Menus]

Recommended Posts

Bom Dia galera dos padrões web!!! :grin:

 

Acordei essa manhã com vontade de desafiar todos! Muahahaaaa!!

A idéia desse tópico, é fazer lindos menus, usando apenas xHTML e CSS!(e algumas poucas imagens, dependendo do caso)

 

Funciona assim:

Eu faço um menu bonitinho(depois tento estender para outros assuntos) aqui, que vi por ai.. posto uma screen do efeito final que desejo, e vcs quebram a cabeça para resolver o efeito!

Oque acham ?

 

Algumas coisas que influenciarão na avaliação da solução proposta:

-> O número de imagens utilizadas

-> Quão crossbrowser é o efeito que você criou

-> Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados)

-> A elegância da solução*

-> Código válido pela w3c

-> Quão próximo do efeito final você chegou

Os códigos finais devem ser para mim por PM. Assim que atingirmos um certo número de trabalhos entregues, eu crio um post, com todas as soluções, nomeando o autor de cada uma, e posto logo em seguida a minha.

 

* Scripts prontos, como .htc(que resolvem bugs), bibliotecas(jQuery), estão liberados nesses desafios.

Apenas use com coerência, o uso desnecessário ou indevido causará desconto de pontos obtidos.

Evitem ao máximo hacks, cc, js.. mas oque for inevitável, como os bugs do IE, não serão contados como infrações.

 

O repente que não permitir o uso de nada mais além de CSS e xHTML, irei avisar com fontes garrafais.

 

Menus já feitos:

 

Primeiro Menu

 

Imagem Postada

 

 

Segundo Menu

Imagem Postada

 

 

Terceiro Menu

Imagem Postada

 

 

Quarto Menu

Imagem Postada

 

 

Quinto Menu

Imagem Postada

 

 

Sexto Menu

Imagem Postada

 

 

Sétimo Menu Inicio: 15/05/2010

Imagem Postada

 

 

Oitavo Menu (inicio 29/05)

Imagem Postada

 

 

Nono Menu (início 25/06)

Imagem Postada

 

 

Décimo Menu (início 17/09)

Imagem Postada

 

 

Décimo Primeiro Menu (início 17/11)

 

 

Décimo Segundo Menu (início 09/04/12)

 

 

:lol: Décimo Terceiro Menu (início 14/05/13)

 

  • +1 3

Share this post


Link to post
Share on other sites

Primeiro Menu:


Vamos lá... o menu com o efeito que quero, só pra esquentar é este:
Imagem Postada
Abaixo sempre vou colocar as matérias primeiras obrigatórias:
Matéria Prima:
http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg

Os outros efeitos, vcs podem criar como acharem melhor, com CSS puro, com outras imagens, com Javascript..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica: O segundo menu, está no estado :hover (por isso o cursor pointer e tal)


Bom, é isso ai! SE VIREM! http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif
Boa sorte à todos. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

PS: No caso desse menu, o uso de Comentário Condicional se fará necessário por causa de problemas com o IE6.(se alguém conseguir fazer sem, merece meus Parabéns http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif ), ai serão contabilizadas a quantidade de regras aplicadas dentro do CC.
Mas entreguem os trabalhos, mesmo que não funcionando neste ou naquele navegador... conforme forem conseguindo, postem aqui.

Menus Entregues: 6

  • Lucas Guima;
  • XauDH;
  • klonder;
  • Thiago Retondar;
  • William Bruno;
  • Kay_.

Aguardando: 1

  • Ehtnies
Depois de um tempo, eu posto o meu código que gerou a imagem do menu com o efeito que pedi. Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Imagem Postada

 

-> O número de imagens utilizadas [ Uma (além do background) ]

-> Quão crossbrowser é o efeito que você criou [ Testado: FF3.0/IE7 ]

-> Ausência de hacks, comentários condicionais(esses contam pontos negativos, caso usados) [ Não há ]

-> A elegância da solução [ Código? ]

-> Código válido pela w3c [ XHTML e CSS ]

-> Quão próximo do efeito final você chegou [ Mínima diferença de alinhamento do texto no Hover do link ]

Share this post


Link to post
Share on other sites

Hum... vamos fazer o seguinte:

Me mandem os códigos por PM... qndo tivermos mais alguns entregues, eu crio um post com a solução de cada um, e posto logo embaixo a minha, que funciona no IE6(com UM comentário condicional).

Share this post


Link to post
Share on other sites

Códigos Primeiro Menu

Lucas Guima:
primeiroMenu.html
<!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">'>http://www.w3.org/1999/xhtml">
<head><title>F.E.A.R.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="cont_menu">
        <div class="link">
                <div class="detalhe" id="d1"></div>
                <a href="#" onmouseover="aHover('l1', 'd1')" onmouseout="aLink('l1', 'd1')"><span class="texto" id="l1">Home</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d2"></div>
                <a href="#" onmouseover="aHover('l2', 'd2')" onmouseout="aLink('l2', 'd2')"><span class="texto" id="l2">Game</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d3"></div>
                <a href="#" onmouseover="aHover('l3', 'd3')" onmouseout="aLink('l3', 'd3')"><span class="texto" id="l3">Dicas</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d4"></div>
                <a href="#" onmouseover="aHover('l4', 'd4')" onmouseout="aLink('l4', 'd4')"><span class="texto" id="l4">Voltar</span></a>
        </div>
</div>
</body>
</html>
menu.css
body {
        background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat 0 0;
        margin: 0;
        }
#cont_menu {
        margin: 50px 0 0 50px;
        width: 120px;
        height: 195px;
        }
a:Link {
        color: #000;
        cursor: hand;
        }
a:Visited {
        color: #000;
        cursor: hand;
        }
a:Hover {
        color: #682800;
        cursor: hand;
        }
.texto:Hover {
        text-decoration: underline;
        }
.space {
        width: 10px;
        height: 5px;
        }
.link {
        background: url(bg.png) no-repeat center center;
        width: 120px;
        height: 45px;
        }
.texto {
        background-color: #FFF;
        float: right;
        margin: 10px 10px 0 0;
        padding-left: 5px;
        width: 95px;
        height: 22px;
        }
.detalhe {
        background-color: #FFF;
        float: left;
        width: 10px;
        height: 10px;
        }
menu.js
function aHover(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#EFBA2C";
        vvd.style.backgroundColor="#EFBA2C";
        }
function aLink(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#FFF";
        vvd.style.backgroundColor="#FFF";
        }

XauDH:
primeiroMenu.html
<!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">'>http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Desafio iMasters - Menu</title> 
<style type="text/css" media="screen,projection"> 
body {background:#000; margin:0; padding:0; font:14px Verdana;}
#menu {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/bg.jpg');
	width:400px;
	height:300px;
	position:absolute;
}
#menu ul {
	margin:50px 0 0 50px;
	padding:0;
	list-style:none;
}
#menu ul li {
	line-height:45px;
	text-indent:15px;
}
#menu ul li a {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menu.png');
	width:120px;
	height:45px;
	margin:5px;
	text-decoration:none;
	color:#000;
	display:block;
}
#menu ul li a:hover {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menuhover.png');
	text-decoration:underline;
	cursor:pointer;
}
</style> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/jquery.js"></script> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/png.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () {$(document).pngFix();});
</script> 
</head> 
 
<body> 
 
<div id="menu"> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">Game</a></li> 
		<li><a href="#">Dicas</a></li> 
		<li><a href="#">Voltar</a></li> 
	</ul> 
</div> 
 
</body> 
</html>
jquery.js
http://www.rafaelhonorio.com.br/menu/jquery.js
png.js
http://www.rafaelhonorio.com.br/menu/png.js



klonder
primeiroMenu.html
<html>
<head>
</head>
<style type="text/css">
#principal {border:0px; width:400; height:300; background-image:url('http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg');}
td.mnOUT {
background-color:#FFFFFF; width:100; height:22;
font-family:'times new roman,tahoma,arial'; font-size: 13px;
padding-left:5px;
}

td.mnOVER {
background-color:#EFBA2C; width:100; height:22; color:#6E2715;
font-family:'times new roman,tahoma,arial'; font-size: 13px;
padding-left:5px;
}

td.mnPeqOUT {background-color:#FFFFFF; width:10; height:10;}
td.mnPeqOVER {background-color:#EFBA2C; width:10; height:10;}

a.link1:link {color:#000000; text-decoration:none;}
a.link1:visited {color:#000000;}
a.link1:hover {color:#6E2715; text-decoration:underline;}

td.bordas {opacity:0.7; filter:alpha(opacity=70);}
</style>

<script type="text/javascript">
function efeitoON(mn) {
var objMn = document.getElementById("menu"+mn);
var objMnPeq = document.getElementById("menuPeq"+mn);
	objMn.className = 'mnOVER';
	objMnPeq.className = 'mnPeqOVER';
}

function efeitoOFF(mn) {
var objMn = document.getElementById("menu"+mn);
var objMnPeq = document.getElementById("menuPeq"+mn);
	objMn.className = 'mnOUT';
	objMnPeq.className = 'mnPeqOUT';
}
</script>

<body>
<table id="principal">
<tr>
	<td width="50px"> </td>
	
	<td width="120px">
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq1" class="mnPeqOUT" onmouseover="efeitoON(1)" onmouseout="efeitoOFF(1)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu1" class="mnOUT" onmouseover="efeitoON(1)" onmouseout="efeitoOFF(1)"><a class="link1" href="home.htm" style="width:100px; height:100%; padding-top:3px;">Home</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq2" class="mnPeqOUT" onmouseover="efeitoON(2)" onmouseout="efeitoOFF(2)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu2" class="mnOUT" onmouseover="efeitoON(2)" onmouseout="efeitoOFF(2)"><a class="link1" href="games.htm" style="width:100px; height:100%; padding-top:3px;">Games</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq3" class="mnPeqOUT" onmouseover="efeitoON(3)" onmouseout="efeitoOFF(3)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu3" class="mnOUT" onmouseover="efeitoON(3)" onmouseout="efeitoOFF(3)"><a class="link1" href="dicas.htm" style="width:100px; height:100%; padding-top:3px;">Dicas</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
		
		<table border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top:5px;">
		<tr><td id="menuPeq4" class="mnPeqOUT" onmouseover="efeitoON(4)" onmouseout="efeitoOFF(4)"></td>
			<td colspan="2" class="bordas" style="background-color:#506545; width:110; height:10"></td>
		</tr>		
		<tr>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
			<td id="menu4" class="mnOUT" onmouseover="efeitoON(4)" onmouseout="efeitoOFF(4)"><a class="link1" href="voltar.htm" style="width:100px; height:100%; padding-top:3px;">Voltar</a></td>
			<td class="bordas" style="background-color:#506545; width:10; height:22"></td>
		</tr>		
		<tr>
			<td colspan="3" class="bordas" style="background-color:#506545; width:120; height:13"></td>
		</tr></table>
</td>
	
	<td> </td>
</tr>	
</table>
</body>
</html>


Thiago Retondar
primeiroMenu.html
<!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">'>http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Thiago Retondar" />
<meta name="reply-to" content="thiagoretondar1@gmail.com" />
<meta http-equiv="content-language" content="pt-br" />
<meta http-equiv="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<title>Thiago Retondar - Repente CSS - Primeiro Menu</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

body{
	background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat;
	color: #fff;
}
ul{
	list-style: none;
	width: 120px;
	height: 195px;
	margin: 50px 0 0 50px;
}
ul li{
	width: 120px;
	height: 45px;
	margin: 0 0 5px 0;
	background: url(backgroundLi.png) repeat;

}
ul li a{
	width: 95px;
	height: 22px;
	color: #000;
	background: #fff;
	margin: 10px 0 0 10px;
	padding: 0 0 0 5px;
	font-size: 16px;
	float: left;
}
ul li a span{
	width: 10px;
	height: 10px;
	background: #fff;
	margin: -10px 0 0 -15px;
	float: left;
}
ul li a:hover, ul li a:hover span{
	background: #EFBA2C;
	color: #682B0F;
	
}
</style>
</head>

<body>
<!--
Browsers testados:
Mozilla Firefox 3.5.1 - Linux & Windows
Epiphany 2.26.1 - Linux
Flock 2.5 - Linux 
Safari 4.0(530.17) - Windows
Google Chrome 2.0.180.0 - Widnows
Opera 9.64 - Windows
Internet Explorer 7 - Windows
Internet Explorer 8 - Windows

Preferi não dar suporte ao Internet Explorer 6, por ser um desafio e por que esse browser já deveria estar em desuso à muito tempo. Quem sabe no próximo, até por que nesse era aplicar o haslayout.
-->
	<ul>
		<li><a href="#"><span></span>Home</a></li>
		<li><a href="#"><span></span>Game</a></li>
		<li><a href="#"><span></span>Dicas</a></li>
		<li><a href="#"><span></span>Voltar</a></li>
	</ul>
</body>
</html>

William Bruno
primeiroMenu.html
<!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="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>William Bruno - Primeiro Menu - Repente CSS [Menus]</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu {
	background: url('fear_2.jpg');
	height: 250px;
	width: 350px;
	padding: 50px 0 0 50px;

}
#menu li {
	background: url('bgLi.png');
	height: 25px;
	line-height: 22px;
	width: 100px;
	padding: 10px;
	margin-bottom: 5px;
	position: relative;
}
#menu li a {
	color: #000;
	background: #fff;
	display: block;
	text-decoration: none;
	padding-left: 10px;
	overflow: hidden;
}
#menu li a:hover {
	color: #672912;
	text-decoration: underline;
	background: #efba2c;
	display: block;
}
#menu li a:hover span {
	background: #efba2c;
}
#menu li a span {
	background-color: #fff;
	display: block;
	position: absolute;
	height: 10px;
	width: 10px;
	top: 0;
	left: 0;
	overflow: hidden;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu li {
	position: static;
}
</style>
<script src="./DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('#menu li');
</script>
<![endif]-->
</head>
<body>
	<ul id="menu">
		<li><a href="#"><span></span>Home</a></li>
		<li><a href="#"><span></span>Game</a></li>
		<li><a href="#"><span></span>Dicas</a></li>
		<li><a href="#"><span></span>Voltar</a></li>
	</ul><!-- /menu -->
</body>
</html>
DD_belatedPNG_0.0.7a.js
(unicamente para correção do problema de transparência em PNGs do Internet Explorer 6)
http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js
Imagem que usei:
bgLi.png
Imagem Postada

Kay_
<!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">'>http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; utf-8" />
                <title>Primeiro Menu por Kay_(victorwd)</title>
                <style type="text/css">
                        * {
                                margin: 0px;
                                padding: 0px;
                                list-style: none;
                                text-decoration: none;
                                color: black;
                        }
                        
                        body {
                                background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat;
                        }
                        
                        #menu {
                                margin: 50px 50px;
                        }
                        
                        li {
                                width: 100px;
                                height: 20px;
                                background-color: white;
                                border: #7d8764 solid 10px;
                                margin-bottom: 5px;
                                
                        }
                        
                        li border {
                                opacity:0.40;
                                -moz-opacity: 0.40;
                                filter: alpha(opacity=40);
                        }
                        
                        .quadrado{
                                position: absolute;
                                width: 10px;
                                height: 10px;
                                background-color: white;
                                top: -10px;
                                left: -10px;
                        }
                        
                        a {
                                position: relative;
                                display: block;
                                width: 100px;
                                height: 21px;
                        }
                        
                        #menu a:hover {
                                text-decoration: underline;
                        }
                        
                        #menu a:hover .quadrado, #menu a:hover{
                                background-color: #efba2c;
                        }
 
.formatacao_texto {
        margin-left: 5px;
}
                </style>
        </head>
        <body>
                <div id="menu">
                <ul>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Home</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Game</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Dicas</span></a></li>
                        <li><a href="#"><span class="quadrado"></span><span class="formatacao_texto">Voltar</span></a></li>
                </ul>
                </div>
        </body>
</html>
Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Avaliações:

Online:

Lucas Guima
XauDH
klonder
Thiago Retondar
William Bruno

Em geral, todos conseguiram reproduzir o efeito.
Achei bem bacana, que cada um seguiu uma linha diferente...

Estado :link
Lucas Guima: Está com underline, e não deveria
XauDH: Correto
klonder: Correto
Thiago: Está com underline, e não deveria

Estado :hover (o detalhe aqui, é que coloquei o pointer na imagem longe da palavra, e o underline apareceu)
Lucas Guima: --
XauDH: Correto
klonder: Só funciona na palavra
Thiago: --

Ninguém usou hacks, mas eu precisei de um CC para ativar o IE6, e de um position static, por causa de um bug do DD_belatedPNG.fix.
O do klonder é o único que não valida, por causa do uso das propriedades proprietárias 'opacity' no css, falta de DTD e charset.

Quanto a marcação:
Lucas Guima: Achei um pouco suja, DIVMANIA
XauDH: A mais clean de todas, mas por causa disso, teve que usar 2 imagens uma para cada estado do link.
Mas cometeu um 'tropeço' comum, ao usar uma DIV desnecessária, como pai do UL.
klonder: Tabelas um pouco confusas.. deve ter dado um bom trabalho
Thiago: Afeta todos os ULs da página

Suporte ao IE6
Lucas Guima: Os itens do menu se separaram muito, não corrigiu a transparência, bug do haslayout deixa o quadradinho com mais altura do que foi declarado(overflow: hidden, resolve)
XauDH: faltou a cor do hover
klonder: funcionou igual
Thiago: Imagens não transparentes, faltou o quadradinho no canto
Meu: funcionou igual (e ai de mim, se eu não fizesse funcionar.. hAUhauha )

Essa é a minha avaliação inicial.

Kay_
Eu nao entendi essa declaracao aqui: li border {
pelo menos no meu FireFox3.0 nao funcionou. você usou muitas classes desnecessarias, fez uma DIV de container pro UL, que poderia nao existir tb, pois o UL ja eh um elemento nivel de bloco muito bom.
No mais, a solucao ficou bacana, mas poderia ter evitado essa montoeira de spans, e classes.

Share this post


Link to post
Share on other sites

Pessoal, comentem aí o que acharam do desafio.

 

Para não ficaram tímidos, começo eu:

 

Achei todos bem legais, com exceção de um. O do klonder. Eu não entendi o por que de usar tabelas.

 

Mas foi até bom, pois o pessoal vê como é mais fácil usar um código semântico.

 

Sobre os comentários do Bruno, só não concordo com uma coisa:

 

Thiago: Afeta todos os ULs da página

 

Como só vai haver somente esse conteúdo, achei totalmente desnecessário colocar um id. Entendeu? Mas está boa.

 

Todos se sairam muito bem!

 

E comentem aí, pessoal.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

P.S.: Só agora que vi que não tinha underline nos links. AiohOIAhsoIAhoiHAoISHoiHOIAsOIAshoisHAIOshhsIOSHaio

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Segundo Menu:


Imagem Postada

@Edit: Mudei um detalhezinho pequeno

Os efeitos, vcs podem criar como acharem melhor, com CSS puro, com Javascript, mas tentem não utilizar imagens..
só lembrando das regras que citei, e que a elegância da solução vai contar na avaliação.
Dica: O terceiro item do menu, está no estado :hover (por isso o cursor pointer e tal)


Bom, é isso ai! SE VIREM! http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif
Boa sorte à todos. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif


Menus Entregues: 6 (até o momento)

  • Thiago Retondar;
  • ~Tiu Talk~;
  • William Bruno;
  • XauDH;
  • pslucasps;
  • klonder.

Aguardando: 1

  • Lucas Guima
Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Estado :link

Lucas Guima: Está com underline, e não deveria

não... http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

EDIT: Ah, no IE6... http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif E deu certo o overflow, valeu! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

Estado :hover (o detalhe aqui, é que coloquei o pointer na imagem longe da palavra, e o underline apareceu)

Lucas Guima: --

Não entendi os tracinhos...

 

E realmente, tô saindo da Divmania agora. http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

Gostei de ver várias maneiras e soluções! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Bora pro próximo! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Não entendi os tracinhos...

 

é que você já tinha errado o estado :link, então não tinha com acertar o :hover

A idéia é fazer aparecer o underline, e não que ele fique constante lá.

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

@Pessoal que está fazendo o segundo menu:

 

podem me entregar por MP os códigos, ou ao Bruno, depois eu posto aqui todos.

 

O meu já está pronto. Fiz rapidinho, pois estou sem tempo, então antes que apareça algo, já o fiz.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Esse desafio está sendo muito bom!

 

Estou começando à rever meus conceitos. O Bruno sabe do que estou falando. http://forum.imasters.com.br/public/style_emoticons/default/coolio.gif

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites
@William Bruno: Parabéns pela a iniciativa. Muito boa mesmo, ela iinclusive ajuda a aprender mais sobre o assunto. Bom tentei aqui mas como bom novato não consegui http://forum.imasters.com.br/public/style_emoticons/default/blush.gif Bom, deixa pra próxima. Estou ancioso pra ver como o pessoal solucionou essa. Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

Alguém tem alguma dica de como alinhar e como fazer esse efeito?

 

Rapaz.. fiquei um bom tempo aqui pensando, em como te responder isso.

Vamos lá.

 

Eu não fiz 'milagres', e nem usei alguma propriedade esquecida/desconhecida do CSS.

As soluções já apresentadas para o Segundo Menu, diferem bastante uma da outra.

 

Mas vou tentar falar como penso quando tenho que resolver problemas assim:

HTML é estritamente quadrado, não existe nenhum elemento ou propriedade, para deixar redondo, inclinado..

Procure enchergar os poligonos.

 

O Segundo Menu do desafio, se você olhar bem, fica maior no estado :hover(passar do mouse), do que no estado :link(normal).

Mas ele não fica por completo.. tem os recortezinhos nos quatro cantos.. você pode pensar tanto, em fazer os recortes(as técnicas de arredondamento com CSS pensam assim), como fazer o 'novo elemento', no passar do mouse.

 

Quantas 'partes' você encherga ? dependendo do caminho que vai seguir, você pode enxergar a cruz, ou enxergar os cubos nos cantos.

 

Bom galera, quem tá vendo o tópico agora, pode fazer e entregar o Primeiro Menu, ou anteriores tb!(quando estivermos avançado mais)

Sintam-se a vontade!!!

 

Enviou pra quem XauDH ? eu não recebi ..

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.