Mr.Agron

Process work from Mr.Agron

Monthly Archives: January 2012

Work Backwards to Understand CSS Structural Pseudo Classes

USEFUL VIDEO: Nth child.

I am beginning to change the layout on my online portfolio.

I have added a small navigation bar and applied rounded corners to “content holder”. I also set up a twitter badge on my about page… Planning on changing it to a better looking, less common one.

I have added two more images of a classmate’s page who used multiple backgrounds to create the effect of clouds overlapping each other when the page is shrunk or stretched.

CSS Print Style Sheet

This is a pretty good Print Style Sheet that I found online. It is really helpful that it shows the full URL next to links. Something that you wouldn’t be able to see if you printed it with a Print.css (it would probably just look underlined).

Print.css

body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: ” (” attr(href) “) “;
font-size: 90%;
}

Reading: Chapter 2 of “Stunning CSS3”

From reading this chapter I learned how to style speech bubbles in CSS. I am not sure how to code an actual website with working comment section, but it is very useful for websites that already have a comment section. This way if a website already has a comment section (like a blog with comments) I could make that look like speech bubbles.
It is all smoke and mirrors! The tail on the speech bubble is completely made in CSS and rotated around and placed right in that section of the text box to make it look as if it were a speech bubble.
CSS is a monster and I really want to know a lot more! It is amazing all the things you can do with it. Also, It is interesting to me how different browsers have little differences in the coding (ie. Webkit, Moz, O). They are little details that a true web designer would know to make sure a website he designed works in every browser.

Some Useful Links

Here is a list of webpages that I find useful. I will update this list as I discover (and remember to add) more.

http://kuler.adobe.com/
http://designerstoolbox.com
http://digitalmediaminute.com/reference/entity/

Web Optimization

I just ran my website through http://www.websiteoptimization.com/services/analyze/ and it seems that I need to combine my JavaScript into one file because right now the file size is too large. Also, I am hoping to learn how to use sprites to use less images and icons.

—–Here is a summary—–

Ok! First Post

Iphone banh mi wayfarers raw denim freegan, portland salvia cardigan etsy locavore. Banh mi banksy helvetica, pitchfork before they sold out cliche 3 wolf moon cred next level stumptown terry richardson. Organic irony vegan fanny pack. VHS cardigan vice, high life skateboard dreamcatcher chambray DIY Austin irony raw denim. Thundercats cosby sweater iphone, banh mi keffiyeh photo booth jean shorts PBR fanny pack marfa brunch cliche lo-fi. Readymade tumblr put a bird on it sustainable +1, irony wes anderson etsy raw denim shoreditch twee portland. Freegan vice etsy, blog cardigan hoodie messenger bag salvia photo booth scenester.

Bicycle rights before they sold out vegan banksy pitchfork marfa thundercats lo-fi, portland twee. Whatever letterpress aesthetic, put a bird on it chambray craft beer leggings VHS messenger bag gluten-free iphone vice. Gentrify mustache twee carles trust fund letterpress. Next level banh mi yr, quinoa messenger bag raw denim mustache mlkshk hoodie cosby sweater. VHS fanny pack readymade, organic synth etsy stumptown squid mixtape twee cliche. Keytar gentrify wes anderson tumblr, fixie bicycle rights sartorial carles thundercats farm-to-table biodiesel high life terry richardson. You probably haven’t heard of them next level hoodie single-origin coffee, put a bird on it quinoa DIY aesthetic retro pitchfork.

Carles twee aesthetic, wes anderson put a bird on it tofu photo booth. Shoreditch art party sustainable DIY vegan pitchfork put a bird on it, high life portland etsy tattooed locavore. Fap organic viral art party, photo booth keffiyeh craft beer pitchfork terry richardson. Shoreditch lo-fi american apparel chambray, gluten-free cosby sweater butcher cliche wayfarers thundercats locavore art party. Terry richardson fap yr, sartorial brooklyn vice cliche lo-fi. Etsy terry richardson bicycle rights single-origin coffee next level. Cosby sweater food truck lomo raw denim brooklyn.

+1 terry richardson thundercats, mlkshk put a bird on it tofu squid next level cardigan iphone letterpress sartorial wes anderson. DIY etsy letterpress 3 wolf moon high life, banh mi organic vinyl craft beer fanny pack locavore williamsburg sartorial. Dreamcatcher VHS brunch, tofu terry richardson jean shorts retro locavore skateboard iphone seitan high life fixie. Squid DIY raw denim, +1 retro blog yr. Hoodie PBR art party keffiyeh. Artisan cardigan brooklyn, retro keffiyeh gluten-free DIY before they sold out tattooed ethical fixie leggings. Skateboard iphone irony, whatever fap terry richardson helvetica gentrify retro tofu letterpress sartorial bicycle rights readymade wes anderson.

Hello world!

Welcome to WordPress.com. After you read this, you should delete and write your own post, with a new title above. Or hit Add New on the left (of the admin dashboard) to start a fresh post.

Here are some suggestions for your first post.

  1. You can find new ideas for what to blog about by reading the Daily Post.
  2. Add PressThis to your browser. It creates a new blog post for you about any interesting  page you read on the web.
  3. Make some changes to this page, and then hit preview on the right. You can always preview any post or edit it before you share it to the world.