You are viewing all posts tagged under 'CSS' - Alternatively... 


23
Dec
 
  #157
tags: Christmas, Projects, CSS, Web Design, Recipes
[posted @ 20:46 on Wed Dec 23, 2009]
 
I'm pretty sure a CSS project is what most of you wanted for Christmas, right? Well, maybe not, but that's what you're getting from me. I've been meaning to give CSS a real workout so I finally got round to making a website that fully uses CSS for layout as well as easy re-styles.

I'd been asked a few times recently for some recipes I'd cooked up, and I have to rely on the original html file I created years ago that's no longer online. So, I thought I could spruce up this page and make a CSS site for my recipes:


A 'snazzy overview' of the site. © Beats! Design (2009)

The site was to rely on:

- Divs defined for every separate part of the page.
- A variety of CSS styles to give variety and print options.
- PNGs with invisibility, so they suit every style.
- Backgrounds with opacity for the recipe title.
- A stylised form menu to suit each page.
- CSS corrections for major browsers.


Various design elements across the site. © Beats! Design (2009)

Although some of these requirements were just for design purposes, the CSS coding was designed to allow major re-styles of the page just using a new CSS file. This would give each page a print version (few graphics, black and white) and two design versions (one white on black, one black on white).

Anyway, the best thing to do is check it out. I've only got 3 recipes up for now (I'll add some others as time passes) but do check out the Christmas recipe as it's one of my favourites and then it makes this post seasonal :)


The Christmas recipe in all its glory. © Beats! Design (2009)

This site (and plenty of others) shows that CSS can be used very effectively to re-design a page with the same HTML content. I don't think it's that important to give users many re-styled versions of a page, but a simple print version is one way to aid the user. It also shows a sleek design can be achieved without relying too heavily on graphics.

Beats! Design - Recipes
Recipe: Christmas Pudding Sauce
 


 
 

1
Aug
 
  #51
tags: Facebook, Tags, CSS, Scripting, Scripts
[posted @ 08:10 on Fri Aug 1, 2008]
 

Tagging images is a practice seen more and more across the internet as social networking sites have allowed vast networks of people to share media content. Tagging via social networking usually centres around ideentifying individuals, but other uses are cropping up all the time. On Flickr, for example, landscape features and photographic styles are often highlighted using tags and image maps, sometimes even adding narrative to the photo itself.

So you may be wondering, how hard is it for me to make my own tags / image maps? Well, the answer is: not very hard at all - it's just simple CSS. Below is an example showing a photo from the coast of Argyll, with 3 regions 'tagged'. I've added a bit more than CSS to this example by making 3 overlay images (in black and white with a label) that appear on a mouseover event. These images are simply included in the CSS as a hover event.

First up, here is a working example of tags and tag boxes - with mouseover events:

Now, I'm sure you'd like to know how it's done, so let's get cracking! I'll show the code for one box, rather than repeating it for all three, but the values to change are pretty obvious, just make sure you rename the CSS class (say from, #tag1 to #tag2) throughout the document.

First up, define your image in your CSS - the image will be defined as a background for a div element. Remember to change the file name and dimensions when using this example yourself: 

 #image {
  position: absolute;
  width : 500px;
  height: 333px;
  background: url(filename.jpg) top left no-repeat;
 }
Next up, you need to define the tag box itself, in this case adding a hover event as well: 

 #tag1 {
  position: absolute;
  width : 85px;
  height: 180px;
  left: 93px;
  top: 131px;
  border: 1px dotted #FFFCAB;
 }

 #tag1:hover {
  width : 85px;
  height: 180px;
  left: 93px;
  top: 131px;
  border: 1px dotted #FFFFFF;
  background: url(imagemap_1.jpg) top left no-repeat;
  z-index: 100;
 }
All the above code should be placed in a CSS declaration in the <head> of your document. The final step is to place some code in the <body> of your document that will display the image and tags: 

 <div style="display: none;"><img alt="" src=
   "mouseover_imagename.jpg" /></div>

 <div id="image"><a id="tag1" href="#" title="title">
 </a></div>
