November 21, 2014

Useful CSS Hacks and Shortcuts

Code

by Andy Axton


CSS is not the most intuitive programming language. There’s often many ways to accomplish the same thing and other times something may seem like an easy task can be very difficult. I conquered CSS long ago but for those still struggling with things, here’s a list of some CSS hacks, tricks and shortcuts that I find myself using in our projects.

 

 

1. HTML Containers with a constant aspect-ratio

This one is super awesome. Inner element will scale to fit inside of the outer element. Change the padding-bottom to adjust the ratio.

.outer {
  width: 100%;
  position: relative;
  padding-bottom: 20%;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

 

2. Pure CSS triangles

Works great as a psuedo element for tooltips.

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid #0099ff;
  border-left: 100px dashed transparent;
  border-right: 100px dashed transparent;
  border-bottom: 0;
  display: block;
  overflow: hidden;
}

 

3. Center an element vertically and horizontally

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

 

4. use calc() to mix and calculate different units

Element size will still scale as a percentage but will subtract 40 pixels

width: calc(100% - 40px);

 

5. use viewport units, they rock!

This element’s height and width will scale with the browser’s window width and will stay in a 1:1 ratio. Also works for height as vh.

.el {
  width: 50vw;
  height: 50vw;
}

 

6. Disable mouse events on an element

Great for tooltips and overlays.

pointer-events: none;

 

7. use an elements attr value in css

Useful for tooltips, works for the content property in psuedo elements. Will use the elements title attribute and insert it into the psuedo element. Great for data attributes as well.

.el:after {
  content: attr(title);
}

 

8. Use content attribute with media queries to find out what media queries are active in your client-side javascript code

Doesn’t change the size of an element, useful as a hover effect. You can also use this to create multiple borders on an element.

@media (max-width:400px) {
  body {
    content: 'mobile';
  }
}
$('body').css('content') // will return 'mobile' if that media query is active

 

9. Remove mobile tap highlight color

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

 

10. Remove safari text input shadows

-webkit-appearance: none;

 

11. quickest one div css loading icon

.loading {
  border-bottom: 6px solid rgba(0, 0, 0, .1);
  border-left: 6px solid rgba(0, 0, 0, .1);
  border-right: 6px solid rgba(0, 0, 0, .1);
  border-top: 6px solid rgba(0, 0, 0, .4);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  animation: rot .6s infinite linear;
}
@keyframes rot {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}

 

12. Set position property of parent element to bind child to parent bounding box

Child will align to the parent’s bottom left corner.

.parent {
  position: relative;
}
.child {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

 

13. Select every 4th child

Works great for aligning grid elements, remove margin or padding. Change 4n to the interval of elements.

.child:nth-child(4n+1){
  margin-right: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>