Tag Archives: CSS

JavaScript Critique: The Washington Post

site: http://www.niemanlab.org/2013/07/arguing-for-a-new-genre-javascript-journalism/

Screen Shot 2013-12-09 at 4.45.29 PM

While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

function embedWPAudioPlayer(opts) {
 var id = opts.container,
 url = opts.url,
 width = opts.width,
 filetype = url.substr(url.length-3);
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin || !Modernizr.audio) { //if it has the plugin OR it doesn't support HTML5
 var so = new SWFObject("http://media.washingtonpost.com/wp-srv/graphics/assets/swf/soundplayer_stretch.swf", id, width, "30", "9", "#ffffff");
 so.addParam("id", id);
 so.addParam("name", id);
 so.addParam("allowScriptAccess", "always");
 so.addParam("wMode", "transparent");
 so.addParam("swfliveconnect", true);
 so.addVariable("soundurl", url);
 so.write(id);
 } else if (Modernizr.audio) {
 $('#'+id).html('<audio controls style="width:' + width + 'px;"><source src="'+ url +'" /></audio>');
 }

}

It’s a little hard to understand, but knowing where to find it is pretty useful in case one would want to use it later.

It really adds to the piece since you can actually hear the words being spoken. Without the audio, this story would lose a lot of its value.

Advertisements

CSS Technique: Sticky Nav

I like sticky navbars. I think they work. And they’re an elegant solution to ensuring the user always has a way to hit other pages on your site. Turns out, sticky navbars can be pretty easily coded through CSS, which is great because that means it’s not too convoluted.

I found a pretty nifty tutorial at a site that goes by the name of “AvexDesigns“. And hey, what do you know, he has a sticky navbar! A pretty nice one at that…

Screen Shot 2013-12-09 at 3.34.40 PM

The tutorial he has up makes creating a sticky navbar sound pretty darn simple. Essentially you tag a navbar with an ID and give it a couple attributes while making sure your header ID has the appropriate attribute.

Are you ready for it?

#navigation {
position: fixed;
z-index: 10;
}

#header {
margin-top: 50px;
}

And that’s it! Pretty easy, right?

Looking at the code on Avex Designs shows that he follows his own tips…mostly. It’s odd, but he put the z-index: 10 bit under the header ID instead of his nav ID. Going into Google Chrome’s “Inspect Element” and disabling the z-index shows that it’s working as intended though, since items will scroll on top of the navbar with it disabled.

Screen Shot 2013-12-09 at 3.42.15 PM

 

The navbar is tagged with the “fix position” attribute though, which, when disabled, does make it not-sticky. So that’s nice to know. I think the reason this designer put the z-index attribute under header instead of nav is that he has some other stuff up there at the top that he wants to keep above everything else as well (like the Avex image).

CSS Image Hover effect: Grey to Color.

Link to the site: http://www.jeremyholmesstudio.com/

What I like about this website is its design on image thumbnails. As you can see from the screenshots below, these grey thumbnails turn into color when you move the mouse over the image. I like this effect because it creates a sense of movement as if the users are “revitalizing” the image.

Screen Shot 2013-10-30 at 1.39.36 PM

(When you move the mouse over the image…)

Screen Shot 2013-10-30 at 1.39.50 PM

I looked into the website’s HTML, and found out it actually used javascript as listed in its <head> section. I would assume it helps the hover effect. The “id” for black and white images are “project_thumb”. and for the original color image the “id” is “cardthumb.”

