Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
Related
How can I add these two things on the scrollbar?
padding around the scrollbar
a cursor when you hover the scrollbar
This is my code:
#style-4::-webkit-scrollbar-track
{
background-color: #fff;
}
#style-4::-webkit-scrollbar
{
width: 5px;
background-color: #fff;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #ccc;
}
#style-4::-webkit-scrollbar-thumb:hover
{
background-color: #666;
cursor: pointer;
}
You can see it here. I want to add the padding like the ones on cssdeck.
Is it possible?
About that padding. Sample 5px padding from left
#style-4::-webkit-scrollbar {
width: 10px; /* add 5px */
...
}
#style-4::-webkit-scrollbar-thumb {
box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */
...
}
Adding cursor: pointer to every -webkit-scrollbar element does not unfortunately work.
Yes You can add it.
#style-4:hover{
padding:15px;
}
I think this is correct, if im wrong please let know what you expect.
Try this one for Cursor
#style-4:hover{
cursor:pointer;
}
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
So I'm working on a tumblr theme design and each post should has a wrapping container (.posts-wrapper) that has 66px of bottom-padding, 1px bottom border, and 84px of bottom-margin, then some page navigation at the bottom. I wanted to remove the margin and divder on the final post of the page so there's nothing between the navigation and the last post, but for some reason my css is not applying.
.index-wrapper {
background-color: #ffffff;
min-height: 600px;
}
.posts-wrapper {
margin: 0 auto;
margin-bottom: 84px;
padding-bottom: 66px;
border-bottom: 1px solid;
}
.posts-wrapper:last-child {
margin-bottom: 0px !important;
padding-bottom: 66px !important;
border-bottom: 0px solid !important;
}
.index-post {
max-width: 960px;
margin: 0 auto;
padding:0 50px;
position:relative;
}
Here is a reference link to my work in progress on dropbox: http://dl.dropboxusercontent.com/u/35202847/writersblock_theme/index.html
Maybe I'm being silly and forgot something simple to do. Any insight would be greatly appreciated
Your problem is that the last .posts-wrapper div you have is NOT the last child of its parent. You have the <nav> element as a sibling after it.
As you're already using CSS3 selectors, you can try the :last-of-type pseudo-selector to get the last .posts-wrapper element.
.posts-wrapper:last-of-type {
margin-bottom:0;
padding-bottom:66px;
border-bottom:0;
}
I am requested to make the following design:
Here's how I'm trying to achieve the cascaded shadow:
box-shadow: -6px 0px 10px #514E49
But it results in the shadow being displayed in the opposite direction:
I tried changing the h-shadow parameter to 6px, but then the shadow is only visible in the rightmost edge.
I tried using inset as Emil suggested, but it causes the v-shadow to display inset as well and becomes visible inside the box, which should be avoided, here is what it looks like:
try this:
box-shadow:inset 6px 0px 10px #514E49;
edit:
box-shadow: 6px 0px 10px #514E49;
float:right;
http://jsfiddle.net/6V7Et/4/
you have to reverse the order of the menu
Another way to avoid float:right and reversing the menu is by using a negative spread and increased h-shadow like this:
.box {
background: #817E77;
display: inline-block;
width: 100px;
height: 40px;
box-shadow: inset 10px 0px 10px -4px #514E49;
float:left;
}
jsFiddle result
I believe this will best be tackled with z-index since your problem is the other divs are hiding the previously rendered ones.
so:
.box {
....your stuff here....
float:right
}
http://jsfiddle.net/XKNn4/
Another solution, one that doesn't involve reversing the order of the menu or using z-index would be to put the box-shadow on a pseudo-element.
demo
Relevant CSS:
li {
overflow: hidden;
position: relative;
box-shadow: 6px 0px 10px #514E49;
/* the other styles */
}
li:not(:first-child):after {
position: absolute;
right: 100%; width: 100%; height: 100%;
box-shadow: 6px 0px 10px #514E49;
content: '';
}
Can anyone help me to implement transparent square fluid with bootstrap?(https://twitter.com/ladygaga)
also I'd like to know how to implement rounded square in that transparent square.
Thanks in advance!!
It seems they're just using a semitransparent background image on that div to get the glassy texture. The image or background-color(such as RGBA(0,0,0,0.2)) would need to have it's alpha channel set to something other than 100%. Their CSS looks like this.
.wrapper, .wrapper-narrow, .wrapper-permalink {
position: relative;
width: 837px;
min-height: 100%;
padding: 54px 14px 15px;
margin: 0 auto;
background: url(../img/wash-white-30.png);
}
Assuming you were going to use a similar approach. With a 'wrapper' class providing the transparent background, and a 'whitebg' class providing the solid white background:
<div class="container-fluid wrapper">
<div class="row">
<div class="span2 well whitebg">
content..
</div>
</div>
</div>
with this CSS to give you what you need for your class:
.whitebg {
background-color:white;
}
The transparent DIV (not square :)) is implemented with a PNG image that has an alpha channel, as follows:
.wrapper, .wrapper-narrow, .wrapper-permalink {
background: url("../img/wash-white-30.png") repeat scroll 0 0 transparent;
margin: 0 auto;
min-height: 100%;
padding: 54px 14px 15px;
position: relative;
width: 837px;
}
As far as rounded corners are concerned, on that page, they are implemented as follows:
.module, .promptbird {
background-clip: padding-box;
border-radius: 6px 6px 6px 6px;
line-height: 16px;
margin-bottom: 10px;
position: relative;
}
For your requirements in bootstap, merely using the css opacity property for your div, and the border radius property for your inner divs will do the trick.
.transparentDiv { /*make any SQUARE transparent!*/
background: #fff; /*white*/
opacity: 0.5 /*will not work in older IE versions, add filter for it!*/
margin: 0 auto; /* optionally, center it! */
}
.roundedDiv {
border-radius: 3px 3px 3px 3px; /* 3px looks way cool! */
}
usage:
<div class="transparentDiv">I see through you baby!</div>
<div class="roundedDiv ">Love makes the world go round!</div>
Use a transparent color for your background-color using an rgba color value. That's how you get the transparency.
For the rounded corners, make it easy by using border-radius.
Here's a fiddle containing all the stuff you want - http://tinkerbin.com/j5A3fKHl