Posts Tagged ‘CSS’

January 27th, 2012

Grid for aligning HTML elements

When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.

With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.

This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.

It is open source and available with an example on GitHub Grid Layout Overlay

Add the div to the area you want the grid to overlay.

Select All
1

<div id="grid"></div>

Drop the image in an accessible path.

Add the CSS

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#grid {
display: block;
position: absolute;
background: url('../img/100grid.png') repeat;
z-index: 10000;
width: 100%;
height: 100%;
min-height: 800px;
margin: 0;
padding: 0;
top: -12px; /* Adjust the Vertical position */
left: -6px; /* Adjust the Horizontal position */
opacity: .7; /* Adjust the opacity */
}

Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)

Then you should end up with a grid over your layout like this simple example.

I will be posting YouTube entries on this also.

Tags:


Posted in:

CSS

Comments:

No Comments »

August 11th, 2010

Easy Mobile Site with CSS3

CSS3 brings sites to mobile comfortably.

One requirement that is becoming hugely popular in web development is mobile device support.

One of the biggest issues with sites on mobiles is bandwidth.
A lot of it is contributed to the sites style alone.
This can be resolved with CSS3, at least on Android and iPhone.
I tested them myself.
Of course, I doubt Windows Mobile will handle it as IE does not. Maybe the upcoming IE9 will.

On with the code!

To make a site have an alternate theme for the above mentioned phones and maybe others is simple.
No JavaScript required.

Simply make a CSS stylesheet, name it anything, eg. mobile.css
Now in this file you overwrite the widths of the site (main box model blocks).
Making them a max-width of less than 480px.
Make sure you count your padding in there.

In the example I am going to show, I also increase the navigation size for ease on touch screen devices.
I also increase the overall font size. This is easy if you use a Typographic scale like I do. (You will see this also)

Now link in the mobile styesheet with the CSS media=”" property.
In CSS3 you can now use it like this

Select All
1

media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"

The first part only screen and (max-width: 480px) works nicely so we can test it on our desktops in FireFox, Safari, Chrome… Not IE..
The second part , only screen and (max-device-width: 480px) is a device detection eg.(mobile device).

So this complete line linking to the mobile.css will look like this

Select All
1

<link href="mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css">

Add this after you normal CSS linked file so it overwrites it when used.

One other thing we need is a meta tag required for some mini browsers.
The tag looks like this

Select All
1

<meta name="viewport" content="width=device-width" />

Add this line to the top of your sites header by the other meta tags before your CSS links.

Here is a working sample
CSS3 Mobile Device Site Sample
View it in your browser and reduce the browser width to 480px or less and you will see it change.
Or view it in an iPhone or Android phone.

I also included links in this sample to the source code so you can see the code in full.
Here they are again
Index Source
StyleSheet
Mobile Stylesheet

Conclusion:

With simple options like this you can make a lightweight version of any site for these devices.
Simple overwriting backgrounds, CSS image links, etc…..

Nice simple solution with no extra URL re-writes or JavaScripts for detection…
We can only hope this will be fully adopted to all Mobile HTML browsers, and soon.

Tags:


Posted in:

CSS

Comments:

No Comments »

May 19th, 2010

Custom Web Fonts got Easier

Custom fonts for styling just got easier with Googles release of the new Font API

It has been a bit of a pain including custom fonts in styling do to file size, bandwidth, page load etc…
With Google releasing this new API Google Font Directory it will make things a whole lot easier for us developers and also for the users viewing the sites.

As we know including external files from huge redundant places like Google offers the best browser caching around.
The reason is that the more sites that include these files in their site, the better the chance is the the users visiting already have the file cached in their browsers.

So without further ado, here is how you can use the Google custom fonts.
There are 2 ways you can use this API, the first being more pointed towards using just one font,

You include the API style link in your html head section like this

Select All
1
2
3
4

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<style type="text/css">
	h3 { font-family: 'Cardo', arial, serif; }
</style>

Now any place a h3 tag is used the font will be Cardo.
Another option is to import it directly into your CSS file at the top

Select All
1

@import url(http://fonts.googleapis.com/css?family=Cardo);

Now you can use the Cardo font anywhere in your CSS file you wish.

There is also a JavaScript version to include multiple fonts.
It looks like this,

Select All
1
2
3
4
5
6
7
8

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>

The CSS uses a class so that if it is not activated via the JavaScript, it will not even be included to the element.
The CSS looks like this

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style type="text/css">
.wf-inactive p {
        font-family: serif;
      }
.wf-active p {
        font-family: 'Tangerine', serif;
	 font-weight: bold;
	 font-size: 26px
      }
.wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
.wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
</style>

Here is a complete working example

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Custom Fonts</title>
<!-- Custom fonts http://code.google.com/webfonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type="text/css">
	h3 { font-family: 'Cardo', arial, serif; }
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
		font-weight: bold;
		font-size: 26px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
<body>
    <h1>This is using Cantarell</h1>
	<h3>Something with Cardo</h3>
    <p>This is using Tangerine!</p>
</body>
 
</html>

With these new font options developers like me get an even bigger playground!

Tags:


Posted in:

CSS

Comments:

No Comments »

May 4th, 2010

CSS Arrows and Diamonds

Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.
[clear]

Now this is not production code here, just an example.
Here is the rough CSS

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.arrow-block {
	float:	left;
	display: block;
	position: relative;
	width: 220px;
	height: auto;
	margin: 20px;
}
.horizontal {
	float: left;
	display: block;
	width: 200px;
	height: 15px;
	background: #333;
}
.arrow-left {
	float:	left;
	border-right: 20px solid #333;
	border-top:	20px solid transparent;
	border-bottom: 20px solid transparent;
	width: 0px;
	margin: -12px 0 0 0;
}

And this is the HTML

Select All
1
2
3

<div class="arrow-block">
	<div class="arrow-left"></div><div class="horizontal"></div>
</div>

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!

Tags:


Posted in:

CSS

Comments:

No Comments »

April 9th, 2010

Styling Lists with Images

This is a web developer insider trick.
As most people know, when you add the property list-image to style a list you have almost no control over where the image lands.
This is particularly ugly when comparing different browsers or when your image sits to high, low or almost on the text of your list.

I’m going to show you how to style a list item with a tick and keep full control over where the image lands.
First thing is to through out the list-style-image property as it is useless.
Use a normal background property.

Select All
1
2
3
4
5
6

ul.tick li {
	list-style:			none;
	background:		url('images/tick.png') no-repeat 0 1px;
	padding:			0 0 0 24px;
	line-height:		1.4em;
}

Doing this you can not only use the background positioning values but also the padding property.
For this tick I am pushing it down 1px with the top position property and adjusting the distance between the text and the icon with 24px of left padding.

Using these properties for list style images instead of the actual list-style property gives you full control.

  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something

Tags:


Posted in:

CSS

Comments:

No Comments »