Code With Design » CSS

Remove images and increase load times with CSS3

Caleb Jonasson — Wed, 05 May 2010 16:30:49 +0000

Recently when working on a clients site I found that there were a lot of images being used when a quick little CSS fix could have done the trick. The basic outline of the site involved a few transparencies and a lot of drop shadows. The drop shadows were placed on the container/wrap and the text had drop shadows that had been all done in Photoshop. (Some of the drop shadows were not consistent.)

After looking at the site I told the client that within three minutes I could remove all of the images being for text, drop shadows and opacity allowing his site to load faster.

The answer was what I had expected and the following code was quickly being thrown into the site.

The Code

For the drop shadows on divs:

.container{
     width:1080px;
     margin:0 auto;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -moz-box-shadow: 0 2px 5px #666;
     -webkit-box-shadow: 0 2px 5px #666;
}

For the drop shadows on text:

h3{
	font-family: Times;
	letter-spacing: 1px;
	text-shadow: 2px 2px 2px #000;
}

For the opacity:

.sidebar ul{
	list-style-type:none;
	opacity: 0.9;
	width: 180px;
}

Get, install, and use light box

Caleb Jonasson — Sat, 03 Apr 2010 02:38:17 +0000

First and foremost, if you do not know what light box is, then I can only assume that you have been living in the dark ages. A lot of sites incorporate this technique to view full sized photos inside of the browser.

Secondly I am going to have to add that this article is about implementing light box. Not creating a light box like plug in.

The first thing that is required for us is to get light box. Where do you get light box. Well the Internet probably has some light box. lets go there.

This is the site that has what we need. If you would like to click that link, upload to the server you will be working on we can get started.

When working with lightbox you will need to include four lines of code into your header. Once added, your header will look like this.

The next part to using this script requires us to link to an image using it. This can be done by using a rel path.

1	First Image

Note: There are some things that can go wrong when working with lightbox. The first thing that you need to check is that everything is being properly linked to. There are files from the css that can cause lightbox to not function properly.

Also, if you do not see an image or lightbox appear then you may have to check the JavaScript within the body tag. You may have to modify the on load.

No related posts.

Creating a top button

Caleb Jonasson — Wed, 30 Dec 2009 08:30:23 +0000

Introduction

Buttons that stick to the sides of the browser are becoming more and more popular. Most of it started with a companies feedback button which turned into people using them for their own convenience. In this article I am going to go over the CSS code for making it stick to the side.

The first thing that is required is an anchor. We can add this to the top of the page and it will be located just below the first div (or above your header) You can really locate this where ever you would like your readers eyes to be. Some people prefer the title of the first blog post.)

Once the code has been placed it should look like this:

1
2
3

Anchors

Now that we have placed our anchor there is something you need to know if unfamiliar. In order to link to an anchor all you need to do is add a ‘name’ and an ‘id.’ When linking to an anchor you will be required to have an ‘href’ like so:

Top

Notice how the ‘href’ is simple a pound sign followed by the name of the anchor. If you would like a contact button the you can do something similar to the following anchor:

Contact

Depending on where the anchor for contact is the user can be linked to a page and moved directly to the contact form. This just allows you to skip information and the only reason this is used as an example is because I wanted you to know exactly how you can use anchors across page.

Styling the page

Now that we have our two anchors we will get into the portion of styling that will make this button stick to the side. The first thing we are going to be doing is enclosing the link in a div. The results of this will look as such:

Top

The placement of this code is completely irrelevant since we will be adding a position property to it. I threw it directly under my anchor to keep it all together if changes are eventually needed.

Now we need to begin the actual styling of the div. This will require two separate styling, one for the div itself and the other will be for the ‘

’ tag.

The first thing that we will be adding to our style will be the positioning and size of the box. As noted earlier the position and how the container acts with the sides of the browser is key. Because it is important we will start by adding the following lines of code to the div.

.sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
bottom:40px;
overflow:hidden;
}

As we go through the code you will notice that everything is standard. The position is fixed so even though the div is outside of the container it is still properly displayed on the screen. The left property forces the box to the left side of the screen. The width and height are required properties. If the width was not set it would expand across the screen and overlap the content. The height it required so the box does not collapse on the contents that are within. The final important property is the ‘bottom’ style, this will force the box to position itself a certain distance from the bottom of the browser. In our case it will be ’40px’ away.

The next important piece of code will change the h3 properties. When it comes down to it you can actually just add class to the link or throw it in a span but I chose to stick with ‘

’ because I had originally created it with the default h3 font style.

The code for the next chunk of CSS will look as follows:

.sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
}

Live demo

