| Absolute position (0, 0, 0, 0) |
|
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
|
position, absolute, 0 |
| Absolute position (10, 10, 10, 10) |
|
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
|
position, absolute, 10 |
| Vertical align |
|
display: inline-block;
vertical-align: middle;
|
align, vertical |
| Wall for vertical alignment |
|
.wall
{
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
|
align, vertical |
| List style type none |
|
list-style-type: none;
|
list, style, type |
| List with no style type |
|
ul
{
margin: 0px;
padding: 0px;
}
li
{
list-style-type: none;
text-align: left;
margin: 0px;
}
|
list |
| Inline list |
|
ul
{
margin: 0px;
padding: 0px;
text-align: left;
white-space: nowrap;
}
li
{
list-style-type: none;
margin: 0px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
|
list |
| Table |
|
table
{
border-collapse: collapse;
}
table th,
table td
{
padding: 10px
border: 1px solid rgb(0, 0, 0);
}
|
table |
| White space, no wrap |
|
white-space: nowrap;
|
white-space, white space, no wrap, nowrap |
| Remove webkit appearence |
|
-webkit-appearance: none;
|
webkit, remove |
| Custom button |
|
input[type="button"]
{
height: 30px;
min-width: 100px;
margin: 5px;
-webkit-appearance: none;
font-size: 0.9rem;
color: rgb(0, 0, 0);
font-weight: bold;
background-color: rgb(128, 128, 128);
background-image: none;
border: solid rgb(128, 128, 128) 2px;
border-radius: 5px;
}
|
input, button |
| Custom disabled button |
|
input[type="button"][disabled="true"]
{
background-color: rgb(128, 128, 128);
border: solid rgb(128, 128, 128) 2px;
}
|
input, button |
| Box shadow |
|
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.9);
|
box, shadow |
| Box shadow inset |
|
box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.9) inset;
|
box, shadow, inset |
| Gradient to right |
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
|
gradient, background |
| Gradient to bottom |
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
|
gradient, background |
| Mask gradient |
|
-webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 40px);
|
gradient, mask |
| Backdrop blur filter |
|
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
|
filter, blur, backdrop |
| Saturation filter |
|
filter: saturate(0.0);
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-o-filter: saturate(0.0);
|
filter, stauration, saturate |