Cheesetoast » css3 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.11 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
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
Pure CSS Call To Action Button http://www.cheesetoast.co.uk/css-call-action-button/ http://www.cheesetoast.co.uk/css-call-action-button/#comments Mon, 06 Aug 2012 19:36:29 +0000 http://www.cheesetoast.co.uk/?p=584 Use pure CSS to create an eye catching "call to action" button. The styling combines rounded corners, gradient background, box shadows, and transition animation for a hover effect. Continue reading

The post Pure CSS Call To Action Button appeared first on Cheesetoast.

]]>
"Click This" buttonI’m going to demonstrate how to use CSS to create an eye catching “call to action” button.

First of all we create a basic HTML button:

<a class="call-to-action" href="#">CLICK THIS!</a>

Button - First RoundNext we add the CSS to give the button some padding and add a rounded border. We also get rid of the default color and the underline that comes with anchor links.

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;
...
}

Button - Second RoundNext we’ll add a gradient background to make it look more appealing.

Choose the colour of the button carefully. Different colours have different effects. Try reading this article on Call to Action Buttons and the Psychology of Color for more info.

I used the CSS gradient generator at Colorzilla to get the following code. It’s a lot quicker than coding it by hand and you get to preview it first.

background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

"Click This" buttonLet’s not forget some box shadow to give our button some depth. We’ll give it two box shadows, one of which will be inset:

-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

Finally we’ll add a subtle CSS3 transition animation for when the user hovers over the button. Add this to the class:

-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;

Now we create the hover state:

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here’s the whole thing:

a.call-to-action {
color: rgb(30, 142, 30);
font-weight: bold; 
width: 200px;
padding: 10px 20px;
font-family: arial, sans-serif;
font-size: 25px;
text-decoration: none;
border: 1px solid #C3C3B7;
border-radius: 8px;

/* Background gradient */
background: #f2f2e7;	/* old browsers */	
background: -moz-linear-gradient(top,  #f2f2e7 0%, #c3c3b7 100%);	/* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2e7), color-stop(100%,#c3c3b7));	/* chrome,safari4+ */ 
background: -webkit-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* chrome10+,safari5.1+ */ 
background: -o-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%);	/* opera 11.10+ */ 
background: -ms-linear-gradient(top,  #f2f2e7 0%,#c3c3b7 100%); /* ie10+ */ 
background: linear-gradient(to bottom,  #f2f2e7 0%,#c3c3b7 100%); /* w3c */ 
filter: progid; /* ie6-9 */

/* Box shadow */
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;

/* CSS Transition Anitmation */
-webkit-transition: box-shadow 0.3s linear; 
-khtml-transition: box-shadow 0.3s linear; 
-moz-transition: box-shadow 0.3s linear;  
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}

a.call-to-action:hover {
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 10px, inset rgba(0,0,0,0.15) 0px -10px 10px;
box-shadow:rgba(0,0,0,0.9) 0px 5px 20px, inset rgba(0,0,0,0.15) 0px -10px 10px;
}

Here is the working example:

HOVER OVER ME

I hope this tutorial has been of some use. Please let me know if you have any suggestions on how this can be modified/improved.

Here are some other examples I made of CSS call to action buttons on codepen.

The post Pure CSS Call To Action Button appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-call-action-button/feed/ 2
CSS3 Text Effects http://www.cheesetoast.co.uk/css3-effects-degrade-gracefully-unsupported-browsers/ http://www.cheesetoast.co.uk/css3-effects-degrade-gracefully-unsupported-browsers/#comments Mon, 08 Aug 2011 00:53:15 +0000 http://www.cheesetoast.co.uk/?p=273 Looking for ways to jazz up your website? With new CSS3 techniques it’s easy to add some nifty text effects that can make your site really stand out. What’s great about these effects is that they degrade gracefully; that is to say that, if a browser (in this case, Internet Explorer) does not support the new CSS rules, there is a satisfactory fallback.
Check out the demo of some text-shadows in action. Continue reading

The post CSS3 Text Effects appeared first on Cheesetoast.

]]>
Looking for ways to jazz up your website? With new CSS3 techniques it’s easy to add some nifty text effects that can make your site really stand out. What’s great about these effects is that they degrade gracefully; that is to say that, if a browser (in this case, Internet Explorer) does not support the new CSS rules, there is a satisfactory fallback.

Check out the demo of some text-shadows in action.

