All Posts in CSS Tricks

Quick way to highlight images without alt tags

Quick way to highlight all images without/with empty alt tags via CSS: /* No alt tag */ img:not([alt]){ outline: 1px solid red !important; } /* Empty alt tag */ img[alt=""]{…

Spinning Newspaper CSS3 Animation

.spinning{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animat…

How to centre absolutely positioned elements on screen

If you want to place absolutely positioned elements in the middle of the screen just do the following: #some_div{ width: 150px; height: 100px; position: absolute; top: 50%; …

How to create the dotted line effect

Many people wonder how to create a dotted line effect that automatically adjusts its length based on the content around it. Click to enlarge The HTML: <div class="food_menu"> &…

Image rollovers in CSS

Create an anchor tag: <a title="Home" href="index.php">Home</a> Next, turn it into a block (with the same dimensions as the background image) and position the text offscreen: a[ti…