Found an interesting way to make centered popup window ( http://www.w3.org/Style/Examples/007/center ) in application.
Simple and good looking in code ( http://jsfiddle.net/babaca/6rwL0v0c/22/ ).
html
<div class="__holder">
<div class="__box">
<h2>Some header</h2>
Some bunch of content etc
</div>
</div>
css
.__holder {
position: fixed;
z-index: 15000;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
.__box {
position: absolute;
z-index: 16000;
top: 50%;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: -50%;
padding: 0;
transform: translate(-50%, -50%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
-webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
-moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
padding: 29px;
}
The only problem with render: depending on zoom level of the browser window, there is or horizontal or vertical sides are not sharp, smoothed/blured between 2 pixels... (chrome Version 39.0.2171.95 m
, firefox 34.0.5 ) Here is an example(with smoothed left and right sides of the window):
As I figured out it is responsibility of the transform: translate(-50%, -50%) line.
Anyone have met the same problem? Any solutions?
Well, this is indeed a nice solution as it doesn't require you to know the width and height of positioning container. If you knew them you could just replace transform with apropriate negative margins:
margin-left: -90px; // half of the popup width
margin-top: -45px; // half of the popup height
Here's the fiddle, see if those issues still appear: http://jsfiddle.net/bcbpc6ey/
If they do, than the problem is probably caused by internal browser scaling algorithm and there is nothing you can do, because thats how the browser works.
However, if problem dissapears after switching transform to margins than you have probably experienced some antyaliasing issues that were caued by moving the rendering of your popup to GPU. Since transform is one of commonly known hardware accelerated CSS property, to make it run smooth browsers often move such elements into a separate layer that is than being handled entirely by GPU which is faster, but often causes some artifacts (mostly visible on fonts and scaled elements).
Related
i have a school project where i need to replicate a website.
i want to add the shadow effect under text in a stretched oval way but i cant figure out how to do this prefectly, i just end up with a blurry rectangle.
this is what i have at the momentClick here
and this is what it is supposed to look like Click here
This is the code that i have (that creates the blurry rectangle
box-shadow: 0 50px 20px -8px #000000;
can anyone help me on how to make the shadow that i have now into the shadow that it is supposed to be? (2nd picture)
Thanks in advance,
I would use a pseudo-element, translate and rotate it through transform, and add a filter: blur to it. Do note eventual compatibility issues.
button {
position: relative;
margin: 2rem;
}
button::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translate(0, 200%) rotateX(70deg);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
filter: blur(3px);
}
<button>Click me</button>
I am able to use the transition attribute to make the width of a div change smoothly when switching from mobile to desktop view. I have two separate pages, index and about. When the user goes to the about page, the width of the div increases. I would like to animate this but I am not sure how since they are on two separate pages.
This is for my personal blog, running Apache2. I've tried using the transition element when the a tag is hovered over but this didn't work and looked weird.
div.container {
position: relative;
top: 50px;
width: 350px;
margin: 0 auto;
border-radius: 5px;
background-color: #f5f5f5;
vertical-align: middle;
transition: width 0.25s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
When going to a different html page there is no transition animation.
I've created a custom scrollbar style, and I want to be able to "grab" it with Chrome Android (by tap and dragging on it). It works on the desktop, but with mobile emulation but can't get it.
I've created a JS Fiddle with it here:
https://jsfiddle.net/dr8g4g6k/2/
Code:
#container {
overflow: auto;
width: 250px;
height: 250px;
}
#content {
width: 1000px;
height: 1000px;
}
/* Webkit */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #F2F2F2;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #999999;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(205, 205, 205, 0.4);
}
<div id="container">
<div id="content">
test content
</div>
</div>
If you enable Chrome emulation with any device set, and try to scroll by grabbing the scroll bar, you cannot.
You can really use any site to replicate it that has custom webkit scrollbars, even this example here:
https://css-tricks.com/examples/WebKitScrollbars/
Simply enable mobile emulation and you can't grab it.
Does anyone know how to have custom scrollbars which are always present on Chrome, and still able to "grab" them to scroll like the native ones?
To anyone else coming across this: Chrome team has decided this is not something they will fix because they don't like custom scrollbars, and because they say that Android being unable to 'grab' scrollbars is by design in general.
So the only answer is to stop using custom scrollbars altogether, since attempting to apply a class to do it on whether it's "mobile" or not is a very bad solution.
I want to change the shape of the scroll bar in my page. Right now it is the common rectangle shaped one but i want it to be kind of an oval shape - rounded at both top and bottom of the rectangle.
How Can i achieve this through CSS? Or is this not possible at all.
I am looking for supporting this in IE10.
This is my css for the scroll bar that I have.
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
Check out this page for a good starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. These only work for browsers that use webkit unfortunately.
To get the rounded oval shape scrollbars you can do something like below:
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
Not tested, you can use a jQuery custom scrollbar as seen on this page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too.
When the mouse is not over the boxes, they go back to the same size with no drop shadow.
Normal:
Mouse over:
Scroll over the boxes to see the effect here.
jsFiddle DEMO
Hovering over elements and making them larger can be done in many ways, and it depends on your layout requirements and the framework your using.
Since those boxes appear to be div's with CSS3 box shadow property, you can do something like that in pure CSS using :hover
HTML:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
CSS:
body {
background-color: black;
}
.box {
background-color: grey;
width: 200px;
height: 400px;
float: left;
border: 6px solid red;
margin: 10px;
}
.box:hover{
width: 250px;
/* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
height: 452px;
/* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
/* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
/* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
margin-top: -18px;
-moz-box-shadow: 0 0 50px red;
-webkit-box-shadow: 0 0 50px red;
box-shadow: 0 0 50px red;
}
EDIT 2:
Revised jsFiddle DEMO
You can accomplish this using "transform: scale(x,y)" to zoom your element.
E.g.
div:hover{
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
will zoom your div by 1.5 times on x-axis and keep 1.25 times on y-axis.
To add shadow -
div:hover{
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
This is easily accomplished with some HTML and CSS. They're commonly called "Dropdown" menus or "pop-out" menus and there are tons of tutorials on how to make them; here's one:
http://www.seoconsultants.com/css/menus/tutorial/