I have slide toggle animation effect for a toast message, toast message have box-shadow in CSS, but whenever the toggle happens box-shadow looks weird and back to normal when the slide completes
HTML
<div class="alert-toaster" style="display: none;">Add to Playlist</div>
<button id="toggle">
Toggle
</button>
CSS:
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
}
JS
$(document).ready(function() {
$("#toggle").click(function(){
$(".alert-toaster").show("slide", {direction:"right"}, 500 );
setTimeout(function(){
$(".alert-toaster").hide("slide", {direction:"right"}, 500 );
},2000);
});
});
Fiddle example
It looks very weird to me, any suggestion?
Just add margin: 10px 0 10px 10px; to create enough space for your label.
.alert-toaster {
width:150px !important;
height:40px !important;
height:auto;
position:absolute;
right:2%;
background-color: #C9234C;
color: #F0F0F0;
padding:10px;
text-align:center;
border-radius: 20px 0 0 20px;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
margin: 10px 0 10px 10px;
}
https://jsfiddle.net/mrwsgs58/3/
Managed to fix it with a small css rule.
.ui-effects-wrapper {
overflow: visible !important;
}
JQuery wraps your element with a div to which it applies an overflow: hidden during the animation.
Maybe you can find an option to avoid that.
EDIT:
It might not be the best solution though. You'll have some bad side effects with this.
Try to add a wrapper yourself, to which you add the drop-shadow. Still animate the inside div.
Here's a solution https://jsfiddle.net/xfn1j9hs/ without using jquery for the animation, but CSS only.
I want to make it "scrollable" when the user add a comment.
this is the css code:
.contenu_post{
width:700px;
height:500px;
background-color:white;
float:right;
margin-right:80px;
margin-top:20px;
text-align:center;
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
}
And my html code:html code source
its the the class "post_user" in the html code I want to be "scrollable"
Thanks you for both of you! :)
Like Michael Coker said, use overflow-y: scroll; on the content you want scrollable. And as Fred said, it's pretty hard to know exactly where that should go without more information about your markup structure.
edited
I'm using ouwl carousel for the home page carousel.
here you have the example
The problem is the white border created on the bottom and the right parts.
I've read that applying: display:block; line-height:0;
but nothing worked
here you have a fiddle (it works fine sometimes, no border (i don't know why)) with only the carousel, for testing if you want.
Move the window size of the result for better experience with the carousel images.
I'm aplying the shadow to the div converted to carousel:
#carousel{
position: relative;
width: 100%;
box-sizing:border-box;
background-size: 100%;
height: auto;
display: block;
text-align: center;
margin-top: 5px;
line-height: 0;
-webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
-moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
}
You can try to give the .owl-wrapper-outer the box-shadow (only works if your images are the same size).
If your images are smaller, then give the images a box-shadow and .owl-item a padding, if the box-shadow is cut off.
I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
You can also override the default Bootstrap setting to use your own colors
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style
After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
input.form-control,input.form-control:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
if you think you can't handle the css class then simply add style to the textfield
<input type="text" style="outline:none; box-shadow:none;">
Go to Customize Bootstrap, look for #input-border-focus, enter your desired color code, scroll down and click "Compile and Download".
this will remove the border and the focus blue shadow.
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
http://jsfiddle.net/pE5mQ/64/
On bootstrap 3 there is a small top shodow on ios, could be removed with this:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}
Got it from here
Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}
HTML
<input type="text" class="form-control shadow-none">
CSS
input:focus{
border: 1px solid #ccc
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
So far none of the answers helped me out in this thread. What solved it for me was
/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}