I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS.
My site found here currenly has a feathered effect by using the following html for the image. However it seems to make the whole image feathered, instead I only need the very EDGES to be strong feathered, and then become less feathered as it spans approx. 50px towards the center on all sides of the image.
HTML:
<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>
CSS:
p.vignette {
position: relative;
}
p.vignette img {
display: block;
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:6%;
}
p.vignette:after {
-moz-box-shadow: inset 0 0 180px #defeec;
-webkit-box-shadow: inset 0 0 180px #defeec;
box-shadow: inset 0 0 180px #defeec;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
content: "";
}
You can see I'm using an inset box shadow of 180px but this makes the whole image feathered slightly, and if I use say 50px it is barely noticeable at all! How do I make just the edges strongly and then fading into weaker towards the center?
Thank you!
You need to change some stuff around to get this to work. First, take inline-block off the <a class='divLink'> tag. Then try the following:
.vignette {
width: 80%;
margin: 1em auto;
box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
}
Then use the following html (and scrap the <img> tag)
<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>
Of course, you could also put the background-image rule inside the css block, but sometimes declaring a background image inline makes a lot more sense, especially if you expect to have a number of photographs or similar.
Create a div that would go inside vignette, and call it fade. It must go above the img though.
.fade {
height: 100%;
width: 100%;
position:absolute;
background: -webkit-linear-gradient(left,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.65) 100%
);
}
<p class="vignette">
<div class="fade"></div>
<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" />
</p>
Related
I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.
#header1 {
background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
background-position:center center;
position: relative;
background-size: cover;
padding-bottom:5em;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?
Use Linear gradient
to darken the background refer to this codepen and this link
<div class="bg-img"></div>
.bg-img {
width: 100%;
height: 100%;
background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
background-size: cover;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 10px;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
As intended the h1 acts as an extra visual layer and its padding covers the #header1.
A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.
And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron
In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.
Here is a personal example where I used this technique.
Example
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
You don't need the overlay if you add a box shadow. The inner box-shadows work as an overlay. You can adjust the opacity by changing the .5 up or down.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
for your answer, you can visit css-tricks
I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
0.7 defines the transparency level you need the particular element to be shown.
below link explain concept of overlaying with very good examples
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
You can also use this CSS:
filter: brightness(50%);
In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:
background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;
how could i float first part to left and second to right of the element?
before was:
background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;
is it real to do?
also: i use it with :hover
I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.
However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).
So that you could handle the position of each icon interdependently.
For instance:
.box:before, .box:after {
content: "";
display: inline-block; /* or position these elements by floats, etc. */
width: 48px; /* for instance */
height: 48px; /* for instance */
}
.box:before {
background: url(../images/png/elements.png) no-repeat -5px -152px;
}
.box:after {
background: url(../images/png/elements.png) no-repeat -5px -104px;
}
<div class="box"></div>
The left and right you are using belong to background-position. The pixel definitions are overriding them.
You should separate the images to two different elements.
Don't use Shorthand for this (especially in the position property):
try with something like:
div {
width: 100%;
height: 190px;
border: 1px solid red;
background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: left top, right bottom;
background-repeat: no-repeat;
}
<div></div>
Edit: Example with pixels, zero and %.
div {
width: 100%;
height: 190px;
border: 1px solid red;
background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: 0 0, 100% -1215px;
background-repeat: no-repeat;
}
<div></div>
Is it possible to control the length and distance between dashed border strokes in CSS?
This example below displays differently between browsers:
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}
<div>I have a dashed border!</div>
Big differences: IE 11 / Firefox / Chrome
Are there any methods that can provide greater control of the dashed borders appearance?
The native dashed border property value does not offer control over the dashes themselves... so bring on the border-image property!
Brew your own border with border-image
Compatibility: It offers great browser support (IE 11 and all modern browsers). A normal border can be set as a fallback for older browsers.
Let's create these
These borders will display exactly the same cross-browser!
Step 1 - Create a suitable image
This example is 15 pixels wide by 15 pixels high and the gaps are currently 5px wide. It is a .png with transparency.
This is what it looks like in photoshop when zoomed in:
This is what it looks like to scale:
Controlling gap and stroke length
To create wider / shorter gaps or strokes, widen / shorten the gaps or strokes in the image.
Here is an image with wider 10px gaps:
correctly scaled =
Step 2 - Create the CSS — this example requires 4 basic steps
Define the border-image-source:
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
Optional - Define the border-image-width:
border-image-width: 1;
The default value is 1. It can also be set with a pixel value, percentage value, or as another multiple (1x, 2x, 3x etc). This overrides any border-width set.
Define the border-image-slice:
In this example, the thickness of the images top, right, bottom and left borders is 2px, and there is no gap outside of them, so our slice value is 2:
border-image-slice: 2;
The slices look like this, 2 pixels from the top, right, bottom and left:
Define the border-image-repeat:
In this example, we want the pattern to repeat itself evenly around our div. So we choose:
border-image-repeat: round;
Writing shorthand
The properties above can be set individually, or in shorthand using border-image:
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
Complete example
Note the border: dashed 4px #000 fallback. Non-supporting browsers will receive this border.
.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}
<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
In addition to the border-image property, there are a few other ways to create a dashed border with control over the length of the stroke and the distance between them. They are described below:
Method 1: Using SVG
We can create the dashed border by using a path or a polygon element and setting the stroke-dasharray property. The property takes two parameters where one defines the size of the dash and the other determines the space between them.
Pros:
SVGs by nature are scalable graphics and can adapt to any container dimensions.
Can work very well even if there is a border-radius involved. We would just have replace the path with a circle like in this answer (or) convert the path into a circle.
Browser support for SVG is pretty good and fallback can be provided using VML for IE8-.
Cons:
When the dimensions of the container do not change proportionately, the paths tend to scale resulting in a change in size of the dash and the space between them (try hovering on the first box in the snippet). This can be controlled by adding vector-effect='non-scaling-stroke' (as in the second box) but the browser support for this property is nil in IE.
.dashed-vector {
position: relative;
height: 100px;
width: 300px;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
path{
fill: none;
stroke: blue;
stroke-width: 5;
stroke-dasharray: 10, 10;
}
span {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
}
/* just for demo */
div{
margin-bottom: 10px;
transition: all 1s;
}
div:hover{
height: 100px;
width: 400px;
}
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' />
</svg>
<span>Some content</span>
</div>
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
</svg>
<span>Some content</span>
</div>
Method 2: Using Gradients
We can use multiple linear-gradient background images and position them appropriately to create a dashed border effect. This can also be done with a repeating-linear-gradient but there is not much improvement because of using a repeating gradient as we need each gradient to repeat in only one direction.
.dashed-gradient{
height: 100px;
width: 200px;
padding: 10px;
background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
.dashed-repeating-gradient {
height: 100px;
width: 200px;
padding: 10px;
background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
/* just for demo */
div {
margin: 10px;
transition: all 1s;
}
div:hover {
height: 150px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>
Pros:
Scalable and can adapt even if the container's dimensions are dynamic.
Does not make use of any extra pseudo-elements which means they can be kept aside for any other potential usage.
Cons:
Browser support for linear gradients is comparatively lower and this is a no-go if you want to support IE 9-. Even libraries like CSS3 PIE do not support creation of gradient patterns in IE8-.
Cannot be used when border-radius is involved because backgrounds don't curve based on border-radius. They get clipped instead.
Method 3: Box Shadows
We can create a small bar (in the shape of the dash) using pseudo-elements and then create multiple box-shadow versions of it to create a border like in the below snippet.
If the dash is a square shape then a single pseudo-element would be enough but if it is a rectangle, we would need one pseudo-element for the top + bottom borders and another for left + right borders. This is because the height and width for the dash on the top border will be different from that on the left.
Pros:
The dimensions of the dash is controllable by changing the dimensions of the pseudo-element. The spacing is controllable by modifying the space between each shadow.
A very unique effect can be produced by adding a different color for each box shadow.
Cons:
Since we have to manually set the dimensions of the dash and the spacing, this approach is no good when the dimensions of the parent box is dynamic.
IE8 and lower do not support box shadow. However, this can be overcome by using libraries like CSS3 PIE.
Can be used with border-radius but positioning them would be very tricky with having to find points on a circle (and possibly even transform).
.dashed-box-shadow{
position: relative;
height: 120px;
width: 120px;
padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 3px; /* height of the border top and bottom */
width: 10px; /* width of the border top and bottom */
background: blue; /* border color */
box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 10px; /* height of the border left and right */
width: 3px; /* width of the border left and right */
background: blue; /* border color */
box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}
<div class='dashed-box-shadow'>Some content</div>
There's a cool tool made by #kovart called the dashed border generator.
It uses an svg as a background image to allow setting the stroke dash array you desire, and is pretty convenient.
You would then simply use it as the background property on your element in place of the border:
div {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
padding: 20px;
display: inline-block;
}
Css render is browser specific and I don't know any fine tuning on it, you should work with images as recommended by Ham.
Reference: http://www.w3.org/TR/CSS2/box.html#border-style-properties
Short one: No, it's not. You will have to work with images instead.
Update
Thanks to kovart for this great tool try it
https://kovart.github.io/dashed-border-generator/
my answer was:
I just recently had the same problem.
I have made this work around, hope it will help someone.
HTML + tailwind
<div class="dashed-border h-14 w-full relative rounded-lg">
<div class="w-full h-full rounded-lg bg-page z-10 relative">
Content goes here...
<div>
</div>
CSS
.dashed-border::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: calc(100% + 4px);
transform: translateY(-50%);
background-image: linear-gradient(to right, #333 50%, transparent 50%);
background-size: 16px;
z-index: 0;
border-radius: 0.5rem;
}
.dashed-border::after {
content: '';
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: calc(100% + 4px);
transform: translateX(-50%);
background-image: linear-gradient(to bottom, #333 50%, transparent 50%);
background-size: 4px 16px;
z-index: 1;
border-radius: 0.5rem;
}
Stroke length depends on stroke width. You can increase length by increasing width and hide part of border by inner element.
EDIT: added pointer-events: none; thanks to benJ.
.thin {
background: #F4FFF3;
border: 2px dashed #3FA535;
position: relative;
}
.thin:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border: 1px solid #F4FFF3;
pointer-events: none;
}
https://jsfiddle.net/ksf9zoLh/
.outline {
outline: 48px dashed #d5fb62;
outline-offset: -4px;
overflow:hidden;
}
if overflow hidden not problem else outline 4 instead 48.
<div class="outline"></div>
I just recently had the same problem.
I managed to solve it with two absolutely positioned divs carrying the border (one for horizontal and one for vertical), and then transforming them.
The outer box just needs to be relatively positioned.
<div class="relative">
<div class="absolute absolute--fill overflow-hidden">
<div class="absolute absolute--fill b--dashed b--red"
style="
border-width: 4px 0px 4px 0px;
transform: scaleX(2);
"></div>
<div class="absolute absolute--fill b--dashed b--red"
style="
border-width: 0px 4px 0px 4px;
transform: scaleY(2);
"></div>
</div>
<div> {{Box content goes here}} </div>
</div>
Note: i used tachyons in this example, but i guess the classes are kind of self-explanatory.
I think I've just found the definitive solution to this problem with the use of clip-path property. Basically all there is to add a dashed border then mask the excess.
The clip-path property also supports rounded corners so you can match it up with the border-radius and have custom dashed borders and rounded corners!
.demo {
display: inline-flex;
width: 200px;
height: 100px;
position: relative;
clip-path: inset(0 round 30px 0 30px 0);
}
.demo::before {
content: '';
position: absolute;
left: -7px;
top: -7px;
right: -7px;
bottom: -7px;
border: 8px dashed rgba(0, 0, 255, 0.3);
border-radius: 37px 0 37px 0;
box-sizing: border-box;
}
<div class="demo"></div>
You could do this directly on the div itself of course without using the ::after pseudo element. But this would mean you have to clip into the div and it would end up smaller than it's initial size.
This will make an orange and gray border using the class="myclass" on the div.
.myclass {
outline:dashed darkorange 12px;
border:solid slategray 14px;
outline-offset:-14px;
}
I have a large png file that I am using as background image file for my various elements using css. I can use that image when I know the width and height of the element, like
<div id="play-btn"></div>
.play-btn{
background: url(../images/bigImage.png) no-repeat 203px 415px;
width: 100px;
height: 50px;
}
how to use that bigImage as background when I dont want to provide width/height of the elemtn, like
<div id="star-icon">star on left</div>
.star-icon{
background: /*How I will use bigImage here on where star is at location 50,50*/,
padding: 5px 0 5px 60px;
}
You have to use negative left and top, it moves the bgImage in that direction so it displays starting at 50px.
background: url(../images/bigImage.png) no-repeat -50px -50px;
given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color.
eg :
You can't set multiple background colors, but you could set something like:
div.twocolorish {
background-color: green;
border-left: 20px solid red;
}
As long as you don't need text to go over the part in red then this would take care of you in one div.
I ended up with this solution using linear gradients:
.dualcol-test {
background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
}
<div class="dualcol-test"> This div has a green and red background <br><br><br> </div>
You can achieve 2 colors in 1 div by using pseudo-element :before
HTML:
<div class="twocolordiv"></div>
CSS:
.twocolordiv {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}
.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
You can use linear-gradient background to do this
background: linear-gradient(90deg, green 50%,red 50%);
No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.
This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.
<style type="text/css">
#ji { width: 500px; height: 300px;
background:
-moz-linear-gradient(green, green) 0px 0px no-repeat,
-moz-linear-gradient(red, red) 200px 50px no-repeat,
-moz-linear-gradient(blue, blue) 0px 250px no-repeat,
-moz-linear-gradient(gray, gray) 300px 125px no-repeat;
-moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
}
</style>
<div id="ji">
</div>
Give this a go :)
I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).
Edit: Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size
Using the :before css attribute allows you to 'fill' a div with the two colours.
.myDiv {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
/*Set width/height of the div in 'parent'*/
width: 100px;
height: 100px;
}
.myDiv:before {
content: "";
position: absolute; /*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
/*You can choose to align it left, right, top or bottom here*/
top: 0;
right: 0;
bottom: 60%;
left: 0;
background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>
An easily edited sample can be seen LIVE DEMO
Using background-image / repeat-y is the easiest solution - however, maybe you want to change colours or widths or something with Javascript.
Here's a way to do this which allows text everywhere.
http://jsfiddle.net/WQ8CG/
HTML:
<div id="container"><div class="offset">text</div></div>
CSS:
#container {
background: #ccc;
border-right: 40px solid #aaa
}
.offset {
margin-right: -40px;
zoom: 1; /* to fix IE7 and IE6 */
position: relative /* to fix IE6 */
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
You could you inset box shadow, and change the shadow to whatever colour you required.
CSS
-moz-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);