Cheesetoast » Graham http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.8 Fixed top menu that fades and shrinks when scrolled http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/ http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/#comments Mon, 07 Jul 2014 23:16:28 +0000 http://www.cheesetoast.co.uk/?p=1289 This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied. HTML We start … Continue reading

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied.

See the Pen Shrink & Fading – Fixed Menu Bar by Graham Clark (@Cheesetoast) on CodePen.

HTML

We start with the html5 nav element with a fairly standard horizontal unordered list for the menu:

<nav>
  <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
  </ul>
</nav>

CSS

nav {
  background: black;
  color: white;
  transition: opacity 1s ease;
  opacity: 1;

  height: 80px;
  line-height: 80px;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
}
nav a {
  color: white;
  text-decoration: none;
}

nav:hover { opacity: 1 }

First I start by styling the visuals. The opacity is set to 1 with a CSS3 transition so that the changes are made smoothly.

The line-height is the same as the height of the nav bar, so that the text is vertically centered.

The position of the nav is fixed at the top left with a width of 100%.

Finally, I added a hover option that sets opacity to 1 again so the user can view the menu more clearly.

Next I’ll add the class that javascript calls when the user scrolls:

.scrolled {
  opacity: 0.7;
  height: 50px;
  line-height: 50px;
}

JAVASCRIPT (JQUERY)

$(window).scroll(function(){

  var scroll = $(window).scrollTop();

  if (scroll > 0 ) {
    $('nav').addClass('scrolled');
  }

  if (scroll <= 0 ) {
    $('nav').removeClass('scrolled');
 }

});

(Don’t forget to include jQuery if you’re using this code)

This code is pretty straight forward. As the user scrolls the function is called. The variable ‘scroll’ basically measures the amount of space from the top of the page to the top of the window, i.e. before you start scrolling the distance is 0.

Depending on the scroll amount, the javascript adds / removes the ‘scrolled’ class.

The CSS3 transitions will degrade gracefully and a lack of javascript support shouldn’t make anyone cry either. Hope this code has been of interest!

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/feed/ 0
Sideways Text Header http://www.cheesetoast.co.uk/sideways-text-header/ http://www.cheesetoast.co.uk/sideways-text-header/#comments Wed, 21 May 2014 23:44:45 +0000 http://www.cheesetoast.co.uk/?p=1282 I was recently playing around with the idea of having the header for a block turned sideways.
In my example I created a thick left border for the heading. After rotating the text using the CSS transform (I used bourbon in my example to cover vendor prefixes) I had to sort out the positioning with transform-origin set to 0, 0. Then I used a margin left to place it in the border space. Continue reading

The post Sideways Text Header appeared first on Cheesetoast.

]]>
I was recently playing around with the idea of having the header for a block turned sideways.

In my example I created a thick left border for the heading. After rotating the text using the CSS transform (I used bourbon in my example to cover vendor prefixes) I had to sort out the positioning with transform-origin set to 0, 0. Then I used a margin left to place it in the border space.

See the Pen Sideways Header Rotation by Graham Clark (@Cheesetoast) on CodePen.

The post Sideways Text Header appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/sideways-text-header/feed/ 0
Slide Out Menu with Icon Fonts http://www.cheesetoast.co.uk/css-slide-out-menu-icon-fonts/ http://www.cheesetoast.co.uk/css-slide-out-menu-icon-fonts/#comments Fri, 28 Feb 2014 01:03:59 +0000 http://www.cheesetoast.co.uk/?p=1269 Here's a pure CSS slide out menu I was playing around with on codepen. It uses some (random) font icons that expand to show the wording. Continue reading

The post Slide Out Menu with Icon Fonts appeared first on Cheesetoast.

]]>
Here’s a pure CSS slide out menu I was playing around with on codepen. It uses some (random) font icons that expand to show the wording.

See the Pen Slide Out Nav Menu by Graham Clark (@Cheesetoast) on CodePen.

The post Slide Out Menu with Icon Fonts appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-slide-out-menu-icon-fonts/feed/ 0
Keyframe Transitions for Date/Time Display http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/ http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/#comments Tue, 25 Feb 2014 22:37:26 +0000 http://www.cheesetoast.co.uk/?p=1264 Here's a little keyframe animation I was working on to display the date/time along with the current weather. Continue reading

The post Keyframe Transitions for Date/Time Display appeared first on Cheesetoast.

]]>
Here’s a little keyframe animation I was working on to display the date/time along with the current weather.

See the Pen Date/Time with Weather Animation by Graham Clark (@Cheesetoast) on CodePen.

