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
Related
I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>
What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)
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 known you can add an outline border with CSS3.
outline: 10px solid red;
Now I was wondering how I can add also a radius to that outline border.
I have tried this one, but doesn't work:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Try using CSS-Tricks' Infinite Borders technique and applying border-radius.
This method will require borders and box-shadow and not outline.
img {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
body { padding: 50px; text-align: center; }
<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">
Firefox has a property -moz-outline-radius, however the request to implement a similar feature in WebKit was closed as WONTFIX. The plan for the future is to make the outlines follow the borders.
I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.
#MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.
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/
I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}