Jarred Bishop: efecto hover
2 seguidores
Buenasss,
Llevo un rato largo tratando de averiguar el código que el gran Jarred Bishop ha utilizado para crear su sencillo y elegante efecto hover, en el que un texto deja paso a otro al pasar el cursor por encima, pero no lo consigo.
Se puede ver en su Tumblr tanto en el título como en las opciones de menú, y si alguien tiene la gana y la amabilidad de exponer el modus operandi, le estaré muy agradecido.
Es CSS puro, eso sí.
markshock
Sencillamente cambia las clases de 2 estilos... jugando con una clase .hide{} para esconder o mostrar un texto, con css.
en el html tiene esto:
<h1 class="content">jb.tumblr</h1>
<h4 class="content"><span class="mdash">&mdash; </span>A tumblelog.</h4>
<span class="h1 hide"><a href="/">First Page?</a></span>
<span class="h4 hide"><span class="mdash">&mdash; </span>It's gonna be ok.</span>
el secreto está aquí:
#head{
position:absolute;
top:-5px;
left:-5px;
display:block;
width:240px;
cursor:pointer;
padding:5px;
}
#head:hover{
}
#head h1,
#head .h1{
font-size:36px;
font-weight:bold;
color:#000;
font-family:Helvetica, Arial;
letter-spacing:-1px;
-webkit-text-stroke:1px transparent;
line-height:36px;
}
#head .h1 a{
text-decoration:none;
color:#000;
}
#head h4,
#head .h4{
font-size:11px;
color:#666;
color:rgba(0,0,0,.5);
font-family:'Lucida Grande', Helvetica;
}
#head h4 .mdash{
color:rgba(0,0,0,.2);
}
#head:hover h1,
#head:hover h4{
display:none;
}
#head:hover .h1,
#head:hover .h4{
display:block;
}
danielbelchi
Ahm, tendré que estudiarlo detenidamente.
Otra cosa, marshock, tú que tienes conocimiento de XHTML y CSS: estoy tratando de personalizar el asqueroso theme que trae por defecto Blogger y quiero ponerle a los enlaces predeterminados (tags <a></a>) un border-bottom que no se vea en las imágenes al convertirlas en enlaces (tags <a img>), ¿es posible sin crear otra clase distinta?
Me explico con un código CSS sencillo:
a, a:visited, a:active { color: #000000; border-bottom: 1px solid #DDDDDD; }a:hover { color: #000000; border-bottom: 1px solid #000000;}
a img { border-bottom: none; }
a img:hover {border-bottom: none; }
Pero a las <img> enlazadas les sigue apareciendo el dichoso border-bottom.
A ver si me echas una manita. Gracias por todo, tío.
markshock
Podrías pasarme el enlace del blog para que lo vea... ? de nada ;)
danielbelchi
Las probaturas no las estoy aplicando en Blogger, Marc, pero te paso el código que he estado empleando para el theme de Posterous que viene a ser lo mismo. De hecho quiero cambiarme a otro CMS porque el de Posterous esconde un montón de CSS que en principio no configuras, y estoy maniático perdío. Tumblr es la opción que más me gusta, ya lo creo.
El código del theme que estoy utilizando en Posterous es el siguiente:
<!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="en" lang="es-ES">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Soy Daniel Belchí Gabarrón y este es mi blog. Aquí comparto todo lo que me inquieta sobre ilustración y pintura tradicional y digital, cómic, animación, diseño gráfico, fotografía, tipografía, diseño web..., pero también me hago eco de mis propias reflexiones, críticas y opiniones que poco o nada tienen que ver." />
<meta name="keywords" content="ilustracion, pintura, digital, comic, animacion, diseño grafico, fotografia, tipografia, diseño web, programacion, arte, critica, reflexion, personal, cine, musica, freelance, independiente, bullas, murcia, españa" />
<link rel="icon" href="/images/favicon.png" type="image/x-png"/>
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Accent Color" content="#000000"/>
<title>{PageTitle}</title>
<style type="text/css">
html { font-size: 13px; margin: 0; padding: 0;}
body { background: {color:Background}; color: #000000; text-align: justify; font: normal 1em/1.5 Helvetica, Arial, Verdana; margin: 0; padding: 0; }
a, a:visited, a:active { color:#000000; text-decoration: none; border-bottom: 1px solid #DDDDDD !important; }
a:hover { color: #000000; text-decoration: none; border-bottom: 1px solid #000000 !important;}
a img { text-decoration: none; border-bottom: 0 none !important;}
a img:hover { text-decoration: none; border-bottom: 0 none !important; }
a.posterous_retweet { -moz-border-radius: 0px 0px 0px 0px !important;
background-color:#FFFFFF !important;
text-decoration: underline !important;
color:#33ccff !important;
font-family:Helvetica, Arial, Verdana;
font-size:11px;
margin-left:none;
padding:none;
}
a.posterous_retweet:hover { color:#33ccff !important; background-color: none !important; text-decoration: none !important; }
p { margin: 1.5em 0 1.5em; }
ul, ol { margin: 0 1em 1.5em; padding: 0 1em; }
blockquote { border-left: 1px solid #DDDDDD !important; color: #000000 !important; font-style: italic; margin: 0 1em 1.5em; padding: 0 1em; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; }
h2 { font-size: 1.5em; line-height: 1.1em; margin: 0 0 1em; }
#container { width: 500px; margin: 0 auto; padding: 0 10px; }
#posterous-nav-outer { background: {color:Accent Color}; color: #fff; padding-top: 2px; padding-bottom: 2px; text-align: center; }
div.posterous_topnav_container { font-size: 11px; list-style-type: none; margin: 0 auto; text-align: right; width: 510px; }
div.posterous_topnav_container li { display: inline; margin-left: 0.75em; }
div.posterous_topnav_container li a { color: #eee; }
#header { margin: 60px 0 10px; padding: 0 0 0.5em; }
#header h1 { font-size: 3em; line-height: 1; margin: 0; }
#header h1 a { text-decoration: none; }
#header h2 { font-size: 1em; font-style: italic; line-height: 1.5; margin: 0.75em 0; }
/* POST STYLES */
.post { border-bottom: 1px solid #DDDDDD; margin: 0 0 20px; padding: 0 0 50px; position: relative; }
.post_show { border-bottom: none; }
.date { font-size: 13px; color: #BBBBBB; position: absolute; left: ?120px; top: 0px; text-align: right; }
.post-footer { font-size: 0.71428em; line-height: 1.66667em; margin: 1.5em 0; text-align: right; }
.posterous_quote_citation { margin: 10px 0px 10px 0px;}
.bodytext { padding-top: 24px; }
div.bodytext > *:first-child { margin-top: 0px !important; margin-bottom: 0px !important; }
.bodytext h2 a { text-decoration: none; border-bottom:none; }
/* PAGINATION */
.pagepagination { font-size: 13px; color: #BBBBBB; text-align: center; }
/* EDITBOX */
.editbox a { font-size: 11px; color: red; text-decoration: none; font-family: Helvetica, Arial, Verdana; }
.editbox ul { margin: 0px; padding: 0px; }
div.editbox { visibility: hidden; height: 16px; position: absolute; left: 337px; top: 0px; }
div.post:hover div.editbox { visibility: visible; }
/* SEARCH */
.searchunit { font-size: 11px; }
/* COMMENTING */
.spanningheader { position: absolute; left: -100px; display: none; }
.spanningheader h4 { margin: 0 0 !important; font-size: 10px !important; font-weight: normal !important; }
/* SECONDARY */
#secondary .user_info { float: right; margin-top: 45px; }
#secondary .user_info img { border: 1px solid #DDDDDD; }
#secondary #about { margin-right: 110px; }
#posterous_bar { left: 50%; margin-left: -250px; top: 4px;}
div.posterousHeaderExpandedDivLeft, div.posterousHeaderExpandedDivRight { background-color: {color:Background} !important;}
.posterous_retweet_widget a { text-decoration: none; }
</style>
</head>
<body>
{block:PosterousBar direction="right" translucent="true" /}
<div id="posterous-nav-outer">
<div class="posterous_topnav_container"></div>
</div>
<div id="container">
<div id="header">
{block:HeaderImage}
<div class="header_image">
<a href="{SiteURL}" style="border: none;"><img src="{HeaderImageURL-500}" alt="{Title} - {Description}"/></a>
</div>
{Else}
<h1><a href="{SiteURL}">{Title}</a></h1>
<h2>{Description}</h2>
{/block:HeaderImage}
<br /><br /><br />
{block:Show}
<p style="margin-top: 20px; margin-bottom: 0px; text-align: right;">
<a href="{SiteURL}">&larr; volver a la portada</a>
</p>
{/block:Show}
</div>
<div id="main">
{block:Posts}
<div class="post{block:Show} post_show{/block:Show}" id='postunit_{PostID}' >
{block:EditBox/}
<span class="date">{DayOfMonth} del {MonthNumber} de {Year}</span>
<div class="bodytext">
{block:Title}<h2 style="padding-bottom: 15px;"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
</div>
{block:TagList}
<div style="font-size: 11px; line-height: 14px; color: #BBBBBB; margin-top: 15px;">
{block:TagListing}
<a href="{TagLink}" style="color: #BBBBBB; text-decoration: none;">#{TagName}</a>&nbsp;
{/block:TagListing}
&nbsp;&nbsp;&#x25CF;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{Permalink}" style="color: #BBBBBB">{ShortPermalink}</a>
&nbsp;&nbsp;&nbsp;&#x25CF;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/?status=¡No te pierdas este post del blog de Daniel Belchí!: {ShortPermalink}" style="color:#33ccff">twittéalo</a>
</div>
{/block:TagList}
<div style="margin-top: 25px;">
{block:Comments}
{block:CommentsList
action_id='comment_link_{PostID}'
target_element='post_commentarea_{PostID}'}
<div id='post_commentarea_{PostID}'></div>
<p><a href="#" id='comment_link_{PostID}'>{CommentCount} comentarios</a></p>
{/block:CommentsList}
{/block:Comments}
</div>
</div> <!-- end .post -->
{/block:Posts}
{block:List}
<div class="pagepagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">&larr;&nbsp;Futuro</a>
{/block:PreviousPage}
&nbsp;&nbsp;{CurrentPage}/{TotalPages}&nbsp;&nbsp;
{block:NextPage}
<a href="{NextPage}">Pasado&nbsp;&rarr;</a>
{/block:NextPage}
{/block:Pagination}
</div> <!-- end .pagepagination -->
{/block:List}
</div> <!-- end #main -->
<br /><br /><br /><br />
<div id="secondary">
<div class="user_info">
<a href="{ProfileLink}"><img src="{PortraitURL-75}" width='75' height='75' class='profile_border'/></a>
</div>
<div id="about">
<h2>Yo…</h2>
<p>{Profile}</p>
<p><a href="mailto:danielbelchi@gmail.com"><img alt="email" style="border-width:0" src="https://dl.dropbox.com/u/1217580/Posterous/email_16.png" width='16' height='16' style="border: 0 none;"/></a>&nbsp;&nbsp;<a href="{RSS}"><img alt="RSS" style="border-width:0" src="https://dl.dropbox.com/u/1217580/Posterous/rss_16.png" width='16' height='16' style="border: 0 none;"/></a>&nbsp;&nbsp;<a href="http://www.flickr.com/photos/danielbelchi"><img alt="Flickr" style="border-width:0" src="https://dl.dropbox.com/u/1217580/Posterous/flickr_16.png" width='16' height='16' style="border: 0 none;"/></a>&nbsp;&nbsp;<a href="https://twitter.com/danielbelchi"><img alt="Twitter" style="border-width:0"src="https://dl.dropbox.com/u/1217580/Posterous/twitter_16.png" width='16' height='16' style="border: 0 none;"/></a></p>
</div>
<br />
<p style="font-size: 11px; line-height: 14px; color: #BBBBBB; margin-top: 15px;">Basado en el theme de <a href="http://cubicle17.com/" style="color:#BBBBBB">Bill Israel</a>
<br />
Iconos de <a href="http://komodomedia.com/" style="color:#BBBBBB">Komodo Media</a>
<br /><br />
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/es/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/es/80x15.png" /></a>
</p>
</div> <!-- end #secondary -->
</div>
</body>
</html>
?
La parte que está en negrita del código es la que me trae de cabeza, porque el Posterous este trata todo el {Body} por igual, de modo que no puedo crear clases específicas para las imágenes definiendo border-bottom: 0 none;
En fin, he intentado varias cosas pero nada, creo que no voy a tener suerte. Inténtalo si te apetece en cualquier caso.
Gracias de nuevo, Marc.
danielbelchi
Bueno, yo he llegado a la conclusión de que simplemente no se puede hacer. He encontrado un buen esqueleto en Tumblr para construir el blog que quiero y no sé/puedo en Posterous, donde no tengo el problema del border-bottom porque sí se pueden crear clases para el cuerpo.
Así que ya está, tío, que le den por saco al problema y al Posterous, que por hacerlo tan fácil lo han convertido en algo abominable para quien no se conforma con lo que le dan.
Mil gracias de nuevo, amigo.
markshock
de nada Dani, ya sabes donde estamos ;)