we use the plugin ubermenu and i want to add shadows below the menu bar and the dropdown, exactly like: nelly.se - our website is: http://94.247.169.169/~welloteket
I've been trying to add code:
#megaMenu ul.megaMenu{
box-shadow:2px 2px 0px 0px #ccc;
}
but without any result :(
you can add this code to apply a shadow effect on your submenu(dropdown)
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
no your code is work may be you have to try different color
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.71);
}
may be this is better than the before
Related
I have a small challenge:
how to add shadow to each letter in the header?
I tried this but add shadow to the whole div not to separate letter...
shall i wrap each letter in a span or what is the solution ?
h2 {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You need to use text-shadow instead of box-shadow
Edit:
text-shadow doesn't have a spread value
Using your example it would be:
h2 {
-webkit-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
-moz-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
}
As an important note to the answer of Ricardo Ribeiro i'd add that in this way compatibility is "limited" in IE to the version 10+
For versions < 10 till 5.5 a proprietary filter can be used as fallback:
h2 {
filter:progid:DXImageTransform.Microsoft.Shadow(color=#xxxxxx,direction=[int],strength=[int])
}
more info here
I've finally been able to get my site back up and finish building it, yet I am not satisfied with the front end.
My current goal is have the the mobile display with 2 items in 2 rows.
But my issue is when I use the Chrome mobile view and my personal phone, it still copies the attributes from "fbox".
HTML:
<div id="row"1><div class="fbox mfbox" id="breast">test </div>
<div class="fbox mfbox" id="facial">test </div></div>
<div id="row2"><div class="fbox mfbox" id="body"> test</div>
<div class="fbox mfbox" id="surgery">test </div></div>
CSS:
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
.row1{
clear:both;
}
.row2{
clear:both;
}
}
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
I've added it to JSfiddle, but it does not seem to produce the results my site does.
My site: Site Removed.
Write media query under the .fbox like below
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#row1, #row2 {
clear: none;
}
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
#row1{
clear:both;
}
#row2{
clear:both;
}
}
See fiddle
In your case first .mfbox is applied good but after .mfbox there is another css .fbox so the css is replaced from .mfbox to .fbox, in that case you should apply midea query at the bottom.
Remove clear when outside of the media query,
and use # instead of . when using id
i.e. #row1 instead of .row1
You said you want two items in a row. But your css
.mfbox{
...
width:100%;
height:200px;
display:block;
}
means only one item at a row with 100% width & height of 200px.
Also in your code you are getting issues because, you had two class, and in css you defined styling for both class in the order .mfbox & .fbox. So while applying css styling obviously it will take later defined style only.
However, if you want to apply different css for mobile view and different for desktop, its not necessary to use two classes. You can handle this with only one class & in css can handle with #media.
For example:
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#media (max-width:767px){
.fbox{
width:100%;
height:200px;
display:block
}
}
I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should
I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.
I am using a tag next to the input box. There is inner box shadow given for both but the problem is , I need to make the entire thing to look like a one item (text box) so I need to remove the left side shadow of the text box.
Now you can see the line between the input and the a tag. How do I remove that line (tat is the shadow)
Here is the demo http://jsfiddle.net/jBeqk/
If I understand you right, you want to remove the thin shadow between the input and the link which stand as button.
Therefore I've modified your fiddle to get this one http://jsfiddle.net/jBeqk/75/
I've modified the shadow properties in both the input and the link
Input:
webkit-box-shadow: inset 1px 2px 1px #c3c1bb;
box-shadow: inset 1px 2px 1px
Link:
-webkit-box-shadow: inset -1px 2px 1px #c3c1bb;
box-shadow: inset -1px 2px 1px #c3c1bb;
You can noticed I've modified the first parameter setting it to '1px' for the input and to '-1px' for the link button to make the shadow respectively coming from the left and the right.
Regards.
Use this value for box-shadow
inset 0px 3px 1px -1px #c3c1bb
Add a negative spread (the forth value) and equalise for the x-value by adding back the spread amount
http://jsfiddle.net/HerrSerker/jBeqk/79/
Hi sowmya now you can do this
and remove left border of input text box
input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb;
box-shadow: inset 1px 2px 1px #c3c1bb;
}
or second option is this
input[type="text"]{
-webkit-box-shadow: inset 0 2px 1px -1px #c3c1bb;
box-shadow: inset 0 2px 1px -1px #c3c1bb;
}
Live demo
-------------------------------------
------------------------------------------
if you total remove the shadow of your input and button
than apply this css
input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb; box-shadow: inset 1px 2px 1px #c3c1bb;
}
.search_indexclose{
-webkit-box-shadow: 0 4px 1px -2px #C3C1BB inset;
box-shadow: 0 4px 1px -2px #C3C1BB inset;
}
this demo is
Try negative spread-radius:
input[type="text"]{box-shadow: inset 0 3px 0px -1px #C3C1BB;}
.search_indexclose{box-shadow: inset -2px 5px 0px -3px #C3C1BB;}