I am trying to get a "cloudy transparent edge" to a bootstrap modal. Is this possible?
I have tried this CSS:
.modal-content {
border: none;
outline: none;
-webkit-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
-moz-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
-o-box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
box-shadow:
5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
-5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
}
The effect I want looks lie the photo below, with the blurring to transparent and I want it over 5px all along the square border of the div/bootstrap.
My CSS achieves this for a color but I tried RGBA with opacity and it does not work
Related
box-shadow-image
Here is the code and the website where I found the style. Thank you.
https://getcssscan.com/css-box-shadow-examples
box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 60px
Change the X and Y values. (first 2 values after the color)
div {
margin-top: 50px;
margin-left: 50px;
height: 200px;
width: 200px;
box-shadow: blue 0px 0px 0px 3px inset,
rgb(255, 255, 255) 0px -10px 0px -3px,
rgb(31, 193, 27) 0px -10px,
rgb(255, 255, 255) 0px -20px 0px -3px,
rgb(255, 217, 19) 0px -20px,
rgb(255, 255, 255) 0px -30px 0px -3px,
rgb(255, 156, 85) 0px -30px,
rgb(255, 255, 255) 0px -40px 0px -3px,
rgb(255, 85, 85) 0px -40px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 60px: white;
}
<div></div>
center origin and spread-radius of shadow:
.box {
margin: 50px;
width: 50px;
height: 50px;
box-shadow: blue 0px 0px 0px 2px inset, rgb(255 255 255) 0 0 0px 4px, rgb(31 193 27) 0 0px 0 6px, rgb(255 255 255) 0 0 0px 8px, rgb(255 217 19) 0 0 0px 10px, rgb(255 255 255) 0 0 0px 12px, rgb(255 156 85) 0 0 0 14px, rgb(255 255 255) 0 0 0px 16px, rgb(255 85 85) 0 0 0 18px;
}
<div class="box"></div>
How to make such a box-shadow?:
Sides and bottom is same, top is 1px border, without visible shadow.
I do this that:
div {
box-shadow:
inset 0px -10px 4px -10px rgba(0, 0, 0, 0.6),
inset 10px 0px 4px -10px rgba(0, 0, 0, 0.6),
inset -10px 0px 4px -10px rgba(0, 0, 0, 0.6);
background-color: white;
border-top: 1px solid #bebebe;
border-radius: 0 0 6px 6px;
padding: 5px;
width: 130px;
text-align: center;
}
div:hover {
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
}
<div>dddddddddddd <br>dddddddddddd <br>dddddddddddd <br></div>
I want to change the blue glow if the focus on Bootstrap 3 input and textareas.
I tried adding this
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
to my costum.css but it only change the glow of input fields, not textarea.
I also tried this,
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
which changed nothing.
I am not a CSS savvy so appreciate your help.
Try using:
textarea:focus, input:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8) !important;
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6) !important;
outline: 0 none !important;
}
I have a div with borders with different colors. The design that im working towards blends the point at which these 2 borders join. Can this be done with CSS?
<div class="panel">
dfds
</div>
body {
background: green;
}
.panel {
margin: auto;
width: 300px;
height: 300px;
background: white;
border-radius: 10px;
padding: 10px;
border-right: 6px solid #D7D7D7;
border-bottom: 6px solid #B9B9B9;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
http://codepen.io/anon/pen/XJEWqp
Below you can see the bottom right corner has a sharp diagonal join:
This is the same detail in the design that im creating:
Howsabout this:
body {
background: green;
}
.panel {
margin: auto;
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
-moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
, inset -6px 0px 0 rgba(255, 0, 0, 0.5)
, inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}
<div class="panel">
dfds
</div>
Used red and blue to highlight the overlapping
You can use a border-image for this purpose.
div {
margin: 30px;
width: 50px;
height: 50px;
background: #DDD;
border: 10px solid transparent;
-webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
-o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}
<div></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
The code that I currently have is this:
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height:100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green ;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
.button2:hover {
background-color:#FF0000;
}
The problem, however, is that whenever I hover my mouse over the div, the background color of the box does not change to red.
How can I make it so that whenever I hover over divs with class button2 it will change to the background color red? Is there a problem with the formatting?
My current HTML is:
<html>
<div class=button2></div>
</html>
Simple syntax error - you forgot to close .button2 {}
jsFiddle example - it works now
Updated CSS
.button2 {
margin-left: 10px;
background-color: lightgreen;
width: 180px;
height: 100px;
padding: 50px,60px;
color: rgba(20, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid green;
font-weight: bold;
font-size: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
.button2:hover {
background-color: #FF0000;
}
As a side note, it's always helpful to view these errors in the F12 dev tool.