[css-d] Jump effect on icons
Hi all, continuing the series what web 2.0 requires from a CSS developer, here's an implementation of a jump effect on social icons: http://onwebdev.blogspot.com/2011/06/css-jump-effect-on-icons.html For experienced developers: what happens with CSS3 transitions? Is it possible to create a smooth jump effect using transitions? I hope this simple demo will stimulate further tests and examples. HTH :-) Gabriele Romanato ps. never, ever stop testing! Imagination is what tells us apart from machines. @skynet http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Jump effect on icons
On Saturday, June 25, 2011 4:43:04 pm Gabriele Romanato wrote:
For experienced developers: what happens with CSS3 transitions? Is it
possible to create a smooth jump effect using transitions?
Yes - with just one more line (and the appropriate vendor prefix, of course).
#social a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
transition: background-position .25s ease-out
}
---Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Jump effect on icons
Great Tim!
On Sat, Jun 25, 2011 at 4:57 PM, Tim Climis tim.cli...@gmail.com wrote:
On Saturday, June 25, 2011 4:43:04 pm Gabriele Romanato wrote:
For experienced developers: what happens with CSS3 transitions? Is it
possible to create a smooth jump effect using transitions?
Yes - with just one more line (and the appropriate vendor prefix, of
course).
#social a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
transition: background-position .25s ease-out
}
---Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background problems in IE8
would anyone have an idea why the background image for this site does not show up properly in IE8? it appears to work ok in other browsers I've checked...thanks! http://www.mariancall.com john petroshius __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image link be gone!
Hello,
I'm trying to get my image link to not be noticeable for my floor plan image
here:
http://www.draftingservices.com/floor_plan_drafting.html
I've tried the style below, but it didn't work. Do I have to give my div and
id to get this to work? I believe I know how to do that, but I'm curious why
my style below isn't working?
.textBoxRight
{
width: 200px;
float: right;
margin: 0 0 5px 5px;
padding: 5px;
border: 1px solid #E1E1E1;
background: #E1E1E1;
font-size: x-small;
}
.textBoxRight a:link, a:visited, a:hover {
color: none;
text-decoration: none;
}
Thanks,
Brian =)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
Hello,
not sure what you mean with not noticaable, but for getting rid of the
blue border that is shown in some browsers try
.textBoxRight a img {
border: none;
}
Best regards
Christian
Editura GmbH Co. KG
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de http://www.editura.de
AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548
Geschäftsführer: Stefan Krause · Ralf Szymanski
Am 26.06.2011 01:23, schrieb Brian M. Curran:
Hello,
I'm trying to get my image link to not be noticeable for my floor plan image
here:
http://www.draftingservices.com/floor_plan_drafting.html
I've tried the style below, but it didn't work. Do I have to give my div and
id to get this to work? I believe I know how to do that, but I'm curious why
my style below isn't working?
.textBoxRight
{
width: 200px;
float: right;
margin: 0 0 5px 5px;
padding: 5px;
border: 1px solid #E1E1E1;
background: #E1E1E1;
font-size: x-small;
}
.textBoxRight a:link, a:visited, a:hover {
color: none;
text-decoration: none;
}
Thanks,
Brian =)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
On 6/25/11 7:23 PM, Brian M. Curran wrote:
Hello,
I'm trying to get my image link to not be noticeable for my floor plan image
here:
http://www.draftingservices.com/floor_plan_drafting.html
Thanks,
Brian =)
???
.textBoxRight a {color: #000;}
Best,
Bono 4 U2
--
http://chelseacreekstudio.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
From: Christian Kirchhoff
not sure what you mean with not noticaable, but for getting rid of the
blue border that is shown in some browsers try
.textBoxRight a img {
border: none;
}
Yes, that's what I want to do. For some reason in Firefox I could still see
the border when hovering, after using your code. Therefore I did this, and
it's working now:
.textBoxRight a {color: #000;}
.textBoxRight a img {border: none;}
Thank you!
-Brian
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
???
.textBoxRight a {color: #000;}
Best,
Bono 4 U2
--
Gracias!!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background problems in IE8
2011-06-26 1:39, john petroshius wrote: would anyone have an idea why the background image for this site does not show up properly in IE8? it appears to work ok in other browsers I've checked...thanks! http://www.mariancall.com The background image for the body element seems to deal with just the vertical dotted line between the navigation menu on the left and the content proper. It's there on IE 9. I wonder if the problem is IE 8 specific, i.e. what happens on IE 7. But fixing it might be a major effort, as the page has 251 markup errors as reported by the W3C validator. Many of them are caused by the mixture of HTML and XHTML on the page, but there seem to be many real structural errors like unclosed elements and duplicate id values. So it's difficult say why it seems to work relatively consistently. What happens if you test just your CSS rule for body alone, using a trivial HTML page? If it works, you could test it with your entire stylesheet. And then add parts of HTML markup until the problem reappears. It could be a long way, and rebuilding the page (using valid HTML and a simpler approach) might be a faster way. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
2011-06-26 2:59, Brian M. Curran wrote:
For some reason in Firefox I could still see
the border when hovering, after using your code. Therefore I did this, and
it's working now:
.textBoxRight a {color: #000;}
.textBoxRight a img {border: none;}
I have no idea why setting border to none didn't suffice (as it
The effect is that now there is no visual hint of there being a link in
the first place. So wouldn't it have been simpler to remove the link
markup a ... and /a around the img element? Assuming that you
don't really want the link to be followed.
A colored border, with the colors of link (normally different for
visited and unvisited) is the browsers' classical default way of
indicating an image as a link. It is normally simple to remove it, but
how would you then make people see that there is a link?
Incidentally, it seems that on Firefox 4, I don't see a border around an
image that is a link, by default. It seems that authors need to set the
border explicitly if they want it.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image link be gone!
On 6/25/11 11:00 PM, Jukka K. Korpela wrote: I have no idea why setting border to none didn't suffice It does suffice this end: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.2.18) Gecko/20110614 Firefox/3.6.18 Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical Accordion Menu Style
I'm trying to set the margins back to 0 for the ul class submenu li a 23- A and 23-B under meet our firefighters. I wanted to change the margin to set it back to a heading and set the bg color to black instead of #a60303 red. Any help for the newbi would be great! Thanks Christopher http://www.intuidiv.com/working/fire/test/blog/ All motion is perpetual, he moved away by standing still. In the Land of the Blind, the One Eyed Man is King. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
