I've found this nice slick effect in here - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html.
Here is a copy of this - http://jsfiddle.net/cyvvilek/cL7x6/3/
I was wondering if there is any way to get this effect on hover.
Together with some CSS animation would give a nice effect, I think.
There is a heavy use of :after and :before in CSS so it cannot be #box:after:hover or anything like that :)
I've heard about possibility of nesting stuff in SASS or LESS..
Can this be done with CSS alone?
Thx
Unfortunately, pseudo elements like :after and :before cannot be transitioned yet. SASS and LESS compile down to CSS, so everything technically possible with SASS or LESS, is possible with plain CSS.
What you can do is have a seperate element (maybe div) with the top shadow and fade it in and out on hover. Alternatively you can use an image.
Related
I have a simple Polymer app consisting of two elements. The first, x-app, element has the second element, x-inner, inside its local dom.
Inside the x-inner element I define a keyframe animation that is called spin that I apply on the :host. Inside the x-app I also apply the same animation name, spin, but the keyframe animation is not defined. Although, the spin animation works on both elements. It seems to me that the #keyframe leaks out from the inner element.
Is this the behaviour that is expected? Or do I define the #keyframe animation incorrectly?
Please see my jsbin for an example: jsbin
It is because you are using "Shady" DOM, which doen't really isolate the components CSS styles, as a real Shadow DOM would do.
Try defining shadow instead of shady and it will work.
jsbin example
I'm trying to position two buttons side-by-side using Susy and this seems to work fine:
.fifty {
#include span-columns(3);
#include nth-omega(2n);
}
However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.
I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.
This is related to "How to include padding in column width with Susy", but your second option is a bit different. This problem isn't specific to Susy - it's true of any fluid layout - But Compass and Susy can help you with the first solution:
Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:
#include border-box-sizing;
Or just use the Compass box-sizing(border-box) mixin where you want it (on these buttons).
Since borders don't take % values, there is simply no good way to add borders to fluid elements (using the default content-box model). If you can't use the border-box model, the only other option is to add an internal element in the markup, use the outer for sizing, and the inner for borders and styles.
There is a third option - using calc() - but it's harder to do, and has even less browser support...
Option #1 is the best by far - as long as you can leave IE7 out of the fun.
I’m trying to create a looping fade in/out effect for an image. It’s working in Chrome, but it doesn’t work in Firefox.
Here’s the code: http://jsfiddle.net/FTLJA/254/
(I did make it work with jQuery but that made the browser slow and flickery on Android phones, so I’m trying CSS instead.)
Thanks for any help.
Update: fixed.. please check the link again
Well, if ypu're only setting the WebKit properties (only #-webkit-keyframes and only -webkit-animation-...), then of course it will work only in WebKit and not in Firefox - add them with -moz prefix as well. Also remove the quotes around 'blink' to leave it just... blink and it works http://jsfiddle.net/FTLJA/261/
Ah yes — this shows a difference between CSS transitions and CSS animations.
CSS animations run once you’ve applied -webkit-animation-name to an element, i.e. they can run entirely from CSS.
Transitions, on the other hand, only run when you change the CSS property that they apply to. You can either do this via CSS pseudo-classes like :hover, or via JavaScript.
So, in order to make your transition work in browsers that don’t support -webkit-animation, you’ll need to run some JavaScript that changes the opacity of the image once a second — setInterval is your friend here.
(Note that your JavaScript won’t carry out the animation, it’ll just switch opacity straight from 1 to 0 and back again every second. The CSS transition will animate this change for you.)
I'm loving the galleria jquery plugin, but I'm not liking the way captions show up in the classic theme. I'm looking to move the placement of the info button to the bottom and display the captions at the bottom. I think this is within the css file, but honestly I'm a newb.This http://galleria.io/themes/classic/ is how it looks
I want more of a feel like tn3gallery.com or ad-galler
I'm thinking that I'll need to edit the css, but if someone with some knowledge could point me in the right directions, I'd be appreciative!
Thanks
Edited the .galleria-info position and added opacity to it to properly place this
this seems like the long way around as I must actually state the absolute position in regards to the wrapper as to where I want it to sit, but it works for now. Still looking for a cleaner way to do this though.
I have been looking around to see css3 animations have some kind of callback, I.e is possible to animate an element, and once the element is finished animating, animate another?
Been bashing around google for hours to no avail, maybe my terminology is wrong?
CSS3 animations are not meant to replace JavaScript.
CSS is made purely for styling purposes with very minimal logic that does not "look back" (you cannot select a parent). CSS is handled on the spot and is triggered using a few browser triggers like :hover, :active, and :link.
CSS is supposed to be lightning fast, as it has no confusing or time-consuming logic that will slow down the browser.
That being said, callbacks aren't supported for the above reasons.
Take a Look at Apple's talk "CSS Effects, Part 2: Galleries and 3D Effects from WWDC 2010":
https://developer.apple.com/videos/archive/
You can provide a startdelay for your animation and there is some kind of transitionEndListener for webkit-based browser.