I am trying to accomplish the left widget box below and as you can see, there is a diagonal linear gradient, as well as a shine from top to bottom. The one I created in CSS is to the right, while the one I am trying to accomplish is to the left. Is there a way I can accomplish this using only one background property? Or would I need to surround the entire div with another div so I can overlay a semi-transparent gradient on it? Thanks
UPDATED with code:
.drk-grad {
background: linear-gradient(to bottom, #d2d2d2 7%, #b1b1b1 100%);
-webkit-border-radius: 10px;
border-radius: 10px;
background-clip: padding-box;
-webkit-box-shadow: 0px 1px 3px 1px #969494;
box-shadow: 0px 1px 3px 1px #969494;
border-top: 1px solid rgba(255, 255, 255, 0.7);
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
SOLUTION:
background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px);
Generally you can add multiple backgrounds, separated by commas. The first one listed will appear on top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://lea.verou.me/css3patterns/
Here's a basic outline. Play with the numbers for your exactly desired effect:
div {
background:
linear-gradient(to top, transparent, #b1b1b1 100%),
gray repeating-linear-gradient(45deg, transparent, transparent 35px,
rgba(255, 255, 255, 0.5) 35px,
rgba(255, 255, 255, 0.5) 70px);
background-clip: padding-box;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 1px 3px 1px #969494;
height: 250px;
width: 250px;
}
Demo: https://jsbin.com/fidaxigaxi/edit?html,css,output
Related
I liked this book design in iBooks and have been wondering can it be easily made with css?
Original photo
have you tried gradients and shadows ?
.cover {
background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
margin: auto;
border-radius: 5px;
width: 389px;
height: 500px;
}
body {
min-height: 100vh;
display: flex;
}
<div title=" Don't make me think " class="cover"></div>
I think this could be pretty easily done with gradients in CSS. Here's a (very rough) example fiddle: https://jsfiddle.net/6yok9c4w/
HTML:
<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />
CSS:
.overlay {
width: 400px;
height: 500px;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
I used this tool to generate the gradient: https://cssgradient.io/
With more effort and tweaking, I think you can get really close to the original.
So, I'm trying to create an border of 1px, with a color 30% green, 20% red, 27% blue, with 70% of opacity, it is possible? I'm using sass but I have not found a way to make this
.box
width: 100px
height: 100px
background: gray
margin: 50px auto 0 auto
border-color: #ff0000 #0000ff
My pen: http://codepen.io/mejingjard/pen/xwxLKO?editors=110
Yes it's possible, and it's actually really simple with rgba()
border-color: rgba(20%,30%,27%,0.7);
Read about this and more sass color functions at
http://sass-lang.com/documentation/Sass/Script/Functions.html#rgba-instance_method
You can give this a try, however this alternative is with four borders, not the three. With RGBA you can change the opacity. You can visit http://www.cssportal.com/css3-rgba-generator/ to generate the CSS3 RGBA colours; there you can also change the opacity.
div {
width: 100px;
height: 100px;
margin: auto;
}
.one {
border-top: 1px solid rgba(0, 255, 0, 0.7);
border-right: 1px solid rgba(255, 0, 0, 0.7);
border-bottom: 1px solid rgba(0, 0, 255, 0.7);
border-left: 1px solid rgba(255, 0, 0, .5);
<div class="one"></div>
Alternatively if you wanted to go for more of a gradient look you can try applying a CSS3 gradient within a pseudo-element, however only two border colors are adopted, and it's without the opacity.
.one{
margin: auto;
width: 100px;
height: 100px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E93478 0%, #FF0 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E93478 0%, #FF0 100%);
border-image: linear-gradient(to bottom, #E93478 0%, #FF0 100%);
border-image-slice: 1;}
<div class="one"></div>
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
I am facing a problem with edges in a css list (<ul>,<li>). The problem that when I set the left edge with a color and a different thickness, the lower edge of overlapping ends as shown in the screenshot below:
In the picture there to see the right, so here I leave the fiddle to anyone who can give me help in this situation.
http://jsfiddle.net/Igaojsfiddle/T6KrE/31/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-bottom:1px solid #999999;
**border-left:10px solid green;**
border-right:1px solid #999999;
height:55px;
}
it is normal, borders reaches each other to the corners.
you may draw your line with box-shadow:
http://jsfiddle.net/T6KrE/32/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px -2px gray;;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left:10px solid green;
border-right:1px solid #999999;
height:55px;
}
Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?
Turns out, there is in webkit:
input[type="range"]{
-webkit-appearance:none !important;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
}
You can then add whatever attributes you need to each those selectors. Background, gradient, etc...
Hope that helps!
A full example of css for customization (at this moment for webkit):
input[type="range"]{
background: rgb(94, 30, 30);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]:hover{
background: rgb(194, 139, 131);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border:1px solid black;
background: #a90329;
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}
input[type="range"]::-webkit-slider-thumb:hover{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color:rgb(56, 13, 13);
border:1px solid black;
background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
}
On the top answer its already described. I just customize it on my way.
Take a look its may help you.
Add below code on CSS:
input:focus{
outline-color: transparent;
}
input[type="range"]{
-webkit-appearance:none;
-moz-apperance:none;
height: 6px;
background-color: #b6b6b6;
outline-color: transparent;
}
input::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:16px;
height:16px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background-color: #20b373;
overflow: visible;
}
Live Demo