<script type=”text/javascript”>
$(document).ready(function(){
createHover();
});
function createHover() {
$(“.project_thumb”).unbind(‘mouseenter’).unbind(‘mouseleave’); // reset the hover to prevent doubling
$(“.project_thumb”).bind(“mouseenter”,function() { // create hover
$(“img”, this).fadeTo(10, .1); // Sets the opacity to 70% on hover
}).bind(“mouseleave”,function(){
$(“img”, this).fadeTo(10, 1.0); // Sets the opacity back to 100% on mouseout
});

</script>

 

The actual HTML for the black and white image contains this part that is related to the hover effect:

<div id=”item_3627254″ name=”3627254″ page=”1″ spot=”-1″>

<div id=”pr_contain_item_3627254″>

<a href=”/The-Green-Guide-for-Horse-Owners-and-Riders” onmouseover=”this.className=’hover’;” onmouseout=”this.className=’nohover’;” id=”p3627254″ rel=”history” name=”jeremyholmesstudio” onfocus=”this.blur()”>

<div class=”loader_holder” id=”load_3627254″>

<img src=”/_gfx/loadingAnim.gif” style=”opacity: 1;”>

</div>

<div class=”cardimgcrop notitle_notag” id=”cardthumb_3627254″ name=””>

<img src=”http://payload66.cargocollective.com/1/5/190228/3627254/prt_184x184_1344956617.jpg&#8221; border=”0″ rel=”testprt_1344956617.jpg” style=”opacity: 1;”>

</div>

</a>

</div></div>

 

 

And in the CSS stylesheet, “project_thumb”, “cropimgcrop” and “cardthumb” are defined:

 

 

.project_thumb {
    float: left;
    margin: -5px 0px 32px 31px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
}

.project_thumb .hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.cardimgcrop img {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.project_thumb .hover .thumb_title span {
    text-decoration: none;
}

.project_thumb .cardimgcrop:active {
    margin: 0px 0px 0px 0px;
    border:0px solid #ffffff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
}

.project_thumb.active .cardimgcrop {
    border: 0px solid #2d86ff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.project_thumb.active .thumb_title span {
    text-decoration: none;
}

.cardimgcrop {
    background: #ffffff;
    border: 0px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0px;
    position: relative;
    min-width: 184px;
    min-height: 134px;
}

.cardimgcrop.notitle_notag {
    margin-bottom: 0px;
}
#cardthumb_3627254 {
    background-image: url(https://dl.dropbox.com/u/13148572/JHStudio_Web/btn/projects/horsecolor_btn.jpg); 
margin: 0 0px 0 0px;}

The coding is quite complicated as the designer created different parts of image using photoshop. So it’s important to have everything sorted out in mind and create correct <div> to arrange them, and matching CSS to define the effect.

The Escape Committee’s beautiful HTML/CSS techniques

When I visited the Escape Committee’s website, I knew immediately I wanted to copy its CSS technique for my next website.

The creators of this site appeared to use a grid system when designing the home page; the page consists four rows of three photos and/or projects. Not all of the boxes are the same size, which adds an asymmetrical touch to the grid pattern.

Screen shot 2013-10-29 at 3.00.05 PM

While inspecting the home page’s HTML, I realized the site’s developers used a code I was unfamiliar with. The following is  small chunk of code the developers used to design the page:

<div class=”m-home_content” >
<div class=”grid-pageContentContainer” >
<div class=”grid-homeContent style-white u-clearfix” >
<div class=”grid-homeContent_itemA grid-homeContent_itemDouble” >

Another design feature I love about this site is the hovering effect we see when we scroll over one of the photos. When we move our computer mouse over a photo, the photo becomes darker, and text appears that tells us the name of that project. We now also have the option to click on “View Article.”

Screen shot 2013-10-29 at 3.01.08 PM

The HTML I found for this effect is as follows:

<div class=”c-imageBlock c-imageBlock_verticalAlign c-hideContentUntilHover” style=”background-image:url(http://www.escapecommittee.com/wp-content/uploads/2013/05/11-580×400.jpg >

The site’s grid pattern adds organization to the site, and its hover effect allows the user to know what he or she will see once he or she clicks on one of the squares. I would like to use these techniques when I create my next website.

CSS of the Roots N Blues Website

I really like the style of the Roots N Blues website from this year. Specifically, I like the way they did the bios of the artists that were playing this weekend.

Screen Shot 2013-09-25 at 8.27.59 AM

If you scroll over the photos, they go dark. You can also click on them for a bio and video of the artist. I also just like the general shape and how they look on the page.

Here are some of the CSS elements for the parts I like below.

Screen Shot 2013-09-25 at 8.31.20 AM

Screen Shot 2013-09-25 at 8.39.47 AM

I really enjoy the way this site looks.

The Sojourn Network’s Grid Technique

For this week’s blog post, I will analyze the CSS technique the Sojourn Network website uses on its home page. The Sojourn Network is a group of reformed Baptist churches that works to plant healthy, numerous churches. The website has a beautiful design, and part of the reason the site is so aesthetically pleasing is that all its material is organized in a grid fashion.

On the home page, material is separated into regions, each containing three columns beneath one row. Each row introduces the name of a new section, and each column contains information pertinent to the row section. For example, the first region has a row consisting of text and an image that both introduce what the section is about: the Sojourn Network. Also, the region has three columns that lie below the header and contain individual text pieces that further explain what the section is about.

Screen shot 2013-09-24 at 6.19.24 PM

The “Sojourn Network” region evidently uses the grid system to organize its information. One can identify this technique by looking at its CSS markup. The text within the columns for this region is centered, and the blocks of text contain five percent padding on both the left and right sides. This text alignment and padding cause the text pieces to become separated into three separate columns.

Screen shot 2013-09-24 at 6.20.40 PM

The “Churches” region utilizes a grid system, as well. The region has six articles about six different churches. The articles are organized so that two are located on the left of the page, two are located in the middle, and two are located on the right. Each image is stretched and has a width of 1, according to the CSS markup. Since all photos are the same size, the region forms that consistent three-column grid. In addition, the text for the name of the church and the text for the location of the church are perfectly aligned to the left. They lie on the same column boundary line and thus form a grid pattern.

Screen shot 2013-09-24 at 6.21.26 PM

The “News” region is similar to the “Churches” section: all images have a width of 1 and are stretched. Additionally, the headline for each article and the description that lies below each headline align perfectly to the left. Therefore, the photo, headline and text for each column lie on the exact same boundary line and thus form a grid pattern.

Screen shot 2013-09-24 at 6.22.13 PM

The Sojourn Network’s grid pattern makes its website remarkably navigable. Because the site is so well organized, I know exactly where to find the information I want to find. This website encourages me to incorporate a grid pattern when designing future websites.