Cheesetoast » CSS 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.10 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
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
Lined Paper with CSS http://www.cheesetoast.co.uk/css-lined-paper/ http://www.cheesetoast.co.uk/css-lined-paper/#comments Thu, 11 Apr 2013 23:06:37 +0000 http://www.cheesetoast.co.uk/?p=1140 Continuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper. Basically we use a repeat CSS3 gradient to create the lines on the page. Read … Continue reading

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
Lined PaperContinuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper.

Basically we use a repeat CSS3 gradient to create the lines on the page. Read more about CSS gradients and stop colours from Dynamicdrive.

View the demo on codepen. Here’s the code:

.page {

/* Setup the basic presentation of the div */
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px 0;
color: #212121;

/* Curl the corners to make it look more like paper */
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;

-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;

border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;

/* Set the background */
background: white;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#333),
color-stop(2%, white)
);

background:
-moz-repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

background:
repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

-webkit-background-size: 100% 40px;

-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

}
p {
padding: 0 100px;
line-height: 40px;
margin-bottom: 40px;
font-size: 30px;
}

Original article on NetTuts.

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-lined-paper/feed/ 0
CSS Paper Stack Effect http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/ http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/#comments Mon, 25 Mar 2013 20:45:28 +0000 http://www.cheesetoast.co.uk/?p=1108 This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes. Continue reading

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes.

Box made to look like a stack of paper notes

View the demo at Codepen.

All we need to do for the HTML is to add a class to a standard div:

<div class="paper-stack">
   <h1>Notes</h1>
   <p>Paragraph</p>
</div>

Now the CSS. To add two extra pages to the box without using additional divs (which is not semantic) we use the pseudo elements :before and :after.

We start with the general styling that applies to all paper sheets.  We give the pages both inset and outset shadows to give the impression of depth:

.paper-stack, .paper-stack:before, .paper-stack:after
{
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1),
                  1px 1px 3px rgba(0,0,0,0.2);
}

Now we’ll get more specific:

.paper-stack

{
position: relative;
width: 200px;
padding: 2em;
margin: 35px auto;
}

/* Setup height, width, rotation, etc. for both underlying papers */
.paper-stack:before, .paper-stack:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(1deg);
-o-transform: rotate(1deg);
transform: rotateZ(1deg);
z-index: -1;
left: 10px;
top: 7px;
}

/* Tweak the lower paper note so that it sticks out further still */
.paper-stack:after
{
-webkit-transform: rotateZ(0.5deg);
-o-transform: rotate(0.5deg);
transform: rotateZ(0.5deg);
left: 5px;
top: 3px;
}

*/ Dress up the header a little */
.paper-stack h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-bottom: 2px solid #ddd;
}

.paper-stack p
{
text-align: left;
margin: 1.5em 0;
}

View the demo at Codepen.

Original article on SitePoint.

I tried playing around with CSS animations to make the pages shuffle out a little on hover but unfortunately the animation effects on pseudo elements like :before and :after are not well supported. For more info visit CSS Tricks – Transitions and Animations on CSS Generated Content.

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/feed/ 1
Add Grayscale to Images on Hover Using CSS http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/ http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/#comments Thu, 14 Feb 2013 01:00:03 +0000 http://www.cheesetoast.co.uk/?p=1057 Here's a useful bit of code for converting images to black and white using CSS. This can be useful when you want to add a grayscale-to-colour hover effect to your images. Continue reading

The post Add Grayscale to Images on Hover Using CSS appeared first on Cheesetoast.

]]>
Here’s a useful bit of code for converting images to black and white using CSS. This can be useful when you want to add a grayscale-to-colour hover effect to your images.

Add the following CSS class to your image elements:

img.grayscale{ 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

The hover effect:

img.grayscale:hover{ 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

See the Pen sfCKa by Graham Clark (@Cheesetoast) on CodePen.

The above CSS code currently works for Chrome and IE. Safari won’t work yet, but version 5.2 (coming soon) should support the filter. Until then the code will degrade gracefully.

To get it working on Firefox we need to use the following SVG layer:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

Here is the complete snippet:

img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

The post Add Grayscale to Images on Hover Using CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/feed/ 6
Custom Scrollbars for Webkit Browsers http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/ http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/#comments Tue, 06 Nov 2012 21:23:56 +0000 http://www.cheesetoast.co.uk/?p=977 Having just learned how to customize the scrollbar on webkit browsers I thought I'd update Cheesetoast with a shiny new scrollbar and share the process. If you're already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars. Continue reading

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
A comparison of the scrollbar with and without webkit

Having just learned from CSS Tricks how to customize the scrollbar on webkit browsers I thought I’d update Cheesetoast with a shiny new scrollbar and share the process.

If you’re already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars.

First I set the dimensions of the scrollbar itself. The width will apply to the vertical bar and the height applies to the horizontal.

::-webkit-scrollbar {
width: 10px;
height: 8px;
}

Next up is the track, the part of of the scrollbar behind the handle. It’s possible to use other webkit features such as box-shadow and border-radius:

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,155,194,0.7);
-webkit-border-radius: 10px;
border-radius: 10px;
}

Finally I setup the “thumb”, the handle part of the scrollbar:

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,155,194,0.5);
-webkit-box-shadow: inset 0 0 3px rgba(0,155,194,0.6);
}

I used the selector :horizontal for this part so that I can style the horizontal bar differently from the vertical bar (you can use :vertical too).

::-webkit-scrollbar-thumb:horizontal {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.9);
}

That’s all there was to it. For more information on webkit scrollbars you can read the webkit blog.

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/feed/ 0
CSS Horizontal Menu Bar with Icons http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/ http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/#comments Fri, 31 Aug 2012 17:36:39 +0000 http://www.cheesetoast.co.uk/?p=673 A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements. Continue reading

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
Example of menu icons for "Home", "Services, "Products"

A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements.

Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

First of all you’ll need some icons. There are loads of great sites to buy premium icons (Picto Foundry, Icon Jar, Glyphicons, & more). There are also a lot of free icon sets out there.

Grab yourself some icons and lets get to work on the code. We’ll start with the HTML for your menu. Here’s an example of a basic horizontal menu bar:

<nav id="main-menu">
     <ul class="nav-bar">
          <li class="nav-button-home"><a href="/">Home</a></li>
          <li class="nav-button-services"><a href="#">Services</a></li>
          <li class="nav-button-products"><a href="#">Products</a></li>
     </ul>
</nav>

Next up comes the CSS. First we create a simple horizontal menu:

#main-menu .nav-bar { list-style:none;}
#main-menu .nav-bar li { display:inline; padding: 0 10px; }

Now we customize the links:

#main-menu .nav-bar li a {
padding-left: 25px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
}

Finally we add the icons.

.nav-bar .nav-button-home a { background:url("images/home.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-services a { background:url("images/services.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-products a { background:url("images/products.gif") no-repeat 0px -2px transparent; }

Do you have any ideas on how create a great looking menu? Post a comment and let me know.

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/feed/ 0