Google News CSS

At first, I was going to try and figure out what in the hell was going on in terms of CSS styling on the Pitchfork homepage. But I came to the harsh realization that it would take the better part of the week for me to get any sort of grasp on what was going on.

Instead, I’ve decided to tackle the CSS styling on the Google News homepage. This is something I visit frequently, especially if time is not on my side and I need to quickly digest the day’s happenings.

Screen Shot 2014-09-26 at 1.58.33 PM

The first line of code that caught my eye was for the scrollbar at the left of the page. When looking at the CSS for this scrollbar, I noticed there is a “pseudo-element” in followed by :: that was in front of things such as -webkit-file-upload-button element and -webkit-input-placeholder element. In looking at John’s blog post, he found the same element when looking at the MoreSleep site. From what he found, this element is used to style the first letter, or line, of an element and to insert content before, or after, the content of an element. But, I really have no idea the exact function of this element…

Screen Shot 2014-09-26 at 2.00.13 PM

I do feel that I understand the “transition” element, though. The duration for the transitions on the scrollbar is .218s. I’m curious as to how one goes about assigning the appropriate duration. Hopefully that is something I pick up on.

I did find out that using these transitions is a way to add an effect when changing between styles without having to use Flash animation or JavaScripts. Sounds pretty helpful considering I have no experience using either of those tools yet.

One other thing I caught while looking at the scrollbar was the “overflow” element that allows one to denote what happens when content overflows an element’s box. The description used on Google News is for the overflow to be visible, meaning the content is rendered outside of the elements box. According to w3schools, this is the default.

Another element I picked up on that I was not previously familiar with was the “min-height” element. This allows one to set a minimum height for an element so that the value of the height property does not become smaller than the min-height set. There is also a transparent background for this element.

Stylistically, this site is extremely simple and is really nothing more than a running list of the day’s top stories with a scrollbar on the left with more top stories and shortcuts to see top stories by location and category.

Hopefully all this mumbo jumbo makes sense…

–Adam

Advertisements

CSS example of Ben Thomson Photography

Screen Shot 2014-09-26 at 1.32.43 PM

I really like this photography portfolio by Ben Thomson. I love the large background photos that transition in the back along with the enter page. When I looked at the CSS I found that a lot of it was similar to what we’ve learned in class, along with some things we haven’t learned yet.

I picked this website because since I’m a photojournalism student this coding would be very useful to me to make a great portfolio website. Screen Shot 2014-09-26 at 1.33.14 PM

Blog Three: Columbia Daily Tribune navigation CSS

By Hellen Tian

Screen Shot 2014-09-26 at 11.41.01 AM

I’m going to look at is Columbia Daily Tribune’s website this week. I like that the website have a drop down list when you hover over the beats. How they did it is they built a sub ul under each beat, and then put divs on those sub uls. Then they style it in CSS file.

It took me a while to find the CSS of the drop-down menu: that’s mainly because it took me a while to see that they made the effect by constructing ul under ul…

The first thing I did was I found its CSS and I disabled text-transform: uppercase. Then the beats on the homepage really becomes lower case… But that was in the CSS of the main navigation bar. Then I found the CSS of the sublist, and I disabled the font in the sublist, and then the font becomes Times New Roman. Because they have so many beats, the website have layers and layers of divs, and therefore there are so much overrode lines in the sublist CSS file!

I think this is a very practical trick that we would use, and it seems like it’s not terribly hard to make as long as you don’t lost track of your divs.

Blog 3: Will Packer Productions-CSS Explanation

I recently came across the website of film production company, Will Packer Productions. My favorite thing about this site is the slideshow background that shows different stills from their current movie No Good Deed. I also like the more advance navigation on the page that allows you to scroll down the page to different sections. The background also changes as you move down.  The main page of the website has many different videos and links embedded into page but there are also tabs that take you to independent sections.

Screen Shot 2014-09-26 at 11.31.40 AM

 

Screen Shot 2014-09-26 at 11.32.00 AM

This site has much more complicated navigation than what we’ve learned so far in class, though I hope to be able to complete something like this one day.  I’ve posted screen shots of the different navigation tools that are written in the site. You can also see there was a lot of styling done to the original html page. It looks like there is also more than one css style sheet used here. So creating multiple pages is a technique that I want to learn as well.

 

 

CSS Distortion

Screen Shot 2014-09-26 at 10.13.14 AM

This isn’t so much a real website as it is a demonstration of what’s possible with CSS3. The site demonstrates the power of CSS transform and transition. They distort the images so that they look like files sliding together, but then when you hover over one it removes the distortion and faces forward.

It’s similar to the way iPads and iPhones display album artwork from your music collection. That same effect can be made with just CSS3. Specifically, the transform:distort property and transition. Distorting each image makes it take up less space, so not only is it an aesthetic effect, but it’s functional as well. You can fit more images on the page if they’re distorted a little bit.

The Verge: CSS3 Coding

One of the websites I visit often is The Verge, a website catering (mostly) to technolo-geeks (much like Wired). However, I like the layout and design of the Verge better than I do Wired. One of the main reasons why is because of the color scheme going on for individual stories. VergeStoriesI hope that I will be able to use colors on my websites the way Verge does. So, hoping to learn, I took a look at their coding.

The first thing you notice: <div> tags EVERYWHERE!

DivTags

^This is just the coding for the section I mentioned above.

Most of the tags within the div are familiar, but not the class ids. One new tag I noticed in particular was <span>. This tag is used to give color to elements. Then, in your stylesheet, you use properties like box-shadow and gradient. It looks easy enough, but I have a feeling it will take me quite a lot of simpler website building to get to the level Verge is on.

CSS Technique Explained- MoreSleep

MoreSleep, a creative agency from Berlin, offered a stylish but user-friendly portfolio site.

MoreSleep

Large font-size values, neat scrolling effects and a red-heavy, contrasted colour scheme make this site stand out.  CSS transitions make it smoother to navigate through pages and content. Background-size properties are used to control the scaling of images at different sizes. Even the newsletter signup form is styled to match the clean look and feel.

One major CSS technique I found it worth to mention is the so-called Pesudo-elements. A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

The most widely used pseudo-element is the ::first-line pseudo-element, which is  used to add a special style to the first line of a text. However, in the case of MoreSleep, it inserted a lot ::before and ::after pseudo codes. The ::before (::after) pseudo-element can be used to insert some content before (after) the content of an element.

http://www.moresleep.net/