Home

Screen Shot 2013-01-09 at 11.07.13

A magazine always has a front cover, something visually exciting, I wanted to give my website this, something visually exiting and at the same time fits in with my social network magazine style theme, I came up with a cover, a cover at the top of the page to welcome you to the site, it’s visually existing and ever-changing which is exactly what I wanted to achieve, this is how I built it:

Screen Shot 2013-01-09 at 11.12.13

I started with this: http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/, a tutorial to do image blocks, this was just what I wanted, but I wanted it on a bigger scale, I wanted it responsive and full width, editing the jQuery and CSS I achieved what I wanted which was this, a full width, image changing plugin, as you can see from the above image is does work, but it didn’t blend in to the site enough, so I set out to blur and then put a purple tint over it to blend it into the site, but I didn’t want to use images, I wanted to use CSS/3 to create what I wanted but I wanted it to work across all browsers, this was my solution:

To create the blur’ed effect over the images, I used this CSS:

filter: blur(1px); -webkit-filter: blur(1px); -moz-filter: blur(1px);
-o-filter: blur(1px); -ms-filter: blur(1px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’1′);

this works across nearly all browsers including Internet Explorer, there was one file needed which was a .SVG manly for Mozzila Firefox which doesn’t support the other CSS3 tags, next up was to create the purple tint without any images, this is how I did it:

I first used the :after in my CSS so that it would be displayed after the content but over the content and then did this:

content: “”;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:#a00c8c;
opacity: 0.5;

I make sure the whole of the div is covered, I then put a background-colour on and set an opacity on to make sure you can see the image’s/content behind, next I need to put text over it. Screen Shot 2013-01-09 at 11.11.35Going back to the magazine style theme, there needed to be a bold, easy to read font, much alike what you would find on the front on a magazine, after hours of research into the font that I felt work I found this:  Novecentowide-Bold, It’s bold, clear and easy to read, this was then crafted into the website, using @font-face and supplying the font’s (end result shown at top).

I wanted to do one last thing to the cover though, give it the ‘ever-changing’ aspect, using this little bit of JQuery (Found here: http://jsfiddle.net/VNY6r/2/ and in final website) I managed to make the text on the second line fade into different words/sentences, and example of this in action can be seen here – http://sws.canterbury.ac.uk/cml19/CWD/Slider_Test/ (Before viewing this link, this is an unfinished experimental preview of the site to this date, many things are broken, the focus of this upload is the featured images cover banner and text under header/navigation bar).

Advertisements

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