By going through the code we will notice that everything is font styling with an added little text rotation that works with IE. Now that we have most of the CSS and the HTML we can throw it all together and see how well it works out.

Below there will be a copy of the html used in this example along with the CSS. By clicking the image you can see a demo version of this page in action. Simply scroll down and click the fixed div on the left.

The CSS

.sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
}
.sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
padding:0px;
bottom:40px;
background: #444;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
overflow:hidden;
 
}

The HTML

1
2
3

Top

That is all, you are done.

Modifying next and previous posts

Caleb Jonasson — Sun, 27 Dec 2009 09:01:25 +0000

For most standard WordPress themes you are stuck with a boring text on the bottom of the screen with a float left and right property. This simple float looks boring however it is a simple solution for going from page to page.

The below image is what my personal blog used to have for a page navigation. This was to simple for what I wanted which made me want to change it to fit the rest of the page style. The solution was a work through of the CSS requiring a little CSS3 to make the borders rounded.

The final result looks as follows:

The first thing we are going to need to do is open up the style.css and the index.php inside of the theme you are intending to modify.

WordPress Root -> wp-content -> themes -> theme_name

Once you have opened up the two files, refer to the index.php and scroll down past the post loops to get to your code that checks for posts and allows you to go forward and backwards in post history. The code should look as follows:

As you can see there is a float class above which is in our css file as:

.float-right {

float:right;

}

We could change the float class to have a background and a border but that would change everything that uses the float class. In order to change this we are going to have to create new classes and change the index code. For this I will be changing the index code to “post_new_entries” and “post_old_entries.”

The “index.php” will now look something like this:

The final thing to do in this modification is to create the classes inside of the “style.css” file. The first thing that is required for the modification is for us to make them float to their designated sides just like the previous floats from before.

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
}

