More CSS Shizzz

I’m still working through my CSS book and I’m using a Bart Simpson bookmark so I don’t lose my place. I’m working on backgrounds now, and this is where photoshop skills come in handy. I have none. To be quite honest there isn’t much help as far as books go in the aspect of photoshop for web design, since everyone, myself included, has gone DSLR on the entire world, 99% of all books are Digital Photo related. Very few help with web design…bastards!!

Anyway..on to backgrounds:

Defining Background-Origin.

The starting point for the calculation of the background-position property of an element is determined by background-origin property:

border

padding

content

Applying the border value, the calculations for the background images position will start from the edge of the border of the element.

Actually, I don’t have example to show you, so just know that as of today only Mozilla, Safari and Konqueror support background-origin.

Next up on the agenda is navigation. Lots of markup here.

Here are 2 quick examples of CSS designed web pages that I just think are the shit man. The shit!
CSS – PunkAss
CSS – Hedges

Also, I’ve been playing around in photoshop and Color Efex Pro and they have this filter that simulates film grain and it’s a lot of fun. Here is an example via Google Picasa 3 uploads due to me being a poor bastard who hasn’t updated his pro account with Flickr yet.

From CEP

This is me riding home from the swap meet.

Filed under: Books, Cascading Style Sheets, Javascript, Nikon D80, Orange County, Photography, Web Design , Adobe, Books, CSS, D80, Javascript, Nikon, Photoshop, Web 2.0, Web Design

What I Learned Today With CSS

So I’ve finished the images chapter in my book, and I pretty thrilled with the results.

Images with captions:
Example Here

Introduction Image:
Example Here

Photo Gallery:
Example Here

Last but not least, a thumbnail page:
Example Here

Next I’m on to conquer backgrounds.

Filed under: Books, Cascading Style Sheets, Web Design , Books, CSS, Learning, Web 2.0, Web Design

What I Learned Today – CSS + Salton Sea Photo’s

Well, to be honest I’ve combined two posts into one. I posted Salton Sea photo’s were coming and since the next project in the CSS book I’m working through is a thumbnail page, I figured I would do both.

I took 454 photo’s of my trip to the Salton Sea, and posted a quick 15 here on a thumbnail page.

Here it is:
TDP Thumbnail Page

There wasn’t much CSS markup because I linked to the previous style sheet of the photo gallery that I created last week.

Any comments are welcomed.

I usually like to post a photo with each post, and during my trip I had discussion with Steve regarding HDR, which I’m going to be honest, I’m not really a fan of, but he likes it. So I created a photo of Steve in an attempt at HDR using Photoshop and Color Efex Pro.

It’s a little wild.

From CEP

Again, any comments are welcomed.

Filed under: Books, Cascading Style Sheets, Fun List, Javascript, Photography, Web Design , Color Efex Pro 3.0, CSS, HDR, Javascript, Photo, Photoshop, Salton Sea, thumbnails, Web 2.0, Web Design

CSS > Photo Gallery

I’ve given up on the sIFR for now, I couldn’t get them to work, so I’ve moved on to basic photo galleries using CSS. When I say basic, I mean basic. Once I get the style sheet typed up, I’ll post a link to an example.

Also, I need to learn Dreamweaver asap, because anything that will save me time is welcomed. Once I finish the book I’m using now, I think I’ll start on a Dreamweaver book.

Here it is:
Basic Online Gallery

Once again, it is very basic, I will work on styling it up a bit later, but baby steps dawg, baby steps.

Also, I think the best thing about book and website support is when companies allow you to download their css code and dissect it so you can see the errors that might be holding you back. One simple little thing can screw the whole page up.

Here’s my work space:

Last but not least, my current favorites:
Song: Telephone by Erykah Badu
Drink: Pepsi
Food: Chimichungas
TV Show: The Office
Movie: Religulous
Website: Tie: Flickr & Hulu

Also, I downloaded Google Chrome and first impressions is Opera and Firefox fucked and out popped Chrome.

Filed under: Books, Cascading Style Sheets, Current List, Fun List, Javascript, Photography, Web Design , britney spears, Cascading Style Sheets, CSS, Dreamweaver, Flickr, google chrome, HTML, hulu, Javascript, Online, photo gallery, the office, Web Design

W.I.L.T. Cascading Style Sheets 4

