Creating a stitched border

Use this snippetĀ  to get a stitched-like border on your elements.

<div>Today it's a beautiful day for styling.</div>

 

.stitched {
  padding: 15px 10px;
  margin: 10px;
  background: #3AB551;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #38A64C;
  -webkit-box-shadow: 0 0 0 4px #38A64C;
  box-shadow: 0 0 0 4px #38A64C;
  text-shadow: -1px -1px #2D853D;
  font-weight: normal;
}

Convert px to em

When you work with responsive designs, and not only then, you need to convert various pixel sizes to em. A very useful tool is PXtoEM.com that converts px to em, or em to px, based on a base pixel size.

The website has three sections:

1. Convert

Has tables with conversion based on 16px body size and your custom body size, and a calculator for custom conversions.

2. Grab CSS

Generates normalize.css customazied for you body size that you selected on previous section.

3. Learn

This section tells you what px, em, pt and % is, regarding typography.

Center absolute positioned elements

Sometimes you need to center an absolute positioned element, but margin: 0 auto doesn’t work. In the following example I will show you a way to center that kind of elements.

Let’s say that the HTML looks like this:

<div class="outer">
  <div class="inner"></div>
</div>

..and the CSS looks like this (for now):

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  background: blue;
  margin: 100px auto;
}
.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
}

For now, we have the following display on the browser (the yellow div is positioned absolute):

To center the yellow div we need the following code added:

.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
  /* this is the new code */
  left: 0;
  right: 0;
  margin: 0 auto;
}

Now, the yellow div will look like this:

Further more, if you want it vertically align, use this:

.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
  left: 0;
  right: 0;
  /* this is the new code */
  margin: auto;
  top: 0;
  bottom: 0;
}

The final code will display the following: