Online Portfolio and Resource Blog

I have redesigned my company website to look super minimalistic. Have a look at http://www.darklabproductions.com

Here is fast and effective way of embedding fonts into your webpage without having to use graphical images.

First we must declare the font:

@font-face { font-family: amputa; src: url('amputa.ttf'); }
@font-face { font-family: amputa;
font-weight: bold; src: url('amputa.ttf'); }

Now we are able to call it using “font-family”

h1 { font-family: amputa, sans-serif; }

View Results

Download the font used in this example:
Amputa Bangiz Standard TTF

In order to vertically center a block level element, we need to give it an absolute position. This will detach the element from its surroundings and will allow us to give it a specific position related to the browser window.

By offsetting the div by 50% from the top and left, we are positioning upper-left corner to the center of the page. The last step is to move the div to the left and top by using half of its dimensions in a negative margin.

For example, if the width of the element is 960px, then set the left margin to -480px. If the height of the element is 600px, then set the top margin to -300px.

HTML Structure

<div id="main">
  <div id="header"> Header </div>
  <div id="content"> content </div>
</div>

CSS

body {
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	width: 960px;
	height: 400px;
	background: #f1f1f1;
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -480px;
}
#header {
	background: #000;
	padding: 10px;
	color: #fff;
}
#content {
	padding: 10px;
}

Click here for the final result

Related Article: CSS: Center a Div Using Absolute Positioning

Here is a simple jQuery tutorial that I think many beginners will find useful. I am going to fade in a box while it drops down. This effect seems very easy to do in flash, but to some, it can be a very difficult task to achieve in jQuery. I will also add a subtle bouncing effect just for fun.

Final Results
(more…)

Many designers have come across this issue several times in their career. How do you make your div fill up the entire height of your browser window? The answer is very simple, but not so obvious.

HTML

<div id="main">
     <div class="content">
                A div thats height is %100 of the screen!
     </div>
</div>

CSS

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	background: #f1f1f1;
	width: 960px;
	margin: auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 10px 0 10px;
	min-height: 100%;
}
.content {
	padding-top: 10px;
}

Click here for the result