Feb 2014 14

Every now and then you may come across a design that calls for double borders around an element. The “border” CSS property only gives you one border. Instead of wrapping your element in a div and applying another “border” property to it to give the effect of two borders, you can use the “box-shadow” CSS property and setting the thickness of one border to be larger than the other. Copy and paste the code below and adjust accordingly.

box-shadow: 0 0 0 1px #ededed, 0 0 0 2px #dfdfdf;

Note: The “box-shadow” property doesn’t work in IE 8.

 

Share
Feb 2014 11

There are two jokes in the web design community. The first one goes like this:

 A web designer walks into a bar and immediately leaves in disgust upon noticing all of the tables.

And here is the second.

HTML Email.

Basically, HTML emails are a b@#4ch!  If you want your fonts to look as you’d expect in your HTML emails, use one of the following.

email-safe-fonts

Share
Feb 2014 07

Sometimes you may need a layout that calls for fixed width content but a fluid background. You can accomplish this with multiple divs or, if you use the calc function, you can just use one div or element, as exemplified below.

<div class="section">

This content is 200 pixels wide and wraps after it reaches 200 pixels.

</div>
div.section {
width: 200px;
padding: 0 calc(50% - 100px);
background-color: blue;
color: white;
}

See the demo at jsfiddle.

Share
Feb 2014 06

Next time you need to send a message, don’t just write text. Include one of many hilarious GIFs from replygif.net to help get your message across :)

Share
Jan 2014 27

When you want to make rounded corners on divs using CSS, all you have to do is specify a CSS border-radius style to the div, e.g.

<div style="border-radius: 10px;">Something</div>

However, if you want this to work on a table element, you need to add overflow: hidden, i.e.

<table style="border-radius: 10px; overflow: hidden;">
<tbody>
<tr>
<td>Something</td>
</tr>
</tbody>
</table>
Something
Share
Page 3 of 6612345102030...Last »