After a minor setback, I finally understand why I wasn’t able to get the sIFR to work. You are unable to test it on your local server (your computer), so I’m in negotiations with my awesome sister in law to see if I can borrow some server space to get them up and running. I found help via a website called Design Intellection that breaks it down for you like you’re a 5 year old. Or a 3 year old if your name is Michael Scott .

More to come after I put my daughters down for a nap and I snag a couple pictures of Saddleback Mountain with snow on it. Happens every year, but people always seem to forget come summer.

Filed under: Books, California, Cascading Style Sheets, Javascript, Orange County, Web Design , Cascading Style Sheets, Dreamweaver, Javascript, Saddleback Mountain, sIFR

What I Learned Today: Cascading Style Sheets 2

Flash Replacement. One major downside to image replacement is that it requires a lot of manual labor. Thankfully there is sIFR.  Scalable Inman Flash Replacement.

Example:
Noodlebox

Sorry I don’t have a before or after picture.

Basically, sIFR is a javascript file that scans your headings, copies the text from inside those headings, and uses it inside a Flash object that replaces the HTML text. Pretty awesome huh?

sIFR can be affected by the extra whitespace in your HTML tags. This would be proper code:

<h1>Yo! MTV Raps!</h1>

No spaces, no problem.

You can get ready made sIFR from many different sources, including one from the author of the book I’m using.
Fontsmack

Once you have the .swf file they’re ready for your web page. You should really call the .swf by the font they include. example: bitwise.swf

Customizing the Javascript. You do need to insert into the head of your page one line of script.

<script typre=”text/javascript” src=”scripts/sifr.js”></script>

You’ll also have to insert some of your own code to indicate which headings you’ll want o replace.

Alright, it’s 4:30 Pacific time, I gotta get ready for work.

Here’s some visual stimulation for that ass:

Presidio Cemetery S.F. with the 300 effect.

Goodnight munchkins.

Filed under: Books, Cascading Style Sheets, Fun List, Javascript, Lomo, Nikon D80, Photography, Web Design , Cascading Style Sheets, CSS, DOM Scripting, Dreamweaver, Javascript, Sitepoint, Web Design

What I learned today: Cascading Style Sheets

Hierarchy. Not all headings are created equal. Looking at two different websites, A List Apart and Subtraction , you’ll notice the different style’s regarding font size and weight on headings to create a sense of hierarchy on the page.

Identity. Your company logo has to be unique. Also, your site design – colors, layout & images must also be unique. To consider headings, you must consider typography, and the current state of HTML typography is very poor, although it is improving, considering that only about 75% of all users have just 8 fonts installed on their computer. We need some style…we need to Diddy the web if you will. Sometimes being subtle is the way to go. Check out Rapha, which has a well harmonized typeface, and it brings out a nice effect.

Image Replacement. This is a nice answer to spruce up your web page with “Diddy” fonts. This means any user with a CSS enabled browser will see the replaced text, but ones without will just see plain text.
HTML like this:

<h1>

Yo! MTV Raps!

</h1>

<p>

…

</p>

Would be replaced by an image. Again, users who have browsers not supported by CSS would just see the plain text.

Text-Indent. With Text-Indent image replacement, a negative text-indent is used on the text inside the heading to make it move off the left of the screen, placing it out of view. Using CSS, you can adopt any design you like.

example:

h1 {

height: 43px;

background-image: url(images/blahblahblah.gif);

background-repeat: no-repeat;

text-indent: -9999px;

overflow: hidden;

}

However, users not supporting CSS will not see the image. Oh well, sucks for them.

Providing Additional Markup. Basically, we’re covering up the text with an image, using span inside h1:

<h1>

<span></span>Yo! MTV Raps!

</h1>

This allows us to apply a background image to cover up the HTML text.

This is all I’m going to update today, not to be rude, but I need to concentrate on the book, and less on the wordpress post. Blogs are cool, but Wu Tang is for the children. I’m getting the lesson’s directly from The Art & Science Of CSS by Sitepoint.

I don’t want to leave you without any visual stimulation so here’s a picture from Mel’s Drive In, the Sunset Blvd. one :

OK, back to work.

Filed under: Books, Cascading Style Sheets, Lomo, Web Design , Adobe, CSS, Daily Log, Dreamweaver, HTML, Learning, Mel Drive In, Photo, Picture, Style Sheets