The post Keyframe Transitions for Date/Time Display appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/keyframe-transitions-datetime-display/feed/ 0
Simple Lightweight Parallax Scrolling Background http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/ http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/#comments Thu, 20 Feb 2014 21:34:51 +0000 http://www.cheesetoast.co.uk/?p=1246 I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I've seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Continue reading

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I’ve seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Parallax scrolling is about making the background image move at a different rate than the foreground image to create the illusion of depth. This is achieved by using javascript to detect the user’s scroll position and dynamically change the background image position accordingly through CSS.


See the Pen Parallax Scrolling Snow by Graham Clark (Cheesetoast) on CodePen

Let’s start with some basic HTML:

<body id="parallax">
  <section>
    <!-- Content goes here -->
  </section>
</body>

CSS (can be applied to divs also):

html {
  background-image: url(background-image.jpg);
}

body {
  background-image: url(transparent-image.png);
  background-repeat: repeat-x; // Optional
}

Javascript:

<script>
var parallax = document.getElementById("parallax");
var speed = -1;

window.onscroll = function() {
  var yOffset = window.pageYOffset;
  parallax.style.backgroundPosition = "0px " + (yOffset / speed) + "px";
}
</script>

Hope you like it!

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/feed/ 0
Adding HTML5 Telephone Numbers http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/ http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/#comments Mon, 20 Jan 2014 21:40:50 +0000 http://www.cheesetoast.co.uk/?p=1240 Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call. Continue reading

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call.

Here’s an example:

<p>Call <a href="tel:+12095551234">555-1234</a></p>

Since your site can be viewed from any location you should include the international dialing prefix.

You can also add a extensions to the number by using a pause:

<p>Call <a href="tel:+12095551234p148">555-1234</a></p>

Tel or Skype

If you’d rather direct users to Skype you can use the callto: attribute like so:

<p>Call <a href="callto:+12095551234">555-1234</a></p>

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/feed/ 0
Pseudo Element CSS Sprites http://www.cheesetoast.co.uk/pseudo-element-css-sprites/ http://www.cheesetoast.co.uk/pseudo-element-css-sprites/#comments Thu, 19 Dec 2013 22:46:58 +0000 http://www.cheesetoast.co.uk/?p=1226 CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better. Ideally, you want to keep decoration separate from the markup and that's where CSS pseudo elements come in, specifically :before and :after.
Now we have a way of combining spiriting with pseudo elements. Continue reading

The post Pseudo Element CSS Sprites appeared first on Cheesetoast.

]]>
CSS sprites are a great way to cut down on page size and increase website performance. It may not always seem like a lot but every bit helps and the less http requests made the better.

If you aren’t sure what CSS Sprites are you can read about what W3 Schools has to say about them.

Sprites are quite often used for things like menu icons or title decoration. The problem is that adding an image or even a <span> element solely for the purpose of adding an icon isn’t exactly very semantic. Ideally, you want to keep decoration separate from the markup and that’s where CSS pseudo elements come in, specifically :before and :after. These pseudo elements can be used to add content to existing markup from the CSS, keeping things clean.

Now we have a way of combining spiriting with pseudo elements. Take this markup for example:

<h2 class="article-heading">Man judo chops off own arm</h2>

If we wanted to add a sprite to the left of the header we would add the following CSS:

.article-heading:before {

   // Set content to blank, otherwise nothing will show.
   content: "";
   // Set the dimensions of the icon
   width: 35px;
   height: 35px;

   float: left; // Float left of the header
   // Use the background offset to select the sprite you want
   background: url(../images/sprite.png) -35px 0 no-repeat;

   // Add some spacing
   margin-right: 10px;

   float: left;
}

You can also use absolute positioning if you want more control over where the sprite ends up:


.article-heading { 
   position: relative;
   padding: 50px;
}

.article-heading:before {

   // Set content to blank, otherwise nothing will show.
   content: "";

   // Set the dimensions of the icon
   width: 35px;
   height: 35px;

   // Use the background offset to select the sprite you want
   background: url(../images/sprite.png) -35px 0 no-repeat;

   // Adjust positioning
   position: absolute;
   left: 15px;
   top: 10px;
}

Here it is on codepen: Pseudo Element CSS Sprites Demo

The post Pseudo Element CSS Sprites appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/pseudo-element-css-sprites/feed/ 2
Slide-In jQuery Effect with CSS3 http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/ http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/#comments Fri, 13 Dec 2013 03:23:25 +0000 http://www.cheesetoast.co.uk/?p=1212 This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen. Continue reading

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
This useful little snippet can be used for making elements slide on from the side of a page as the user scrolls down. It uses jQuery to detect the scrolling point on the page and a CSS3 transition to slide an image in from the right of the screen.

View the demo.

Here’s some simple HTML code that you’d paste below the fold of your page:

<p id="container-paragraph"><img id="trigger_img"src="#"></p>

Here’s the CSS to go with it:

body { width: 800px; } /* This could be any div container */
#container-paragraph { overflow: hidden; } 
/* So that the img is hidden off the side */
.trigger-img {
   position: relative;
   transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out; /* FF */
   -webkit-transition: all 1s ease-in-out; /* Safari & Chrome */
   -o-transition: all 1s ease-in-out; /* Opera */
   left: 1000px; /* More than the width of the body */
}

Now here’s the jQuery code:

$(function() {
   $(window).scroll(function(){
	var distanceTop = $('#container-paragraph').offset().top - windowHeight;

	if  ($(window).scrollTop() > distanceTop){
            $('.trigger_img').css("left", 0);
        }
   });
});

JQuery will slide the image onto the page when you reach the container paragraph. You can adjust the exact point by changing the variable ‘distanceTop’.

It’s tempting to use the jQuery animate function when selecting the trigger_img but typically it’s better to use CSS over jQuery when you can. When jQuery tells the browser to animation something it adds inline styling and increments the values, in this case ‘left’, from 800px to 0. CSS puts the animations in control of the browser, which means better performance.

The post Slide-In jQuery Effect with CSS3 appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/slidein-jquery-effect-css3/feed/ 0
Custom Data Attributes in HTML5 http://www.cheesetoast.co.uk/custom-data-attributes-html5/ http://www.cheesetoast.co.uk/custom-data-attributes-html5/#comments Thu, 14 Nov 2013 18:16:04 +0000 http://www.cheesetoast.co.uk/?p=1203 One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup.
The new data attribute look like this: data-file="stylesheet1"
The attribute must be prefixed with "data-" and should be all lower case.
Read more for an example of the data attribute in action. Continue reading

The post Custom Data Attributes in HTML5 appeared first on Cheesetoast.

]]>
One of the new abilities of HTML5 is that it allows you to add a custom data attribute to your markup. This is useful for when you want to include some metadata in your markup. Previously people could use class names to accomplish this but this isn’t really semantic.

The new data attribute look like this:

<button data-file="stylesheet1">Style 1</button>

The attribute must be prefixed with “data-” and should be all lower case.

Data Attribute in Action

Let’s say you’re using a button to change the style of your entire page by redirecting to a new css file using some javascript code.

<button data-file="stylesheet1">Style 1</button>
<button data-file="stylesheet2">Style 2</button>

Now you can use the following jQuery code to extract the meta data from your new data attribute:

$('button').click(function(){
   var stylesheet = $(this).attr('data-file');
   $('link').attr('href', stylesheet + '.css');
});

For more information on the custom data attribute head on over to HTML5 Doctor.

The post Custom Data Attributes in HTML5 appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-data-attributes-html5/feed/ 0
RSS Not Dead Yet http://www.cheesetoast.co.uk/rss-not-dead-google-reader/ http://www.cheesetoast.co.uk/rss-not-dead-google-reader/#comments Tue, 16 Apr 2013 20:03:41 +0000 http://www.cheesetoast.co.uk/?p=1170 It's been over a month now since Google announced that it was shutting down Google Reader. The closing of the much loved RSS client has caused a lot of ripples in the online community. This post talks about a few of the alternatives to Google Reader. Continue reading

The post RSS Not Dead Yet appeared first on Cheesetoast.

]]>
Now that Google Reader is on the way out is this the end for RSS feeds?

It’s been over a month now since Google announced that it was shutting down Google Reader. The closing of the much loved RSS client has caused a lot of ripples in the online community. Some say this announcement marks the end of RSS feeds and that social networking sites like Facebook, Twitter, and even Google+ have replaced them as a source of syndication. Many who support RSS (myself included) are exploring the alternatives to Google Reader in the hopes that the popularity of RSS doesn’t dwindle any further. There’s also a lot of apathy from people who never saw the value of RSS in the first place.

The announcement that Digg is working on their own RSS reader raises my hopes that there is still life in RSS feeds yet. The Digg team has been gathering a lot of user feedback to learn what people really want from a reader and I’m very excited to see what they come up with.

Feedly RSS Reader App on a mobile device

Feedly RSS Reader App for mobile devices

Another beacon of hope comes from Feedly, whose sexy UI style appeals to those with a taste for aesthetics. It also has excellent app support for mobile devices.

Another alternative that has recently come to my attention is Skimr, a slick and simple RSS reader that displays the title and the first couple of sentences so that you can skim through a heap of feeds quickly. Read more about Skimr at Sitepoint.

Personally I hope that RSS feeds will still be supported for a long time yet. It’s a great way to gather and organize informative articles in one place. It’s important to remind ourselves though, that Really Simple Syndication is still at the heart of social media sites. RSS isn’t dying, it’s just changing the way it’s delivered to us.

Incidentally, if you’d like to get updates of posts from this site sign up to the RSS feed.

The post RSS Not Dead Yet appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/rss-not-dead-google-reader/feed/ 0