5 Sexy CSS Tricks You Need In Your Life

Everyone needs a helping hand from time to time.

Whether you’re an experienced developer or you’re learning the tricks of the trade, we are here to offer a few handy tips to improve your work and save you time.

Enjoy:

Quit truncating strings with PHP, use CSS3 instead

The beauty of using CSS to truncate strings is that you can use all the normal CSS tricks to animate and customise the behaviour of your truncation. For example, you can remove the truncation on hover and at different responsive breakpoints.

.truncate {
 width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

Responsive aspect ratios

We’ve been using these a lot recently (check out our home page) and they’re a great way to make responsive squares.

Just make a div with a percentage width and give it a percentage padding bottom value. Whatever value you give it will be relative to the width of your div. So, for example, to make a perfect square that is 50% of its container width just do the following:

.square {
position: relative;
 width: 50%;
 padding-bottom: 50%;
 }

Note: Remember that anything you put inside this box will affect its size so add an internal container and give it a position of absolute.

CSS Triangles

Another family favourite here at onTap.
You can make triangles really easily with CSS and save loading unnecessary images. Try the below on any block element to get an upwards pointing black triangle:

.up_arrow {
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 5px solid #000;
 }

Just change the border sizes to increase/decrease the size of your triangle.

SASS mixins for transitions (or anything)

Tired of writing the 3 or 4 lines of CSS it takes to add transitions to elements and then having to specify the timing and property of the animation? If you’re using SASS you can save hours of time by using the following simple mixin:

@mixin transition($transition...) {
 $prefixes: ("-webkit-", "" );
 @each $prefix in $prefixes {
 #{$prefix}transition: $transition;
 }
 }

You can now write this in your .scss to generate your perfect mixin code:

@include transition(all, 0.4s);

Stop iPhones messing with your text size

This is a strange one and incredibly frustrating. Sometime the iPhone will enlarge text size to help readers with legibility, however, it can be unexpected and cause unwanted changes to your layouts. To prevent this from happening just include this CSS snippet on the body tag or use it selectively;

-webkit-text-size-adjust: none;