Advantages of using CSS text over images

The ability to use CSS text effects is very exciting for a lot of designers out there, who are used to using Photoshop to create header images. Although it can look very appealing to create images to display text, there are some major advantages to using plain text over images:

  • Image files are considerably larger than plain text and take longer to download. Using plain text instead of image headers will decrease your loading times.
  • Plain text will be easily scanned by search engines; images don’t work so well (even with alt tags). This one is important, since headers typically contain important information about site content. Admittedly, however, there is a workaround for using plain text and images together.
  • You can copy and paste plain text. This comes in handy.
  • You can easily convert your website to different formats (e.g. PDF) without loss of structure.
  • Plain text headers can be scaled and re-sized easily without loss to legibility.
  • It can make life easier for those who want to print out your web page (depending on the image).
  • Content can be generated easily and quickly, no Photoshop experience necessary.
  • Content can be dynamically generated (strictly speaking it’s possible to dynamically generate images with text, with PHP for example, but it’s just not practical).

Examples of CSS Text Shadow Effects

CSS text shadows allow you to create your own photoshop style text effects, such as:

Text Shadow

The text shadow property is supported in all major browsers, except Internet Explorer (big surprise).

A basic text shadow is applied like so:

h1 { text-shadow: 2px 2px 3px #666; }

text-shadow properties: horizontal offset (+/-), vertical offset (+/-), blur radius (optional), colour (optional)

Here is what it looks like in action:

CSS3 Text Shadow Effect

It’s also possible to use multiple shadows to spice things up a bit:

text-shadow: 0px 0 1px #BBBBBB, 0 -1px 2px #FFFFFF ,
 0 -3px 2px #FFFFFF , 0 30px 25px rgba(0, 0, 0, 0.796875);

Multiple Text Shadows

Notice how you can use RGBA to describe colours. This way you can make use of the alpha channel to make shadows partially transparent (naturally, transparencies don’t work in IE 8 and below).

Inset / Emboss

These effects are popular in Photoshop. By applying multiple light and dark shadows around the text we’re able to create the illusion that the letters are either inset into the screen or embossed. For this demo I’ve created a div with a gray background (#666). Inside the div is a header with text shadow applied to it.

Here is the CSS code applied to the header:

color: #555;
text-shadow: rgba(0,0,0,0.5) -2px 0, rgba(0,0,0,0.3) 0 -2px,
 rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -2px -2px;

Text Shadow - Inset

As you can see, the text really stands out and looks like a graphic that might have been created in Photoshop.

This is the part, however, where you have to be careful with unsupported browsers (i.e. IE). If you make the text the same colour as the background, relying on the text-shadow for contrast, the text will be invisible in unsupported browsers.

Here is what the same header will look like in IE:

Text Shadow - Unsupported

 Blur

It’s very easy to make blurred text. All you need to do is make the text colour transparent and make the text shadow the colour you want the blurred text to be along with a suitable radius. The problem is when text-shadow is not supported, the text becomes invisible.

Some Blurred Text

color: transparent;
text-shadow: #000 0 0 5px;

Glowing Text

Making glowing text is basically just using bright text on a dark background with a bright text-shadow. The effect turns out quite nicely. Here is one with two text-shadows placed on a div with a black background colour:

Some Glow Text

color:white;
text-shadow:0 0 25px yellow , 0 0 60px yellow ;

Here is the demo if you want to check out the text-shadows in action (provided that you are using a supported browser).

The post CSS3 Text Effects appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css3-effects-degrade-gracefully-unsupported-browsers/feed/ 0
CSS3 Text Background http://www.cheesetoast.co.uk/css3-text-background/ http://www.cheesetoast.co.uk/css3-text-background/#comments Tue, 29 Jun 2010 22:49:39 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=19 The other day I came across an interesting post by Trent Walton that demonstrates good use of CSS3 and its webkit aminations over selectable text. It is accomplished through the use of background clipping, transparent text and webkit animations. If you want to … Continue reading

The post CSS3 Text Background appeared first on Cheesetoast.

]]>

The other day I came across an interesting post by Trent Walton that demonstrates good use of CSS3 and its webkit aminations over selectable text. It is accomplished through the use of background clipping, transparent text and webkit animations.

If you want to learn more about it then you can visit Trent’s website to read more.

 

The post CSS3 Text Background appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css3-text-background/feed/ 0