I am creating a heading for my site. The background of the heading is set as horizontal gradient with background becoming transparent as it goes from left to right.
WHAT I AM TRYING TO DO
Can I create box shadow for the heading such that the shadow too becomes transparent as it goes from left to right.
WHAT I TRIED
width: 500px;
height: 50px;
position: absolute;
color: #535353;
left: 45%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
background: -moz-linear-gradient(left, rgba(179,218,221,0.65) 0%, rgba(249,249,249,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(179,218,221,0.65)), color-stop(100%,rgba(249,249,249,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b3dadd', endColorstr='#00f9f9f9',GradientType=1 );
border-radius: 5px;
box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);
By using the following I can almost get it, but the transparent gradient dosenot look so good.
Fiddle
http://jsfiddle.net/p7W7M/
This can work but not perfectly [jugaad]
box-shadow:60px 5px 0 #ffffff,60px -5px 0 #ffffff,-4px 0px 5px #000000;
At fiddle
Related
Vaadin 7.6.2
What would be the CSS that would allow me to change the upload button's color to one of the following: danger, primary or friendly so that I may use setStyleName() in the same way as I do for a Button ?
Ref:
https://vaadin.com/docs/-/part/framework/components/components-button.html
This Doc doesn't discuss the bug or fix:
https://vaadin.com/docs/-/part/framework/components/components-upload.html
But does say:
The upload button has the same structure and style as a regular Button component.
So, I guess that the SCSS or CSS that isn't included for this "button" is either an omission, oversight, or bug.
Solved it by finding "danger", "primary" and "friendly" in the source and simply copying them out, pasting them into mytheme.scss then changing the style names as #AndreSchild describes in the following answer:
Vaadin Upload Component Upload Button, changing it's Style?
Here's the updated CSS (paste into mytheme.scss) and use setStyleName as you would for a regular button component:
.v-upload-primary .v-button {
height: 37px;
padding: 0 16px;
color: #ecf2f8;
font-weight: 400;
border-radius: 4px;
border: 1px solid #1362b1;
border-top-color: #156ab3;
border-bottom-color: #1156a8;
background-color: #197de1;
background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
-webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
padding: 0 19px;
font-weight: bold;
min-width: 81px;
}
.v-upload-primary .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-primary .v-button:hover:after {
background-color: rgba(90, 163, 237, 0.1);
}
.v-upload-primary .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-primary .v-button:active:after {
background-color: rgba(2, 62, 122, 0.2);
}
.v-ie8 .v-upload-primary .v-button {
min-width: 43px;
}
.v-upload-friendly .v-button {
height: 37px;
padding: 0 16px;
color: #eaf4e9;
font-weight: 400;
border-radius: 4px;
border: 1px solid #227719;
border-top-color: #257d1a;
border-bottom-color: #1e6b15;
background-color: #2c9720;
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.v-upload-friendly .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-friendly .v-button:hover:after {
background-color: rgba(65, 211, 48, 0.1);
}
.v-upload-friendly .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-friendly .v-button:active:after {
background-color: rgba(14, 86, 6, 0.2);
}
.v-upload-danger .v-button {
height: 37px;
padding: 0 16px;
color: #f9f0ef;
font-weight: 400;
border-radius: 4px;
border: 1px solid #bb382e;
border-top-color: #bc3c31;
border-bottom-color: #b13028;
background-color: #ed473b;
background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
-webkit-box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.v-upload-danger .v-button:after {
border: inherit;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
.v-upload-danger .v-button:hover:after {
background-color: rgba(243, 137, 129, 0.1);
}
.v-upload-danger .v-button:focus:after {
border: inherit;
-webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
}
.v-upload-danger .v-button:active:after {
background-color: rgba(146, 12, 2, 0.2);
}
An alternative solution is to hide the upload button inside the component by using css. And then add a standard Vaadin button in your code next to the Upload component. Just call upload.submit() inside the click listener of your button.
Now it's easy to apply those standard style names to that button.
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.
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 */
}
See here jsfiddle http://jsfiddle.net/KvKsm/2/embedded/result/
edit here http://jsfiddle.net/KvKsm/2/
html
<input type="submit" value="Contact Us">
css
input {
-moz-transition: -moz-transform 0.2s ease-in-out 0s;
background: none repeat scroll 0% 0% #2E2E2E;
border-radius: 8px 8px 8px 8px;
border: 0pt none;
box-shadow: 0pt -1px 1px rgba(255, 255, 255, 0.15) inset;
color: #FFFFFF;
display: inline-block;
font-size: 32px;
line-height: 1;
padding: 10px;
text-shadow: 0pt -1px 1px rgba(19, 65, 88, 0.8);width:180px
}
in Desktop browsers
in iPad and iPhone
I want fixed width button.
I found an answer here
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
adding -webkit-appearance: none; solved the problem