I have a scrolling text box on a Wordpress site. The text get scrolled by the user sliding the vertical scroll bar for it.
Is there a way I can change the color of the vertical slide bar and the background for it?
This is the code I used to get the box
<div style="border: 4px solid #ffff00; overflow: auto; height: 150px; width: 640px; color: white; background-color: #32cd32;">
<div style="text-align: left;">
<h1>Text</h1>
Text here text here text here text here
Credit goes to CSSTricks
Fiddle: http://jsfiddle.net/GaurangTandon/E6GC6/2/embedded/result/
CSS:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Note: This only works in -webkit- browsers (Safari, Chrome)
Yes You Can
I Found A Piece Of Code Here
with tutorial.
http://www.techforty.com/2014/02/How-to-change-the-color-of-scrollbars.html
Related
I have been working on a project that involves custom scroll bar here is the code
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance
Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here
check it
-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't
i'm trying to add shadow effect only for single border while other borders have sharp borders. Does CSS has this power or are there other techniques i don't know?
#panel {
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
width:25%;
height: 50px;
background-color:#161616;
color: #fff;
margin: 20px auto;
text-align: center;
}
HTML
<div id="panel">
<p>Panel Content</p>
</div>
i'm trying to do something like this
Instead of a box-shadow, you could use a :pseudo-element with linear-gradient.
#panel {
position: relative;
width: 25%;
height: 50px;
background-color: #161616;
color: #fff;
margin: 20px auto;
text-align: center;
}
#panel:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top : -10px;
left: 0;
background: linear-gradient(0deg, #00c6ff, #00c6ff calc(100% - 20px), rgba(0, 198, 255, 0));
z-index: -1;
}
<div id="panel">
<p>Panel Content</p>
</div>
Like this:
box-shadow: 0px -8px 5px -5px #00c6ff;
The fourth value is the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
So basically you make the shadow smaller than your box, and make sure it sticks out on one side only.
shadows are not related to borders. They are independent of each other. There's no such thing as a "border shadow".
My main problem is how can I get the foreground bubble (in blue) to be slightly below and to the right of the background bubble under all conditions?
I've tried playing around with different ways of overlapping objects on top of each other... specifically using the following ways:
Playing around with negative margins
Absolute/Relative positioning and z-index
However, I'm not able to get one combination which works under "all conditions" and keeps the text bubble "whole." (see note below)
Specifically, the conditions I'm facing are:
Different Text Lengths --- The text which currently written in as "Some Title" is automatically generated and could very in size (i.e. number of characters) so the bubbles need to adjust to be a different number of lines (1-5).
Differing Browser Sizes --- I want the text bubbles to adjust in response to the size of the browser, but not the distance between them.
Also note:
I'm using the latest version of Twitter Bootstrap.
I use specific before/after psuedo elements on the text bubbles so their little tips are placed in what appears to be okay location aesthetically. These would often get screwed up when I tried the second method above to solve the problem.
Bonus points if you can make the tips on the text bubbles look better ;)
Here's my html:
<div>
<div id="head-names">
<h2>
Person A
</h2>
<h2>
Person B
</h2>
</div>
<div align="center">
<h2 class="text-bubble background-bubble">
<p>Some Title</p>
</h2>
<h2 class="text-bubble foreground-bubble">
<p>Some Title</p>
</h2>
</div>
</div>
And my css:
#head-names {
display:flex;
align-items: center;
justify-content: space-around;
flex-wrap:wrap;
}
.text-bubble {
position:relative;
text-align : center;
border-radius:30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width:650px;
padding: 10px 20px;
margin: 0 0 20px;
}
.text-bubble:before {
content:"";
position:absolute;
width: 0;
height:0;
border-style:solid;
}
.text-bubble:after {
content:"";
position:absolute;
border-style:solid;
display:block;
width: 0;
}
.foreground-bubble {
background-color: #ADD8E6;
border: 6px solid #666;
left:2%;
}
.foreground-bubble:before {
bottom:100%;
left:13%;
border-color: transparent transparent #666 #666;
border-width: 30px 30px 30px 30px;
}
.foreground-bubble:after {
bottom:100%;
left:15%;
border-color: transparent transparent #ADD8E6 #ADD8E6;
border-width: 18px 18px 18px 18px;
}
.background-bubble {
background-color: #fff;
border: 6px solid #666;
left:-2%;
color:transparent;
margin-bottom:-17%;
}
.background-bubble:before {
bottom:100%;
left:80%;
border-color: transparent #666 #666 transparent;
border-width: 30px 30px 30px 30px;
}
.background-bubble:after {
bottom:100%;
left:82.5%;
border-color: transparent #fff #fff transparent;
border-width: 18px 18px 18px 18px;
My code can be found here: http://jsfiddle.net/aZ6bE/
Link to some wireframes/sample images of how I'd ideally like it to scale: http://ge.tt/2puJ7Hh1/v/0?c
For the positioning I removed the .background-bubble margin-bottom:-17% and instead added top:-100px to .foreground-bubble since its position:relative.
I also gave the wrapping div a new class "bubbles" and added margin-top:50px to move it a bit further down so the tips don't collide with the text.
According the tips of the bubbles I changed:
the size (border-width) of the bigger triangle
percentage -> pixels
(background-bubble) left -> right
Here's the JSFiddle
I would also suggest you combine some of the CSS into new classes to reduce the redundancy.
e.g the border-width and bottom:100% of the tips.
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
I've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. Don't know how to handle background images inside responsive grid. How do I make such a search bar using Zurb Foundation grid? Is it possible?
Thanks!
The search bar in the design could be styled completely with CSS and then you wouldn't have to use background images at all. Here are a few main points of code that would make this work:
HTML:
<div class="input-container">
<input type="text" />
<button>Search</button>
</div>
The text input:
input[type="text"] {
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
border-radius: 5px;
background-color: #fff;
}
the button:
button {
margin-left: -10%;
background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
border-radius: 0 5px 5px 0;
height: 32px;
padding: 0 5px;
border: 1px solid #bbb;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
color: #074F03;
text-shadow: 0px 1px #ccc;
font-weight: bold;
}
You need to add the vendor prefixes for CSS3 properties, but this is a pretty basic starting point and should give you everything you need. Here's a fiddle with it working: http://jsfiddle.net/J6Dvz/