I'm trying to place a shadow under a popup panel that defined as follows:
<popupset id="mainPopupSet">
<panel id="autoTagBookmarksPopup" noautohide="true" fade="none" backdrag="true" level="float">
<hbox id="titleBox">
<spacer flex="1"/>
<image id="closeImage" align="end"/>
</hbox>
...
I wasn't succesful with the: box-shadow
any one has sugestions?
Can you paste the css that you were using for box-shadow?
Try this...
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
This is an old question but I had the same issue and want to share my solution so this might be of any help for others.
I have not found a way to place the box-shadow on a panel directly. It seems, that everything visually outside the panel element will be cutted (the shadow is placed outside).
However I then defined the shadow for the first child and added some margin so the shadow will be visible.
For the given example, this might look something like this (untested):
panel#autoTagBookmarksPopup {
background-color: transparent;
border-width: 0px;
}
panel > hbox#titleBox {
margin: 5px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: 2px 2px 3px #888;
}
Related
Link:- https://stackblitz.com/angular/qmedkbvramy?file=app%2Fcdk-virtual-scroll-overview-example.ts
I am trying angular material scollbar look as in the attached picture. But I can't figure out, how to do this.
Material by default doesn't provide any styles to change the scrolling
You can use this css to change the scrollbar style
cdk-virtual-scroll-viewport::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Stackblitz demo: https://stackblitz.com/edit/angular-jkw9ac
I upgraded to JQM 1.4, but I liked the theme of 1.3 much better. There is a classic theme in 1.4, which has the same colors. But the navigation buttons in the corners (header) look completely different.
Is it possible to reproduce the same look for those buttons in 1.4?
It is hard to get it exact as jQM 1.3 enhanced buttons using nested spans which are no longer there in 1.4. However, with a little CSS you can get pretty close. Given a header with buttons:
<div data-role="header" data-theme="b">
Home
<h1>Theme B</h1>
Contact Us
</div>
Assign a new class to the buttons (btn_round in my example) and then create the following CSS:
.btn_round
{
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-moz-border-radius: 1.5em !important;
-webkit-border-radius: 1.5em !important;
border-radius: 1.5em !important;
background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
background-origin: padding-box;
background-size: auto;
border-color: rgb(17, 17, 17);
box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
text-shadow: rgb(17, 17, 17) 0px 1px 1px;
}
.btn_round:after{
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}
This adds the gradient background, rounded corners and shadows that were present in 1.3.
Here is a working DEMO
NOTE: the demo includes CSS for both the dark theme and the light theme. Tweak the CSS to get your desired look.
Chapter 5 of railstutorial.org (http://ruby.railstutorial.org/chapters/filling-in-the-layout#top) talks about how to create a basic layout for a web site. I use it as a resource for putting a Rails web site together.
I'm having difficulty customizing the navbar/header. While changing the font color of the "sample app" logo is straightforward enough (just change the RGB setting of the color parameter under #logo), how do I change parameters in the rest of the header? How do I change that black bar to be some other color, such as dark blue/green/red/purple/brown/etc.? How do I change the color of the menu links (Home/Help/Sign Up) from the default gray to yellow? Or orange? Or some other color?
If you want to change color or customize style of twitter bootstrap (e.g header, link etc), you can use generator for twitter bootstrap..
Generator
twitter bootstrap generator
StyleBootstrap
bootstrapthemeroller
decioferreira
Or if you don't know class/id potition of style, you can use inspect element on your browser and see element using class/id of style
Example
Header using blue color
.navbar-inner {
min-height: 50px;
padding-right: 20px;
padding-left: 20px;
background-color: #45aeea;
background-image: -moz-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#54b4eb),to(#2fa4e7));
background-image: -webkit-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -o-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: linear-gradient(to bottom,#54b4eb,#2fa4e7);
background-repeat: repeat-x;
border: 1px solid #1990d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff2fa4e7',GradientType=0);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
box-shadow: 0 1px 4px rgba(0,0,0,0.065);
}
Link header using white color
.navbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #ce4213;
}
Bootstrap themes
You can see some amazing bootstrap themes here
.navbar {
.navbar-inner {
background-color: #2c2c2c;
background-image: none;
}
}
Source Change background color in navbar fixed menu bar Bootstrap
You can take a look at this too.
I am using border radius on an input field and when I select the field, it gets a border highlight as if there is no border radius i.e. the imaginary rectangle with sharp edges gets highlighted and not the real rounded corners one. Any cues on how to get the rounded rectangle highlighted? The border radius is functioning perfectly but on focus the highlight is not on the rounded corners.
<input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML-->
.filter{border-radius:9px;} /*CSS*/
This is because outline doesn't respect (for whatever reason) border-radius, to emulate this it's easiest to use box-shadow:
.filter {
padding: 0.4em;
outline: none;
border-radius: 9px;
}
.filter:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}
JS Fiddle demo.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
This works like a charm. you will get a good effect on focus
The Design
The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.
The Code
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}
The Issue
iOS v4+ does not display the box-shadow properly. See image below.
Tested
I have attempted using -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
I have applied display:block; to the input element.
Current Workaround
I would prefer not having to do this, but this is the only way I can get my desired effect.
HTML
<p><input /></p>
CSS
p {
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
border-radius:4px;
}
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
}
Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.
My Question
Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly?
Thanks in advance!
Try adding -webkit-appearance: none; iOS tends to mess up forms.
I had a problem trying to add a box-shadow around invalid inputs (before submit is clicked).
Using -webkit-appearance: none; worked fine for a while, but I've noticed on chrome checkboxes have gone missing now.
Here's my hack that works more or less cross browser. Looks like safari is the new "internet explorer" :-/
input:invalid, select:invalid, textarea:invalid, .invalid {
background-clip: padding-box; /* Safari fix */
box-shadow: 0 0 5pt 2pt rgba(255,0,0,.75) !important;
}
select:invalid {
border: 1px solid red; /* Safari fix */
}
input[type="checkbox"]:invalid{
background: red; /* Safari fix */
}
input[type="radio"]:invalid{
background: red; /* Safari fix */
}