The rest of the code is fully customizable and up to you. There is always the option of adding hovers and link colors as well as paddings, backgrounds and borders. The code that is currently used for code with design is as follows:

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-left:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_old_entries a{
color:#666666;
}
.post_old_entries a:hover {
color:#333333;
}
.post_new_entries {
float:right;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-right:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_new_entries a {
color:#666666;
}
.post_new_entries a:hover {
color:#333333;
}

Best of luck with your WordPress modifications.

Making it that much better with CSS3

Caleb Jonasson — Tue, 22 Dec 2009 18:13:15 +0000

With the introduction of CSS3 we now have quite a few new CSS techniques at our disposal. To create a drop shadow we only need two lines of code for our technique to work on most of the popular browser. In order to get rounded corners we only need another two lines of code. This post is purely for reference purposes when using CSS3.

Rounding 4 corners

To round four corners you only need the following code. It is quite simple to get these to work and the information in the lines explain themselves when working with div tags.

-moz-border-radius:0px;
-webkit-border-radius:0px;

An example of this code in action would be as follows:

.post {

-moz-border-radius:5px;
-webkit-border-radius:5px;

}

The HTML:

hello

Rounding individual corners

To round individual corners you will need to use the following pairs of code. Much like rounding all corners this is pretty self explanatory.

-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;

-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;

-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;

-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;

An example of the individual corners would be as follows:

.topleft3 {

-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;

}

.topright5 {

-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;

}

The HTML:

hello there

Giving a div a drop shadow

This is pretty simple much the rest of the code. It allows you to give a box a drop shadow and a pretty effective one at that.

-webkit-box-shadow: 0 0 0 #000000;
-moz-box-shadow: 0 0 0 #000000;

Once again an example:

.shadow {

-webkit-box-shadow: 0 1px 5px #333;
-moz-box-shadow: 0 1px 5px #333;

}

The HTML:

Hello Shadow

Easyworks a new PHP front end framework

Caleb Jonasson — Tue, 22 Dec 2009 17:01:23 +0000

Creating a framework was on the list of things to do and so when getting off a 7.5 hour shift I started working on the base of it. A few hours later and 7 episodes of Boston Legal later I found myself uploading it and running out the door to work another 7.5 hours. The frame work is very basic, it does link to site information, class files, function but it is not a true framework yet.
The framework is still in its V1.0 stage but it does have potential to be something. The idea behind this framework is simple site construction through a header navigation. It is supporting a validating login and register system but it does not yet have the back end coding to make it all happen. To get a copy of it for yourself you can download it here.

Random Images Using A PHP Function: cj_random_image

Caleb Jonasson — Sun, 20 Dec 2009 07:46:53 +0000

Recently while working on a new blog layout for Code With Design I found myself finding that the code blocks look far to dull. My way of fixing this was to add an image but it didn’t end up helping anything, the image just looked repetitive and thus it is time to find some change and include a random image setup for each block.

WordPress uses a while loop to display the post information. I plan on taking advantage of this by adding a style to each of the div blocks. This will force the function to load for each div block and thus making the background images random for each individual block.

If the image was entered into the css then each block would look the same:

Function loads -> CSS is put into the style sheet -> style sheet loads into each element.

If the image was loaded on each div individually then the process will look something like this:

Function loads inside of div tag -> CSS is put into the looping div -> On each run the Function runs its random -> The random is placed out on each div.

The function loads a list of URL paths separated by comas. Then you are given the option of using placement properties and two of them so bottom right or top left is aloud. The final variable that this function uses is the repeat. This allows you to repeat the image by x, y, repeat or no-repeat.


//'/images/br_corner_cloud.png,/images/tr_corner_cloud.png','bottom','right','no-repeat'
//creating a function
function cj_random_image($image_array, $prop1, $prop2, $repeat) {
//image arrays
$image_array = explode(",",$image_array);
 
$image_max = count($image_array);
//random image count based on user input
$image_rando = mt_rand(1, $image_max) - 1;
 
//image
echo 'url('.$image_array[$image_rando].')'.$prop1.' '.$prop2.' '.$repeat;
}
//created by calebj
?>

The first thing the function does is takes what the user has placed into it then outputs it. The main inputs are the URL paths. These paths are counted and the count is used as the maximum on the random. This forces the mt_rand function to return the proper value which means that you can enter any amount of image URLs and the function will still work out.

In order to use this effectively you will need to place the function like so:

1
2
3

 cj_random_image('images/br_corner_cloud.png,images/cloud1.png','bottom','right','no-repeat'); ?> ">

If you would like to see this code working in action please click here. Keep in mind that you need to refresh the page to see the random clouds show up.

CSS3 Drop shadow on text

Caleb Jonasson — Wed, 16 Dec 2009 20:23:31 +0000

Adding drop shadows is now possible with CSS3 but is it worth it? There are only a few web browsers that currently support a css styled drop shadow are Firefox, Opera and Safari. (Don’t expect the old IE versions to work with this because they don’t work with anything.) This means that the page may look better off without using dom style text and going with an image.

The code is simple and looks like this:

text-shadow: 2px 2px 3px #666666;

Yes, this is all that is required to add a drop shadow but it may not be worth it depending on what browser the user is currently on. For the following example I used this bit of code.

This is a test

This is a text drop.

If you are unable to view the above text in your browser I have included a print screen of what it looks like in Firefox.

The text is slightly different because it has been placed in a blog with a different css style on it. To see the drops shadow as it truly is you can use the image or click here to see it in action.

Creating a fixed header and Footer

Caleb Jonasson — Fri, 20 Nov 2009 21:39:30 +0000

If you are looking for a fixed header of fixed footer you have come to the right place. In this tutorial I will be going over the basic page setup for sections of content, the header bar, footer bar, CSS and HTML.

The CSS code for a header is quite simple depending on how you would like it to interact with the rest of the page.

#header {
top:0px;
right:20px;
left:20px;
position:fixed;
background: #eee;
border:1px solid #ccc;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0px;
padding: opx;
font:18px “Plantagenet Cherokee”;
letter-spacing:2px;
}

The above CSS contains the header div and the H1 tag. There are four very important things that are required when having a fixed header. First: It must have the position set to fixed. The other three are all about positioning and linking it to the top and sides. With the above code we set the sides to link 20px from the browser and the top to link directly.

Another important part of the CSS is having the page contents forced below what the header is covering. This will allow us to see div that is underneath. That chunk of CSS looks like this.

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:40px;
}

The HTML looks something like this.

Code With Design Fixed Header

Header

Main Content

Footer

Generally the header is kept withing the container to keep it aligned with the rest of the page however we wanted it to break out of the rest of the page and thus we moved it up, out and away.

The rest of this article will cover the footer which is very similar except for a few things. The footers CSS is going to be fixed to the bottom and not the top which is unlike the header. We will also need to pull it out of the HTML so it can fill up and be safe across browsers.

So first we will take note of the css which goes something like this:

#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
}
#footer p {
margin: 0;
padding: 10px 0;
}

Once again we bring in the four important properties; bottom, left, right, and position. You will also need to change the body tag in the CSS so the footer does not overlap the content you would like the readers to see. This CSS is going to look like this:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-bottom:50px;
}

And now finally we will look at the HTML to see the footer break out of the container similar to what the header did.

Created by Caleb Jonasson

Caleb Jonasson

Going Through Website Creation Part 1: Layout

Caleb Jonasson — Fri, 13 Nov 2009 19:25:59 +0000

