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

Blog 3: How its CSS techniques work – The Perils at Great Falls

By Zhao, Hong

The Perils at Great Falls by The Washington Post is an example of what I want to make in the future. I understand that I have a long way to go.

The first attraction on this web page is the dynamic graphic at the header part. I think the background picture, the flowing river, according to its page source and styling, should be a short video or pictures. Here, I just want to talk about the two CSS techniques we could learn from the markers on the dynamics and use them in our own works.

First, CSS3 animation.

Screen Shot 2014-09-25 at 10.13.10 PM

This is the animation used for the swinging markers.

{animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-name: linktrans;}

a. “Animation-duration” means how long the animation will play, and you should always make sure it’s not 0.

b. “Animation-time-function” specifies the speed curve of the animation, which defines the time an animation uses to change from one set of CSS styles to another. “Ease-in-out” means the animation has both a slow start and a slow end.

c. “Animation-delay” specifies a delay before the animation will start.

d. The animation-direction property defines whether or not the animation should play in reverse on alternate cycles. Normal is the default value.

e. The animation-fill-mode property specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a “delay”).

f. “Animation-iteration-count” specifies how many times an animation should be played.

Here is the link for animation properties at W3Schools.com in case you want to know more: http://www.w3schools.com/cssref/css3_pr_animation.asp

Second, Hiding an element. When you click any one of the markers, a graphic will appear below giving a specific description of that spot.

Screen Shot 2014-09-25 at 10.13.27 PM

{display: none;
visibility: hidden;}

a. “display:none” hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

b. “visibility:hidden” hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Unfortunately, I still don’t figure out how to reveal an element. Would it be using some JavaScript knowledge?

Blog post 3: Missouri School of Journalism

Screen Shot 2014-09-24 at 2.12.32 PMI’ve always liked the design of the MU School of Journalism site. The homepage is very clean and easy to navigate. So, I decided to dig into the CSS a bit. I was a bit surprised that I actually understood some of it. (Keep in mind this is after I checked out SI.com and its mess of CSS). It seems very straight forward, which I usually think is the way to go when it comes to design.

First thing I did was remove the CSS with the Mozilla web developer toolbar. The site is essentially just five lists. It’s a lot of links, but through the CSS it condenses it to a simple package. I like the subtle use of color. When you scroll over the links or many of the boxes, they’re altered in some sense. Boxes go from light gray to dark gray, navigation goes from black to white. It’s all based around the Mizzou colors of black, gold and white. The background color is also nicely done. Banners on the sides fade from gray to black. The fade is a technique that you really don’t notice at first but really makes for a nice touch. That’s something I’d like to do. I think it’s those small touches are part of what takes a site from amateur to professional looking.

If I had a complaint about the design, it’s that the photos at the bottom are a bit too small. I wonder if banners on the site could be narrowed to allow for more room for the rest of the content.

For the heck of it, I ran it through validation, and it did have a few errors, mostly dealing with javascript that I couldn’t understand. It did have a few errors relating to the <hgroup> function, which I’m not entirely sure about, but looks like its in relation to the navigation. Wondering if the site would look all that much different if the errors were fixed.

Blog 3: CSS Technique

By Andrea Jankelow

Each circle image changed to full cover when you hover over it

Each circle image changed to full cover when you hover over it

When I was looking for CSS techniques on the internet, I thought of looking at a graphic designer’s portfolio because designers typically have elements they want to show off and they tend to do it in a very aesthetically appealing way. I found CharlotteTang.com which is a beautifully designed site. On her home page she highlights 12 projects by showing an image in a circle. All the images appear black and white, but when you hover over them, they change to color and a title pops up. I thought this was a really cool way of showcasing your work and really making each project “pop”.

So I tried to figure out how it worked. I must say, this was a little difficult because she had some more advanced coding on there and it was tough to figure out what was what. However, I started to piece together how it worked. In her HTML coding, she created a section titled “portfolio” that has each image under a separate “article”. For each image she created a class that she would then use CSS to create a transition for the image. She floated all her images in the portfolio left. She then created a border radius for her images to add a stroke around the circle. After that, she added an ease-in-out transition that took .2 seconds. She created a hover transition that would then make the image change from gray (#fff) to the original image color.

Overall, this definitely wasn’t the easiest CSS to figure out and she really integrated it well. I think I would need some practice, but I would love to master a css transition like  this for my own portfolio site!