We have a large application where we want to blur the entire site except for a few items during a walkthrough. As if it is an overlay.
We have explored things such as:
1. Apply blur to the body, but that means all underlaying items will be blurred.
2. Using html2canvas to create a copy in a canvas, however this is too performance intensive.
We can not do large dom manipulations nor heavy jQuery use due to our clients being on slow machines often without graphics cards and the size of the application.
Any suggestions?
Edit: I should also add that we only require it to work in webkit browsers.
Yeah you can do this with a plugin name Foggy..
Check this...It will help you
Simply toggle a blur class. See JSFiddle.
<style>
.blur {
opacity: 0.4;
}
.blur p {
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
}
.blur img {
-webkit-filter: blur(3px);
filter: blur(3px);
}
</style>
<script>
$(function(){
$('.box').hover(function () {
$('.box').addClass('blur');
$(this).removeClass('blur');
});
});
</script>
<div class="box blur">
<p>A</p>
<img src="example.png">
</div>
<div class="box">
<p>B</p>
</div>
Source: http://tympanus.net/Tutorials/ItemBlur/
I might be missing the point here, but if you ONLY require support for webkit browsers, then why not just use the -webkit-filter:
nav, header, main, footer {
-webkit-filter: grayscale(1) blur(5px);
}
*:hover {
-webkit-filter: none;
}
It's pretty responsive for me on my old MacBook Pro and the cool thing is that you have so many options to add grayscale, adjustments for brightness, saturation, contrast, opacity, etc. And, it would be fairly simple and lightweight to script a demo in jQuery for your walkthrough, since all you would need to do is remove or add the -webkit-filter to your desired elements.
DEMO >
(I just reused a Bootply I had as an example since it had a fair amount of content).
I'm not sure what your browser requirements are, or how archaic the technology you're developing for is, but you might check out blur.js I could see it not being too heavy, dependent on how much content you have.
Worst case you could probably put a full-width, full-height div between your active area and the rest of the site using absolute positioning and a z-index, and then run blur on that so that the active area has the appearance of being the only unblurred thing.
I had the same problem.
The only solution I found was to have a transparent layer over the content with a hole in it.
.layer{
position:fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
box-shadow : 0 0 0 1000px red;
opacity: 0.5;
}
http://jsfiddle.net/zLYjA/
It's a good solution if you have a slow machine. But you need to do a bit of work to determine the position of the element you want to show.
i am giving a simple approach for creating a modal.
You can do this by blurring all the items except the items you don't want to be.
Float those items over the blurred ones with higher z-index
for ex:
html:
<div class="blur">../*items to be blured */..</div>
<div class=floated-item">../*items not to be blured */..</div>
CSS:
.blur{
opacity:0.4;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
}
.floated-item{
z-index:999;
position:fixed;
margin-top:10%;
margin-left:10%;
}
Related
I have a styling issue where I'm trying to center a wide image relative to it's container. The problem is that the image's width is unknown so I can't do the left:50%, margin-left:-###px; trick because I don't know what the negative margin value will be.
I also can't use text-align:center; because the the image is wider than it's container.
To make matters more complicated, the container's width is also unknown.
I'd quite like to avoid using JavaScript for this but it feels like a big ask with just CSS.
Anyone know of any magical solution here?
UPDATE:
Required support: IE8+, Chrome, Safari, Firefox, Android.
I have tried a couple of the examples provided by you lovely people which have not worked (they would work in most situations, but not mine).
#Vince - I tried your display block trick which works great when the window is wider than the image but when the window is not wider than the image, it effectively becomes 'left-aligned'.
See fiddle example. I have added another container to simulate a narrow mobile device window. Obviously this won't be a hard-coded width as in the fiddle. Also, the img width will not be hard-coded as in the example but I'm trying to simulate the situation that's presented to me.
http://jsfiddle.net/7n1bhzps/1/
Excuse the hideous colours.
UPDATE 2:
Accepted dfsq's answer. Contrary to above, it does not need to support IE8 because the problem is at mobile resolutions. IE8 is not a mobile browser so the need to support this is not necessary.
Thanks all.
Set the container's min-width to any value you feel necessary. Set the image to display as block and use the margin: 0 auto; trick to center it
HTML:
<div id="contain">
<img src="http://i.imgur.com/xs8vh.jpg"/>
</div>
CSS:
#contain {
min-width: 50px;
}
#contain img {
display: block;
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/j21a8ubo/
You can make use of CSS transofrm: translateX(-50%) to shift the image of unknown width. This technic allows to center image of any width relative to container.
.wrap {
margin: 0 0 10px 160px;
width: 300px;
height: 75px;
border: 3px red solid;
position: relative;
overflow: hidden;
}
.wrap:hover {
overflow: inherit;
}
.wrap img {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="wrap">
<img src="http://lorempixel.com/600/75/food/3" alt="">
</div>
<div class="wrap">
<img src="http://lorempixel.com/100/75/food/4" alt="">
</div>
Check for support http://caniuse.com/#feat=transforms2d
If you set X's CSS to margin:0px auto; it should center it within the parent container.
Sometimes centering doesn't work, but this can also be a browser-related issue.
If you can adjust the HTML, you could put the element to be centered in a cell in a <table> element, with a cell on either side of it. This is how it was done in IE8 and earlier, though it's not recommended now.
If unknown width of object and its container then use
.center-block{
display: table;
margin:0 auto;
float:none;
}
I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.
I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.
Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.
So I have a list of 9 icons with titles representing 9 different areas of service. Divided into three rows of three using floats etc. Each has a description below it (a couple of paragraphs). I have used 'visibility: hidden' and 'height: 0px' to hide the descriptions. (not at the same time.) I want to hover or mouseover the icon and have the description appear below it.
I don't think I can use straight CSS (unless someone thinks otherwise) because I am triggering one element and changing another.
<div id="category1" class="category_col1 cathead">
<div><img src="images/..." name="category1" class="image-item-lead"/>
<h3>Type of category</h3>
</div>
<div id="category1description" class="hide">
<p>Some content...</p>
<p>Some more content...</p>
</div>
</div>
And we do that two more times per row.
The CSS that is applied to these elements is as follows.
.category_col1 {float:left;
clear:left;
width:32%;
padding:.5em .5em .5em 0em;
}
.image-item-lead {width: 90%;
margin-left:auto;
margin-right:auto;
display:block;
}
.cathead {visibility:visible;
}
.hide {height:0px;
overflow:hidden;
}
The jQuery that I have tried is as follows:
Surrounding all options
$(document).ready(function(){
});
This works:
$('#category1').mouseover(function(event){
$(#category1description).css('height','auto');
});
But obviously it shows up instantly, I would like it to show up gradually.
I have tried:
$('#category1').mouseover(function(){
$('#category1descrioption').slideToggle('slow');
});
$('#category1').mouseover(function(){
$('#category1descrioption').animate({height: auto}, {duration:1500});
});
$('#category1').mouseover(function(event){
$('#category1descrioption').transition({height: auto}, ease, 1500);
});
I am definitely missing something here. I hope someone can help.
All CSS:
.category_col1:hover .hide {
height: 100px;
}
.hide {
height:0px;
overflow:hidden;
transition: height 1.5s;
}
caveat: The set height is due to auto not being supported. If auto is used, the effect is instantaneous instead of transitioned, this is part of the spec. Figure out what height you will need, and use that length value.
Option 2 is to use max-height for height:auto; :
How to animate height from 0 to auto using CSS Transitions article from bradshawenterprises.com
and
SO question CSS transition height: 0; to height: auto;
One way or another, you will have to make some decision on how to deal with height, as the max height method will have some animation timing issues that could lead to big delays on the hover-off if some are small heights, and some are large as the max-height value will determine the animation time. See the comments in the accepted answer.
Option 3: Figure out height of each div with JS/jQuery and set using an event listener for hover
For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be possible just by adding a class to the relevant element after which the css would handle the rest. The problem lies in the fact that if for example
.block.hide{
-webkit-transform:translateY(-10000px);
}
is used the element will first of all fly out of the screen unnecessarily far and with an unnecessarily high speed. And purely from an aesthetic point of view there's a lot left to be desired (Theoretically speaking for example a screen with a height of 10000px could be introduced one day in the future).
(Update) The problem why percentages can't be used is that 100% is relative to the element itself, rather than to the parent element/screen size. And containing the element in a full-sized parent would be possible, but would create a mess with click events. And after a few answers, allow me to point out that I am talking about translations, not about position:absolute css3 transitions (which are all fine, but once you get enough of them they stop being fun).
What aesthetically pleasing solutions to allow an element to translate out of a screen in a fixed amount of time can you guys think of?
Example code can be found in this jsfiddle demonstrating the basic concept.
http://jsfiddle.net/ATcpw/
(see my own answer below for a bit more information)
If you wrap the .block div with a container:
<div class="container">
<div class="block"></div>
</div>
<button>Click</button>
you could expand and then, translate the container itself after the click event
document.querySelector("button").addEventListener("click", function () {
document.querySelector(".container").classList.add("hide");
});
with this style
.block {
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background:gray;
}
.container {
-webkit-transition: -webkit-transform ease-in-out 1s;
-webkit-transform-origin: top;
-webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}
.container.hide {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
/* background:#f00; /* Uncomment to see the affected area */
-webkit-transform: translateY(-110%);
}
In this way, it is possible to apply a correct translationY percentage ( a little more than 100%, just to have it out of the way ) and mantaining the button clickable.
You could see a working example here : http://jsfiddle.net/MG7bK/
P.S: I noticed that the transition delay is needed only for the transitionY property, otherwise the animation would fail, probably because it tries to start before having an actual value for the height. It could be omitted if you use the horizontal disappearing, with translateX.
What I did is use the vh (view height) unit. It's always relative to the screen size, not the element itself:
/* moves the element one screen height down */
translateY(calc(100vh))
So if you know the position of the element in the screen (say top:320px), you can move it exactly off the screen:
/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
I know this is not exactly what you were asking but...
Would you consider using CSS animations with Greensock's Animation Platform? It is terribly fast (it claims it's 20 times faster than jQuery), you can see the speed test here: http://www.greensock.com/js/speed.html
It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.
I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/
Both CSS and possible JS look simpler:
document.querySelector("button").addEventListener("click",function(){
var toAnimate = document.querySelector(".block");
TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});
CSS:
.block{
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background-image: url(http://lorempixel.com/800/100);
}
I recently built an app which used precisely this technique for sliding 'panels' (or pages) and tabs of the application in and out of view. A basic implementation of the tabs mechanism can be seen here.
Basically (pesudo-code to illustrate the concept, minus prefixes etc):
.page {
transform: translateY(100%);
}
.page.active {
transform: translateY(0%);
}
The problem I had was that Android Webkit in particular wouldn't calculate percentage values correctly. In the end I had to use script to grab the viewport width and specify the value in pixels, then write the rules using a library for dynamic stylesheet parsing.
But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.
Use calc method (http://jsfiddle.net/ATcpw/2/):
.block{
position:absolute;
top: -webkit-calc(100% - 110px);
right:10px;
left:10px;
height:100px;
background:gray;
-webkit-transition: all 2s;
/*this adds GPU acceleration*/
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.block.hide{
top: -100px;
}
Since you are using -webkit prefix I used it as well.
calc is supported by majority of browsers: http://caniuse.com/#search=calc
One very simple, but not aesthetically pleasing solution is to define the class dynamically:
var stylesheet = document.styleSheets[0];
var ruleBlockHide;
and
//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);
see: http://jsfiddle.net/PDU7T/
The reason a reference to the rule needs to be kept is that after each screen resize the rule has to be deleted and re-added.
Although this solution gets the job done, there has to be some DOM/CSS combination which would allow this to be done without javascript (something along the lines of a 100%x100% element containing such a block, but I haven't been able to figure out any transform based way).
get the document width. then use a java script trigger to trigger the css3 translation.
function translate(){
var width = document.body.Width;
document.getElementById('whateverdiv').style='translateX(' + width + 'px)';
}
This is simple
add the following to your div
.myDiv {
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: initial
}
then change the "left" property of it either by adding an additional class or by jQuery
This will animate it along the x-axis
Note: you can change the -webkit-transition-property to any property you want and this will animate it
I am trying to create a little 3d raised "panel" or "box" on my site. I found a similar example on this page where they have this page with windows that are "raised" off the page with a title box. In this case, they are using an image for the whole box and just the text in the middle is actual text on the page.
I wanted to see if this can be replicated using CSS or I should really move over to photoshop for this sort of thing and do it all as images. (if i have to)
does anyone have any suggestions on if this can be replicated using pure html and css, javascript.
As a second question, if it has to be done using photoshop and images is there are any good place to get photoshop "templates" where you wouldn't have to put this together from scratch.
Here's something similar using CSS3 for the fancy parts:
http://jsfiddle.net/RrfJb/ (view in a WebKit browser such as Chrome)
It can be made to work in "all browsers".
For Firefox it's as easy as adding the -moz prefix versions.
For IE, use CSS3 PIE for the gradients and box shadow, and this tool to generate transform CSS.
.box {
width: 300px;
position: relative;
background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
box-shadow: 3px 3px 5px #666;
padding: 12px
}
.box > h2 {
background: #ccc;
float: left;
padding: 8px 16px;
position: relative;
top: -18px;
left: -21px;
-webkit-transform: rotate(-2deg);
font: bold 18px sans-serif
}
.box > p {
clear: both
}
<div class="box">
<h2>Welcome to website!</h2>
<p>Lorem ipsum dolor sit amet..</p>
</div>
You can do a lot with CSS3 including rotation, gradients and different fonts. The downside is that none of it apart from font embedding works in IE without various complexities.
You can't really do irregular bitmaps graphics like the paper crumpling, so you'll need an image for that.
Right now, I'd say that unless all the data is coming from a CMS, then the best way is to use an image for this, and possibly embed a font for the name at the bottom.
The second best way would be to just use the paper image, and to use CSS3 for the rest. Take a look at http://css3please.com/ for a good place to see the various properties.
When using CSS3 you always have to be aware that people using old browsers may not be able to see what you intend. Using it progressively is the best way. Check out this article.
In this particular case CC3 can add a drop-shadow. So if your OK with people who're using older browsers not being able to see the box shadow, go with CSS3. Otherwise use an image.