Could any one let me know the css to create a custom scroll bar which looks like the one in the image? The background should be transparent, I have placed it on a green background for now.
You can do this using the jQuery plugin jScrollPane - http://jscrollpane.kelvinluck.com/
$(function() {
$('.scroll-pane').jScrollPane();
});
The above code with set a div with class "scroll-pane" to scroll.
You can't do with with standard CSS but with CSS3 you can:
pre::-webkit-scrollbar {
height: 1.5ex;
-webkit-border-radius: 1ex;
}
pre::-webkit-scrollbar-thumb {
border-top: 1px solid #fff;
background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
NOTE: This will only work on webkit browsers.
Related
I have the following css in my angular Component
.folders {
border-left: 5px solid #b8744f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
/*START*/
background: -webkit-gradient(
linear,
center top,
center bottom,
from(#327aa4),
color-stop(45%, #2e4b5a),
to(#5cb0dc)
);
/*END*/
background: -moz-linear-gradient(
top,
rgba(50, 123, 165, 0.75),
rgba(46, 75, 90, 0.75) 50%,
rgba(92, 176, 220, 0.75)
);
border: solid 1px #102a3e;
box-shadow: inset 0 0 1px #fff;
display: inline-block;
overflow: visible;
}
The part marked between the comments START and END are not right as per the IDE. It keeps complaining like the following:
Mismatched parameters ([linear | radial] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)
-webkit-gradient is not working in angular 12
It keeps pointing to a parameter
Use linear-gradient:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: linear-gradient(
#327aa4,
#2e4b5a 45%,
#5cb0dc
);
}
CSS vendor / browser prefixes like -webkit or -moz are not necessary and makes the code messier and you repeat yourself (DRY). I recommend to use Angular with SCSS. Angular supports it out of the box.
If you want to rotate the gradient (e.g. horizontal) you can add the value 90deg. See the docs and web.
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
I want to create multiple border, with some padding, around my image like shown below. I prefer to do this with CSS only, but I don't know if this is possible.
While I googled for this I only found examples like this with multiple borders directly around the object using box shadow.
I tried creating this just using a border and padding around the image. But the padding didn't even worked out and with box-shadow like in the example above I won't get something like I want.
How would you guys handle this problem, and is it even possible?
Edit:
Sorry, forget to show what I've currently have: code pen link
Easy peasy!
Padding, border and couple of box-shadows will do the trick.
img {
border-radius: 50%;
padding: 3px;
border: 1px solid #ddd;
box-shadow: 0 0 0 7px #fff,
0 0 0 8px #ddd;
}
Fiddle
When devising your markup, if possible to use a bg image instead of an inline image element this is highly recommended. A couple reasons, but the 2 main ones are:
Inline img elements cannot use the css pseudo classes, :before and
:after
Inline images are harder to mask the corners when using border
radius, especially will be trickky with multiple borders.
Also, that means this design can be created entirely using one div. Here's how I would do it:
HTML
<div class="thumbnail"></div>
CSS
.thumbnail {
height: 50px; width: 50px;
border-radius: 50px;
background: url(http://www.tapdog.co/images/welcome/satelite-bg.jpg) no-repeat;
background-size: cover;
border: solid 1px #aaa;
box-shadow: 0 0 0 4px #eee, 0 0 0 5px #aaa;
}
The key point here is that you can create as many pseudo borders as you want with box-shadow. You can still add a real border using the border property, and then can go even further and add borders using the pseudo classes, which each can take their own border and box-shadow properties.
Another notable point here is the use of the background-size property, which can be very helpful in getting the image to scale proportionally when cut by the borders. especially when dealing with user generated images, or images of variable sizes. Should add vendor prefixes for cross browser compatibility
And here's a codepen with an example. http://codepen.io/anon/pen/dKxbh
this might help you refer this fiddle
.round{
width:150px;
height:150px;
border-radius:50%;
border:10px solid #fff;
background-color: #eaeae7;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}
I think the link is exactly the right way to do this! I would use the box-shadows.
http://jsfiddle.net/chriscoyier/Vm9aM/
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
Here is another example with box-shadows from Lea Verou.
http://lea.verou.me/css3-secrets/#multiple-outlines
you mean something like this:
jsFiddle
HTML:
<div class="container">
<div class="inner"></div>
</div>
CSS:
.container{
width:100px;
height:100px;
padding:10px;
background:white;
border:1px solid #555;
border-radius:50%;
}
.inner{
width:100%;
height:100%;
background:tomato;
border:1px solid #555;
border-radius:50%;
margin-top:-1px;
margin-left:-1px;
}
<div class="border"> bipin kumar pal</div>
.border {
border: 5px solid hsl(0, 0%, 40%);
padding: 5px;
background: hsl(0, 0%, 20%);
outline: 5px solid hsl(0, 0%, 60%);
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
color:#fff;
}
I've figured out how to change background color of things such as the heading in the navbar along with the links but what about the rest of the bar? I'm talking about the area left and right of any links. I assume it's in the following code but I do not know what to edit as it isn't clear. Note: Changing background color has no effect. This is in the bootstrap.css. The color is currently black.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #8900ff;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
The code below in my style.css has worked to color the background color for the links:
.navbar .navbar-inner .container .nav-collapse > ul > li > a {
background-color: #E89800;
}
Solved: What I had to do was get rid of the background image like so:
.navbar .navbar-inner {
background-color: #e89800;
background-image: none;
}
It set the background image of the navbar to none and I was able to change the background-color for the rest of the bar.
Response was found: Change background color in navbar fixed menu bar Bootstrap
There is a class that ships with bootstrap that is called .navbar-inverse
You can use that class there where you have .navbar (just add on so it looks more or less like navbar navbar-inverse
This will invert the white to black and it's something you can target easily to change as well.
Here is a JS fiddle using only stock bootstrap: Demo
As a final recommendation and to help you understand things better with the CSS in bootstrap. I recommend that you don't modify any bootstrap files and you instead use your own custom.css file (place it after the bootstrap CSS so it weights more) and do your modifications there. Read the bootstrap documentation, it's very short and simple to understand.
You can find the source of this information here: http://twitter.github.io/bootstrap/components.html#navbar , just look for the "Inverted variation" part of the documentation for the navbar and you should be good to go. It's also note worthy to say that there are more things that you can invert, such as buttons with btn-inverse so read the documentation a little more so you can engage in better and simpler programming with bootstrap.
Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?
Here's what I have so far
This only adds inset/inner shadow to the vertical sides but I need to achieve a fade out effect at the top.
-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
See the image below to see the Expected Results and what I currently have.
I also needed something like that:
Basically it is about giving the outer div a drop-shadow and placing the inner div with position:relativ to the outer div with a gradient from transparent to the needed background color:
http://jsfiddle.net/vBuxt/1/
Here is a codepen example of how I tackled this for a project I worked on recently:
http://codepen.io/byronj/pen/waOxqM
I added a box-shadow to my main content section. I then added a absolute positioned div at the bottom of my content section that contains a CSS gradient with the content background color on one end and a transparent background on the other end as seen below:
.container {
width: 1024px;
margin: 0 auto;
}
.container article {
background-color: #fff;
margin: -6em auto 10em auto;
padding-top: 2em;
width: 100%;
box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}
/** GRADIENT **/
.bottom-gradient {
position: absolute;
width: 115%;
height: 60%;
z-index: 1;
bottom: -20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}
To ensure the content is not covered up by the gradient, I set my "p" elements to position:relative with a z-index of 2, as seen below:
p {
padding: 1em 3em;
position: relative;
z-index: 2;
margin: 1em auto;
font-size: 1.3em;
line-height: 1.5em;
}
For Eric's situation, you would inverse this effect by placing the gradient at the top of the element containing the box-shadow.
Hope this helps.
You can not transition CSS3 styles that contain multiple values -:
You CAN transition from say one color to another in CSS3 but you can NOT transition between gradiens in CSS3 as it gets confused with the multiple values, it will be the same with your multiple shadow values also.
Ah, I think I see what you are trying to achieve. A solution maybe would be to try and reproduce the look you are after without using Shadows - A link below shows a possible solution using borders instead of shadows, see what you think. http://css-tricks.com/examples/GradientBorder/