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.

Advertisements

One thought on “The Verge: CSS3 Coding

  1. arw62d says:

    I really like the color blocking on the site homepage. In looking at the coding, the HTML seems easy enough to follow, but I’m wondering what the CSS looks like. Are the background images positioned with floats or absolute positioning? And are the color blocks just opaque boxes overlaid on the images? Or would you somehow apply the color directly to the images? Most of the divs are condensed in this screen shot, but are the images coded in a special way or just the simple way we’ve learned in class?

    I love this technique, though, thanks for sharing!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s