http://jsfiddle.net/pCeGu/
See JsFiddle above. Note the itty bitty arrow that pops under the buttons. Is it possible to make that thing fade in/out with the other elements?
Per this question: CSS :after hover Transition
Apparently Firefox 4 is the only browser that currently supports the transitioning of pseudo elements:(
Consider using a unicode graphical character with some absolute positioning as part of your link, instead of using :after.
See: What characters can be used for up/down triangle (arrow without stem) for display in HTML?
Related
I want to fade an article's content to white to signify that further content can be unlocked. I can achieve this by adding an :after element with a white gradient.
But this techniques makes the text under the area under the gradient awkwardly unselectable and unresponsive to hover effects.
How can I produce a similar effect, and still let the user interact properly with the content underneath the gradient?
You can set pointer-events: none on :after
More info and an example: https://css-tricks.com/almanac/properties/p/pointer-events/
Here's the codepen: http://codepen.io/zakkain/pen/dseHt used in aforementioned example.
I have also added a fiddle as an example: https://jsfiddle.net/quzoqone/4/
Use this library: AnimateCSS
There's a lot of cool effects including fadeIn
Seems like only on Chrome there is no way to transform a <text> element using CSS. transform works on all other svg elements, except <text>.
Here's a demo page (on hover, both Circle and Text should move with transition)
I do not want to use the transform attribute, because I want transition to be applied to the text (in the simplest manner).
Does anyone know if there's a ticket open for this on Blink/Webkit (couldn't find it) and also if there's any way of making it work?
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
You need to set the tool tip to not even be shown normally.
#one a.tooltip span {
//display:block;
display:none;
....
}
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
Your span is still in the document flow.
You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.