Starting Up An Old Project

A few months ago I posted an old project on the old blog. The project was entitled “Browser Friendly Feed Reader.” This project consisted of three simple pages. The first was the submitting form where users could enter their rss or xml feed. The contents of this feed could be output in the web browser to displaying it inside of the site framework that was created.

Process.php
Forum.php
View.php

The site was very simple but it was more built for the idea behind viewing a feed in the browser. Since then I wanted to create a more advanced version of the site that relied on a database and the ability to subscribe to the feeds. This is when I decided to restart to the old project and completely rework how everything is set from the ground up.

Working With The Framework

When starting to create a new project or just recreating one the first thing that you will need is a frame work. The frame work is a quick drawing of how you would like to have everything setup. Some people like to create theirs with programs such as In Design or Illustrator but I prefer to use a graphing set, a notepad and whatever pen is closest to me. I should be using pencil but I normally have a plan in my head prior to starting something.

Once you have the general idea of how things are going to work it is a good idea to draw out how you would like to store the key components of a site. I use a notepad throughout the whole process and it usually starts with me laying out something that looks like this.

Contents of index

Header (include not secure page)
Main image
Nav bar (include)

Sidebar (include)
Sidebar components (include single and double width items)
Navigation (include)

Main content (not included)
Post data

Footer (include)
Blocks of meta and links (include)
Bottom strip (include)

Order of Operations When Designing the Index

Once this has been worked up I then head into Adobe Dreamweaver to begin the process of changing my framework into an actual css ready site with all of the divs. This process takes a fair amount of time and the content usually created in this order. First note that Dreamweaver automatically creates the untitled.php page and the css page. At this point I only have the two items on my testing server. Back to showing you the order of operations.

Change the CSS page to create the proper widths for main content, sidebar, and post.
Change padding properties, select fonts, change margin properties.
Create the divs within the untitled document ie the divs in the header that hold link menus.
Add the div id and classes to the CSS file. (remember to work down the content as it appears within your page. Start with the header then go to sidebar, etc.)
Create and fill the pages with fake content and see if this is how you would like the pages to be displayed.
Go through and tweak anything that makes you unhappy.

Pulling Apart the Index.php Page

Now that you have created your base index page and you are somewhat happy with the content you can go ahead and begin to pull the page apart. This is where the layout of includes will come in handy. This process consists of cutting and pasting section of code into new php files. The naming of these files is up to you but I normally go with “pt_” as a prefix for “Part” which is a part of a page and “pg_” which stands for “Page” meaning that it is a whole page. An example of this is “pg_authors.php” or pg_feeds_addfeed.php” The next section of naming a page comes from the actual section that is within the page. On the friendly browser feed viewer project I started there are sections of pages that relate to feeds. If I wanted to create a page where users could subscribe to a feed I would name it “pg_feed_subscribe” this tells me what the php file is, its subject and what the page is for. Another type of file I often contain is the prefix “process_” This is a page that requires a form to post to or backend piece of date. The page naming is completely up to you I just wanted to share how I go about naming my webpages.

Now we will go through pulling the pages apart. Now that we have gone through a little lesson on proper page names it is now time to actually pull something apart. For this I will not be using the rss.skorg.org site but a new site with no content instead.

Here is the full index.php page that we will be working with.

Test

Header

Sidebar1 Content
The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content.
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

Footer

Now we are going to pull this page apart and change some things so the include will work properly. The first thing we are going to want to do is change how the header information is setup. We want the content that can be thrown into one file to stay at the very top. The rest that we need for the page is going to be below that.

Test




Header

Take note of where this section of code is and what has changed. The title tags have been moved below the IE exceptions. This is so it is not included in the new “pt_head_req_top.php” file. Now we are going to cut the bottom part of the header code will have a separate required field for the transition tags. This is important so if you wanted to add class to the divs you could do it to everything based on one file change.

1
2
3

 include('pt_head_req_top.php'); ?>
Test
 include('pt_head_main.php'); ?>

Inside the two sections is where you want the head data that will change for each page. The following code is what pt_head_main.php consists of.





Header

Because we are now pulling sections of the page together with php the load times will be a little bit quicker and we have decreased the code of the index by an incredible amount. The index.php code now looks like this when we are done with it.

 include('pt_head_req_top.php'); ?>
Test

include('pt_head_main.php');
include('pt_sidebar_main.php');
?>
 Main Content 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.
H2 level heading 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
 include('pt_footer_main.php');?>

Now you should be able to create a site that is fully based off of your index. If you need to change things around like the css link based on different pages there is always PHP code for things like that.

Continue on to read part 2

By: Caleb Jonasson