I was able to transform a normal, non-fullscreen video element with this CSS-rule:
transform: rotate(9deg) !important;
However, when I put the video fullscreen, the rule gets magically overwritten by user-agent CSS-rules:
So I guess what I am asking is if I can somehow override even the user-agent rules? By the looks of it the transform property is overdriven as it is strikethrough, but yet the video won't rotate.
did you try specifying a css rule, similar to the one enforced by the browser? So, looking at the pasted code above, maybe something like this:
video:-webkit-full-scren {
transform: rotate(9deg) !important;
}
I did some similar stuff for range inputs, and I successfully overwrote the default browser styles. Maybe it works here too.
Furthermore, I also did some fullscreen tweaking of similar sorts. I wanted to remove the controls when in fullscreen, since I implemented my own. I just used this and it worked:
video::-webkit-media-controls {
display: none !important;
}
::-webkit-media-controls {
display:none !important;
}
Related
Many transitions in Bootstrap 4 provide a set of events to listen for. For example, you could do something like:
$('.certainDropdowns').on('hidden.bs.dropdown', function() {
// do the things
});
A light inspection of some of the components shows that somehow they are able to respond to fading. For example, the Bootstrap modal fires a "hidden" event once it has faded out. But this is at the modal level, not the transition level (hidden.bs.modal)
Unlike dropdowns and modals, there is not a "fade" JavaScript component. But the light scan of the source code seems to be indicating that Bootstrap provides emulation for CSS transitionEvent, and I'm trying to figure out how I can tap into it.
In brief:
Is there a Bootstrap 4-provided method for tapping into the fade transition's events, or am I limited to native transitionend (possibly with help from a 3rd-party polyfill)?
[edit to add content below]
I possibly should have tried transitionend before posting the question, but I just gave it a try and it seems to be no go like this:
<div id="something" class="fade show">Fadeable</div>
Then JS:
$('#something').on('transitionend', function() {
console.log('transition ended!');
});
//later
$('#something').removeClass('show');
This was tested only with the latest Firefox, which is one of my target browsers.
I couldn't find a way to do it in my intended way with the provided components. Instead, I ended up writing it as a single new class, "collapseFade" which could still use the Bootstrap pattern of adding/removing the class "show".
The tricky thing was that transitions would trample over each other if I just tried to add or remove the "show" class, so I had to add a second helper class, "out". This requires intimate understanding of the new classes, which was potentially hazardous to maintenance developers. Consequently, I wrote a jQuery plugin to go with it. Without using this answer as code repository, here's the lightweight breakdown:
SASS:
.collapseFade {
max-height: 400px;
transition:
max-height 0.5s,
opacity 0.5s 0.5s;
&:not(.show) {
opacity: 0;
max-height: 0;
}
}
.collapseFade.out {
transition:
max-height 0.5s 0.5s,
opacity 0.5s;
&:not(.show) {
opacity: 0;
max-height: 0;
}
}
(You could theoretically use Bootstrap's SASS fade variables instead of hard-coding time intervals).
Then the plug-in (code not included, for brevity) simply allows you to call collapseFade on an element. Eg. $('.something').collapseFade(). It optionally accepts "show" or "hide" as string parameters, but will just toggle by default. For whatever reason, transitionend is working here, so I also listen and fire an appropriate custom event for future maintenance or feature devs who might find it useful.
It functions thus: when showing, it removes the out class and adds the show class. When hiding, it adds the out class and then removes the show class.
The so-called "magic" is just in the timing. The second transition start is delayed by a value equal to the first transition time, which visually chains them together even though technically they are fired at the same time.
The other tricky bit is that the collapse animates max-height rather than height. This is the way Bootstrap themselves do it, and it makes sense... you can't animate "auto" height; it needs an actual target number. But straight-up "height" (no "max") means you're committed to occupying a certain amount of space. Max-height will allow height to be dynamic, but the trade-off is that it will operate smoothly only by restricting it as closely as possible. If I had put max-height of ten-thousand, for example, the collapsing animation wouldn't be smooth. You might notice that in Bootstrap's own collapse functionality, which is less than smooth for elements that are not tall. I don't anticipate my targets to be any taller than 400px so that's what I've provided.
When I come down on touch devices I don't want the hover behavior. Is it possible to disable all hover effects at once for a whole website?
Given that you use Modernizr to detect touch and set the class.
This is what I came up with but it gives a lot of inconsistency:
html.touch *:hover {
color: inherit !important;
background: inherit !important;
}
Is there a way to do this with pure CSS? If not, how can it be done with javascript?
Update
This is now supported very decent across all mobile browsers, here is the Can I use link:
html.touch *:hover {
all:unset!important;
}
Old answer
This is good but not supported very well:
html.touch *:hover {
all:unset!important;
}
But this has a very good support:
html.touch *:hover {
pointer-events: none !important;
}
Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.
Try the all:unset or all:initial
html.touch *:hover {
all:unset!important;
}
Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)
Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:
.thing:hover {}
to include the Modernizr class:
html.no-touch .thing:hover {}
Although you should be aware that any solution that uses Modernizr will not be a 'pure CSS solution', as Modernizr is javascript.
I've been searching for some CSS or jQuery that will achieve a translucent effect. Most of what I've seen are people using translucent as a synonym for transparent, and that's not really accurate or what I'm trying to get.
I would like a box and when this box passes over objects, it distorts the objects underneath. Think a bathroom window. It allows light to pass through, but not a clear picture. I've attached an image showing what I want to achieve.
My thinking is I would apply this effect on the top image (the white box in the sample image) but it might possibly be something else. Also, I'm pretty sure this will be javascript but I'm including CSS as an option in case there's something out there I didn't know could produce this type of thing.
Just use a transparent PNG, especially if you need a texture like your example.
Otherwise you can set the opacity of the inner div to some value < 1
As been suggested:
If you only need the effect to appear over an image (and not on top of html text etc.)
The number of images the effect should appear over is limited
Then you could prepare an alternate version of each image with the translucent effect applied, then use the alternate image inside the effect box as background image, where the background-position is calculated based on the box position.
Or you could look into this more complicated way: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
There is an alternative to the opacity or translucent image solutions listed in the other answers. You could try using a CSS3 filter with blur effect:
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
Please note however, that this is still in the experimental phase and subject to change. It also may note be supported by all browser vendors. For a list of compatible browsers, check here.
This list from CanIUse may also be helpful for you to look at.
In addition, here is another good resource on CSS Filters.
Looks like a good candidate is the jQuery Blur plugin. Seems to do exactly what I'm looking for. Thanks for everyone's suggestions.
http://www.blurjs.com/
An extention of the idea proposed by #Dryden Long
Here is a working Example: jsFiddle
You can create a translucent version of the image in GIMP/photoshop. Then set the css background property of the child div to fixed:
.parent-div {
position:relative;
background: url(normal.png) no-repeat 0 0 ;
}
.child-div {
width: 100px;
height:100px;
background: url(distorted.png) no-repeat <X> <Y> ; /* x y relative to the parent*/
background-attachment:fixed;
}
I'm looking to make a clever animation that makes three sucessive right angle quotes like » » » glow successively from left to right, then back to the left-most one again. I'm wondering if this might be a clever effect for other developers to use as well, and could be good Google-fodder.
The inspiration for this is obviously the slide-to-unlock screen on an iPhone, where the text glows in a progressive manner.
I do know about CSS3 animations with keyframes and have implemented these successfully before, but am not sure how to code in the part with the loop. I'm guessing Javascript is the answer here, with some kind of loop. I already have jQuery on the page I'm using so it wouldn't be anything extra to use jQuery functionality.
My HTML structure would be something like this:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span></span>
Any ideas on the best/most clever way to implement this? I realize not all browsers support CSS3 animations if they are to be used and honey badger don't care, I only need to support modern webkit and gecko implementations.
Edit 1: added span tags around each » to allow changing CSS properties individually for each right angle quote in JavaScript, as most people have done. For the guy who did the CSS3 method, not necessary!
Edit 2: Just for absolute clarity on what the goal is, the left-most one will glow a certain color first, using a CSS color:green etc. change and transition:color linear 0.4s etc, then the next one will do the same right after with maybe a short delay.
Edit 3: For further clarification, the exact animation I'm looking for looks like this, though in the example they've used a VERY hack-ish method that I don't think will work for a lot of people. I'm wondering if we are just coming up against the limitations of javascript/css3 or if there is more refinement possible. Link: http://css-tricks.com/examples/SlideToUnlock/
FINAL EDIT WITH SOLUTION SUMMARY: I decided to go with the pure CSS3 option but there are many valid options presented here that are all worthy of your time. I wish StackOverflow would allow for more than one correct answer. For anyone coming to this question from Google or elsewhere, make sure to browse the whole question to choose what may work the best for you! I figured that since this is mostly just for fun, I would feel okay leaving the Firefox & IE guys out in the dark. You can see what my final implemention was here: http://ezrahub.com/board/ at the top of the page, where it is used to expand the posting form. One quirk is that if you change the text size, you will also have to change the property background-size in your CSS stylesheet. I used background-size: 120px 50%; for mine, and if you play around with it you can see how the effect changes.
Hope everyone has fun with this and enjoy using it on your creations! Shout out to autistic moderators such as #JaredFarrish. (Why so mad?)
For the fun of it, here is a method using pure css. It has very limited support for browsers.
.glowquote {
background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
background-size: auto 50%;
padding: 0 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradient-animation infinite 1s linear;
}
http://jsfiddle.net/grc4/uF8H2/3/
Edit: The jsfiddle now partly works in firefox. The gradient animation works correctly, and the only thing that does't work is the text clipping (-moz-background-clip:text doesn't exist). This could be solved by using an image mask over the top of the background.
First, I'd put spans around the individual arrows so that you can change their CSS settings individually:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span></span>
Then, assuming you're using jQuery UI (because as far as I know core jQuery won't animate colours) you can do something like the following:
function doGlow(numTimes) {
var $arrows = $("span.glowquote span");
function nextGlow(i) {
$arrows.eq(i).animate({
color: "green"
}, 400).animate({
color: "black"
}, 400, function() {
i = (i + 1) % $arrows.length;
if (i === 0) numTimes--;
if (numTimes > 0) nextGlow(i);
});
}
nextGlow(0);
}
Demo: http://jsfiddle.net/KrL44/1
(Or here is the original version of my demo that just kept looping indefinitely: http://jsfiddle.net/KrL44/)
try this:
html:
<span class="glowquote"><span>»</span> <span>»</span> <span>»</span> </span>
js:
$(document).ready(function(){
var i = 0;
function run() {
$('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
$(this).animate({color: 'black'}, 500);
i++;
if (i > 2) { i = 0 }
run()
})
}
run()
})
http://jsfiddle.net/wQ9AT/
I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.
The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..
Here is the script:
http://pastebin.com/8J9uwRtZ
In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.
Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.
http://www.matthewruddy.com/demo/ <- not working
http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working
Thanks to anyone who can help! Matthew.
As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.
Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:
p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }
In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:
p { color: blue; }
.container p { color: red !important; }
Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.
So in your case, the following rule works just fine and fixes your display problems in IE:
ul.lof-main-wapper li img { max-width: none !important; }