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 , Flickr, Online, CSS, HTML, Dreamweaver, Javascript, Cascading Style Sheets, Web Design, britney spears, hulu, google chrome, photo gallery, the office

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

My Top 3 Favorites as of 10/13/08

These last 2 weeks have been a huge adjustment period for me, and getting time to take pictures and post the story behind it is something I haven’t been able to factor into my everyday life. So I figured I’d post my favorites of the last two weeks.

I’ll start with reading material.

Blogs
1. Mudflats: Recently nominated Best Political Blog from bloggers choice awards.
2. The Consumerists I’ve found out quite a bit of money saving tips and also tons of info regarding the recent collapse of our wonderful economy.
3. LifeHacker : Geek blog about DIY tech projects, and hacks for Gmail and other cool tools.

Websites
1. Hulu : Website that airs the latest TV Show’s from Fox, NBC and Comedy Central. I’ll never miss the Office, It’s Always Sunny, Daily Show or King Of The Hill again.
2. Flickr : Still an all time favorite. Flickr is KING!!
3. Surf The Channel – Dexter : I’m addicted to Dexter, and this has all the episodes.

Music
First let me say that iTunes has this new Genius playlist option and it really works well. I’m not gonna list albums because lately I’ve been listening to random playlists.

Artist first – Song title second

1. El-P – Deep Space 9mm : Off the Fantastic Damage LP
2. Justice – Planisphere Pts. 1-4 : Created for a fashion show. It sounds amazing.
3. Rilo Kiley – Someone Else’s Clothes (Acoustic) – Off of the Live @ Fingerprints EP

Podcasts
1. Real Time With Bill Maher : People either love or hate Bill Maher, but our views on religion are very similar and he usually has both sides of the political spectrum represented on his talk show.
2. This American Life : Stories from around the U.S.
3. NPR Wait Wait..Don’t Tell Me: Political satire from a live venue in front of a studio audience.

So that kinda sums up all my interests right now. Enjoy.

It’s Santa Ana Winds time, and the Southland is on fire again. LA, San Diego, Ventura & San Bernadino counties all have fires right now. Hopefully it will be over quick.

This time last year I took some pictures from the Foothill Ranch fire here in Orange County.
Here are 2:

Good night everyone…

Filed under: Books, California, Current List, Fun List, Los Angeles, Music, Orange County, Photography, Random Thoughts, Thoughts on Movies, Uncategorized , Photo, Politics, Fire, List, Blog, Favorites, Santa Ana Winds, Podcasts

the wordy shipmates

Sarah Vowell has a new book coming out later this year called The Wordy Shipmates.
This is very exciting news.
Sarah Vowell has become my favorite author over the last few years, so I’m hoping that The Wordy Shipmates doesn’t disappoint.

Filed under: Books, Fun List, Random Thoughts, Uncategorized , Author, Books, Favorite, Reading, Sarah, Summer, Vowell