Skip to content

CSS.md

Latest commit

 

History

History
197 lines (155 loc) · 4.71 KB

CSS.md

File metadata and controls

197 lines (155 loc) · 4.71 KB

Tricks

Fix tag being bigger than its content

I realized while trying to create a menu using SVG elements inside an a tag that this had a bit more of height that the svg. It turned out that to fix it I had to set the content of <a> to display: flex.

Center an image in the line:

 IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

source

Make any DOM element to propagate focus and blur event

When you have a DOM element that doesn't propagates the focus and blur events and you want it to do so, you can add to it the tabindex attribute (with a tabindex of -1 will do the trick)

Center an object exactly in the middle of the screen:

.center {
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }

explanation post

Box Shadow css trick

article

Col same size with bootstrap

Add this class to you css

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

}

source

Position element in the lower right corner

.box {
    position:relative;

}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;

}

The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box's position to relative, .bet_time positions its right edge to the right edge of .box and its bottom edge to the bottom edge of .box

source

Sticky footer

How to kept the footer at the bottom even though your content doesn't fill the whole height of the display

source

Sticky footer with flexbox

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

source

<body>
    <header></header>
    <article></article>
    <footer></footer>
</body>
body {
    height:100%;
}

header {
    height: 50px;
}

footer{
    height: 50px;
}

article{
    height:100%;
   /* The header and footer height respectively */ 
    margin-bottom: -50px;
    margin-top: -50px;
}

This is a really simple implementation. Do not style your web by targeting tags with your css :P

##Align form elements

    <form class="user-form">
        <div class="field">
            <label for="firstname">First Name:</label>
            <input name="firstname" type="text" size="50" autofocus />
        </div>
        <div class="field">
            <label for="lastname">Last Name:</label>
            <input type="text" name="lastname" size="50" />
        </div>
        <div class="field">
            <label for="birthdate">Birth Date:</label>
            <input type="date" name="bdate" size="50" />
        </div>
    <form>

    .user-form { padding:20px;  }

    .user-form .field { padding: 4px; margin:1px; background: #eee;  }

    .user-form .field label { display:inline-block; width:120px; margin-left:5px;  }

    .user-form .field input { display:inline-block;  }

Aligning HTML5 form elements

Div element size doesn't increase if it has floated elements

StackOverflow ask

The solution is adding a clear: both; div after the div with floated elements

Importance rules

The CSS importance is at follows

attributes < stylesheet < inline css

Select All elements but it's last child

p:not(:last-child){
  <!-- Some rules here -->
}

This code will select all the p tags but the ones that are the last child of its parent.

Flex items be of equal size

I had an issue with flexbox which was not growing to items equally. The problem was flex-basis which is the size of the item provious application of flex-grow. The way of fixin this was:

.flexbox-item{
    flex-grow: 1;
    flex-basis: 0;
}

source