I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
Related
I'm looking for a way to add a box-shadow to all divs ONLY IF they already have a border.
A lot of div are just used for positioning.
div{
box-shadow: 0 0 1pt 2pt black;
}
is of course too much. I was thinking of this, but i can't find the correct syntax :
div[style*="border-width:1px;"]{
box-shadow: 0 0 1pt 2pt black;
}
The code i'm looking for shoudln't target a specific page or structure. It's a custom userstyle for every pages.
I'm not sure about a pure CSS way of doing this, however I have managed to get a jQuery solution if that's any good to you.
The button is just to demonstrate the before and after. Im assuming in your real project you would want to do this on document ready.
$('#shadowMeUp').click(function(){
$("div")
.filter(function() {
return $(this).css('border-style') == "solid"
})
.addClass("shadow");
});
.box {
height: 100px;
width: 100px;
background-color: steelblue;
margin: 15px;
display: inline-block;
}
.border_box {
border-width: 5px;
border-color: indianred;
border-style: solid;
}
.shadow {
-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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="shadowMeUp">Add shadows</button>
<br>
<div class="box border_box"></div>
<div class="box"></div>
<div class="box border_box"></div>
<div class="box"></div>
Sorry, no pure CSS solution for this one...
As mentioned, you can use javascript to detect which elements have border, and then apply to them your custom box-shadow, but this would be a pretty bad practice, and can potentially carry a big performance cost on your page.
I wrote a small Angular directive that generates a step input control for numbers. I've used Bootstrap buttons (xs) for the inc/dec controls and somehow managed to simulate a fake focus on the outer container. The problem is centring vertically the spans and the input in a stable layout that keeps together when zoomed.
This is the directive template:
<ng-form name="stepNumberForm" novalidate \>
<div class="step-number"
tabindex="{{$id}}"
ng-class="{\'fake-focus\': fakeFocus}"
ng-keyup="keyControl($event)">
<span
ng-disabled="incDisable"
class="btn-primary"
ng-click="inc()">
<i class="glyphicon glyphicon-plus ">
</i>
</span>
<input type="text"
ng-style="setWidth()"
name="value"
ng-keyup="keyControl($event)"
ng-model="value"
ng-focus="selectAll($event)"
ng-blur="validate()"
class="input-xs">
<span
ng-disabled="decDisable"
class="btn-primary"
ng-click="dec()">
<i class="glyphicon glyphicon-minus">
</i>
</span>
</div>
</ng-form>
The CSS I've used is:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.step-number{
border:1px solid;
display:inline-block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
border-radius:4px;
}
.input-xs {
font-size: 1em;
text-align: center;
border:none;
line-height: 1em;
height:1.1em;
vertical-align: middle;
}
.step-number span{
display: inline;
height: 100%;
width: 18px;
margin-bottom: 1px;
margin-top: 1px;
text-align: center;
}
.step-number span:first-child{
margin-left: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.step-number span:last-child{
margin-right: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.input-xs:focus{
outline:none;
}
.step-number:focus{
outline:none;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.fake-focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.step-date{
display: inline-block;
}
The whole project is available at github.
There is also a working demo and it's available for install through $ bower install stepper
I would greatly appreciate a helping hand from anybody finding this useful. All contributors are welcome to make this small directive look good. This means: input centred vertically, buttons centred vertically, a 1px border padding inside the element, cross-browser stable and zoom stable.
I've added these CSS rules at the span or the button element that has the + sign:
padding: 1px;
position: relative;
top: -1px;
It seems to be working just fine (I've also tried resizing the viewport - tested with Firefox).
Here is a screenshot of the outcome (remember, only applied to the plus sign)
You could add the above rules to a class .stepper-buttons and add it to the span or the button element (tested with both).
Let me know if this worked for you.
I am using pie.htc to allow me to have radius corners and drop shadows on my website in old versions of IE.
The trouble is it seems to be making IE run very very slowly.
Here's an example of my code... can anyone see how I can improve this?
div.myDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
}
I used CSS3Pie a lot in projects, because I was forced to make the sites exactly look alike which of course is nonsense in for a technician, but not a sales guy.
Actually, using any kind of .htc files is very slow because pie needs to parse these rules and create according VML-Elements to emulate the according css3-behaviour. If you have bigger projects you will have no choice other than:
Completely omitting CSS3-features for IE8 (and convince your salesguy) <- my favorite option
Omitting pie and using IE filters wherever possible
using a more lightweight framework with lesser support but faster processing, because PIE is (because it has such a superb support) quite bloated and thus rather slow
Using positions like Razor adviced does not really fix the speed issue and prefixing with -ms might give you serious trouble in IE9 trying to use both, css3pie and the prefixed css3-property.
try this for a change
div.myDiv
{
border-radius: 5px;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
behavior: url(/PIE.htc);
position:relative;
}
PIE.htc file loads asynchronously along with DOM when it is ready. Setting the position:relative can certainly give you an edge. i prefix -ms- in code snippet which helps to detect IE. it worked for me. i used latest PIE.htc file.
i was wondering if it is possible to use a hover with a nth-child like so
#gallery a img:hover {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
From this up here to some thing like this down here, only its not working
#gallery a img:hover:nth-child(1n+4) {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
#gallery a:hover:nth-child(1n+4)
Will work correctly but style the A tags instead of the IMG inside.
When you have markup like...
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
You cannot select the inner IMG and then try to apply an nth-child on it because there is only 1 IMG inside of the A tag.
Refer to the JSFIDDLE I created http://jsfiddle.net/fXS93/2/
Any change in how the IMG markup is wrapped will reset the CSS matching and NTH-CHILD calculation. This applies even if you are matching on a CLASS that all of the IMG share.
This is true for the latest FF, Chrome, and IE9.
in which browser did you tried this?
and on how many elements did you run the formula?
it will run from the third element in your parent element AND
you should add :hover
after the nth-child like this::nth-child(1n+4):hover
although it wont work in IE8 or earlier
EDIT:
i tried and the order did not affect the result you can put :hover before the :nthchild()
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}