And there we have it, you can now make your own tag boxes on top of an image - bellissimo!

 


 
 

18
Jun
 
  #39
tags: HTML, CSS, Scripts, Web Design, Scripting
[posted @ 10:59 on Wed Jun 18, 2008]
 
In order to highlight hyperlinks within blog posts and to distinguish them from other links on the blog (tags, topics, blog title etc), I've made inline links blink with an animated dotted line below them.

There are two parts to this method. You need to set up the CSS for the blinking links and distinguish these links from all other links on the page (especially important when using general a:link type CSS).

So, firstly you may well have set up a CSS class that covers the text where the links will be (in this case, all hyperlinks within a blog post message). In this example, we're calling the class 'blinks': 


 .blinks {font-family: Tahoma; color: #DDDDDD; 
          font-size: 12px;}

A complication will come if you are using general hyperlink style code within your CSS, such as this: 


 a:link {text-decoration:none; color:#B99D73}
 a:visited {text-decoration:none; color:#abb7ba}
 a:hover {text-decoration:underline; font-weight:bold;}
 a:active {text-decoration:underline; font-weight:bold;}

In order to override the general hyperlink styles, you have to set up hyperlink styles specific to your class. This is also where you add the code to make the links blink. To do this, I'm using a tiny animated GIF and setting its location underneath the link text: 


 .blinks a:link {
     font-family: Tahoma; 
     color: #DDDDDD; 
     background: url(Images/line.gif) repeat-x bottom left;
  }

Feel free to use this image / code on your own website - it's good to share!

Download the flashing line image

All you need to make sure now is that the links you want to blink are within the class you have defined it in. This class may cover all the text of the message, or just the link itself, as in the following example: 


 <span class="blinks">
 <a href="../blog/Images/line.gif">link text</a>
 </span>

Enjoy!
 

15
Feb
 
  #23
tags: CSS, Scripting, Scripts, HTML
[posted @ 09:27 on Fri Feb 15, 2008]
 
As shown in previous posts for this blog, code can be displayed in a seperate box (using a different font, such as a mono-spaced font) to allow users to easily recognise and understand it when published in HTML.

This is a very simple example showing a small piece of code and how this technique can work. As the technique uses code itself, the following examples will show how it can be done as well as the result - a 2 in 1 bonus!

First, set up the CSS for the "PRE" style class to be put into the HEAD section of the HTML page. This is the class you will use for the code box and defines all its style properties. As can be seen, this sets up a light orange box, with darker orange dotted border and a suitable size mono text: 


 <style type="text/css">
  PRE.listing {
   margin-left: 10px;
   margin-right: 10px;
   border: solid 2px #e69834;
   border-style: dotted;
   background-color: #EADFD0;
   color: #663300;
   width: 480px;
   font: Verdana;
   }
 </style>

Now the CSS is set up, simple wrap any text in the BODY section of the HTML page with the PRE class, in this case we have called it 'listing': 


 <pre class=listing>
  YOUR CODE HERE
 </pre>

Then this text will be shown in a code box. Be careful using ASCII characters in HTML, these will have to be converted to their relevant formats, see this link for help: ASCII Characters in HTML
 

25
Nov
 
  #06
tags: CSS, Scripting, Scripts, Web Design
[posted @ 10:53 on Sun Nov 25, 2007]
 
If you create a basic HTML page, then you will find the automatic margins are places around the contents of the document body.

If you start a table or image from the first line of HTML code, there will be a small gap displayed between this image and the top of the page as margins are automatically added by most browsers.

However, if you look at the top of this webpage, you will see that the graphics start from the very first line of the page. This is evident where the strings holding up the trumpet meet the top of the page.

This applies to the left, right and bottom margins as well, although this is less obvious here. The code is really simple to get rid of margins in all main browsers - simply copy and paste this code into the <head> section of your document. 


 <style type="text/css">
   v:* {behavior:url(#default#VML);}
   html, body {width: 100%; height: 100%}
   body {margin-top: 0px; margin-right: 0px;
         margin-left: 0px; margin-bottom: 0px}
 </style>