RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte sobre: Multimedia > Recursos Webmasters & Diseño Web

Respuesta
 
Herramientas Desplegado
Antiguo 26-dic-2011     #1
Predeterminado Creando una cinta para el banner de nuestra web..

Hola que tal.. en esta ocación les traigo como crear diseño básico con un truco para crear un banner de tipo cinta... con ciertos span para generar el truco (ya que tenemos que saber que la etiqueta apan es una etiqueta estructurar a nivel caracter) por tanto nos permite crear una y otra etiqueta anidada dentro de otra, como por ejemplo en este caso las hemos anidado dentro de una etiqueta h1.. sin más prehambulos al tutorial y Feliz Navidad para TOD@S..!

Código html
<body>
<div id="container">
<h1> Intercambiosvirtuales.<span class="caracter">org</span> <span class="truco"></span> </h1>
<p>En busca del conocimiento...</p>
<div class="content">

</div>
</div>
</body>




Estilos css
<style type="text/css">
#container {
background: #870000;
margin: auto;
width: 900px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
p{margin:0px; position:absolute; top:78px; left:370px; text-shadow: 0 0 3px #f00; color:white;}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px 15px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
box-shadow: inset 0 0 7px rgba(0,0,0,.7);
}
.truco {
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 100%;
left: 0;
box-shadow: inset 0 0 3px rgba(0,0,0,1);
position: absolute;
}
.content{
width:630px;
height:80%;
background:white;
margin:0 300px 0 20px;
border-radius:0 0 20px 0;
}
.caracter{font:size: 120px; color:red; text-shadow:0 0 5px #f00;}
</style>

<!--[if IE]>
<style>
.truco { top: 100%; }
</style>
<![endif]-->

</head>



<div align=center><font face=Georgia><b><i><font size=4><font color=Red>La creatividad no tiene límites los límites los poseemos nosotros</font></font></i></b></font></div>

Última edición por baduser; 26-dic-2011 a las 12:36
Responder Citando
Los siguientes 7 usuarios agradecen a Hectorsito20 por este mensaje:
baduser (26-dic-2011), Cat (26-dic-2011), cramercaba (26-dic-2011), Eloy58 (26-dic-2011), GenuiWorld (26-dic-2011), gruposasp (30-dic-2011), Hunted (26-dic-2011)
Antiguo 26-dic-2011     #2
Predeterminado

Responder Citando
Los siguientes 2 usuarios agradecen a baduser por este mensaje:
cramercaba (26-dic-2011), GenuiWorld (26-dic-2011)
Antiguo 26-dic-2011     #3
Predeterminado

Responder Citando
Los siguientes 2 usuarios agradecen a GenuiWorld por este mensaje:
baduser (26-dic-2011), cramercaba (26-dic-2011)
Antiguo 26-dic-2011     #4
Predeterminado



Conocimiento: Máximo Poder
Enviar un mensaje por Yahoo  a Hunted Responder Citando
Los siguientes 4 usuarios agradecen a Hunted por este mensaje:
baduser (26-dic-2011), cramercaba (26-dic-2011), GenuiWorld (26-dic-2011), Hectorsito20 (26-dic-2011)
Antiguo 26-dic-2011     #5
Predeterminado




Aprende lo que puedas y enseña lo que sepas, el conocimiento es patrimonio de TODOS
Responder Citando
Los siguientes 2 usuarios agradecen a Eloy58 por este mensaje:
baduser (26-dic-2011), Hectorsito20 (26-dic-2011)
Antiguo 26-dic-2011     #6
Predeterminado



La vida es lo que pasa mientras se instalan las actualizaciones de Windows
Responder Citando
Los siguientes 2 usuarios agradecen a cramercaba por este mensaje:
baduser (26-dic-2011), Hectorsito20 (26-dic-2011)
Antiguo 26-dic-2011     #7
Predeterminado

Responder Citando
Usuarios que han agradecido este mensaje de Cat
cramercaba (26-dic-2011)
Respuesta

Etiquetas
banner, css3, html5, truco css3


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
Regedit - Seguridad, Reestrinccion y Bloqueo Arleanjose XP/2000/2003/NT 27 29-jul-2012 21:12
Causas para que un programa no abra [Información] Hunted Tutoriales & Videos Tutoriales 8 31-oct-2011 17:18
15 formas de tomar antibióticos naturales hopelin Medicina y Salud 6 08-sep-2011 21:58
15 formas de tomar antibióticos naturales hopelin Medicina y Salud 5 23-feb-2011 04:19


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2018, Jelsoft Enterprises Ltd.
Ad Management by RedTyger