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 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
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
Is Responsive Web Design Important? http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/ http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/#comments Wed, 23 May 2012 16:32:44 +0000 http://www.cheesetoast.co.uk/?p=380 There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick? Continue reading

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/feed/ 2
Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comments Sun, 15 Apr 2012 23:58:48 +0000 http://www.cheesetoast.co.uk/?p=337 Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices. This post will talk about future-proofing websites with responsive design. I'll demonstrate an example of a 3 column front page design, complete with JQuery slideshow.
Continue reading

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns.  Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/feed/ 11
Printing Web Pages with the CSS Media Query http://www.cheesetoast.co.uk/printing-web-pages-with-css/ http://www.cheesetoast.co.uk/printing-web-pages-with-css/#comments Wed, 18 Aug 2010 17:36:32 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=45 Although nowadays it's becoming more acceptable for people to read text from a screen (especially with the release of high resolution e-readers such as the iPad and the Kindle) it's still very important that people have the option of printing a paper copy.
This article will walk through some of the easy steps involved in creating a printer friendly version of your webpages. To see this method in action, take a look at this demo. Continue reading

The post Printing Web Pages with the CSS Media Query appeared first on Cheesetoast.

]]>

Although nowadays it’s becoming more acceptable for people to read text from a screen (especially with the release of high resolution e-readers such as the iPad and the Kindle) it’s still very important that people have the option of printing a paper copy. Most websites, however, don’t prepare their pages to be displayed on paper. This can result in a headache when you discover that the web article you just printed out contains useless navigational menus, graphical advertisements, sentences that disappear off the side of the page and a colored background that just made your printer ink run out.

This article will walk through some of the easy steps involved in creating a printer friendly version of your webpages.

With the CSS media attribute it’s possible to designate separate style sheets for different media types. These types can include screen, handheld (for mobile devices) and print. By writing a printer friendly CSS file you can ensure that your page is optimized for paper based reading.

Here is how you assign a media attribute:

<link href=”/main.css” type=”text/css” media=”all” />
<link href=”/print.css” type=”text/css” media=”print” />

The first line references the main CSS file that is used for normal viewing. Although you can specify the type to “screen”, it is common to set it to “all”. The second line references the “print” media type. It’s useful to note that since the print.css file is linked to after the main.css file, it will override duplicate styles when printing.

The main body

First of all we’ll style the main body. When the text is printed to paper we want it to be easy to read.

Here are the steps we will take to make the main body easier to read on paper:

  • Set the font color to black (studies have shown that black text on a white background offers the optimum contrast for reading).
  • Make sure the font size is large enough (12pt is a good size on paper).
  • Increase line-spacing.
  • User a serif font such as ‘Georgia’ or ‘Times New Roman’ (serif fonts are easier to read on paper).
  • Set the background color to white (although most browsers don’t print the background color, it’s best to be sure).
  • Make the width of the page suitable for paper (this stops the text wandering off the side of the page).

 

Here is the code for that:

body {

color: black;
font: 12pt/20pt “Times New Roman”, “Georgia”, serif;
background-color: white;
width: 7in;

}

Display: none

Let’s assume you’re using a fairly standard page layout that contains a header, menu bar, main content and a footer. When you want to print the page you’ll probably just want the main content, and perhaps the header, to show on the paper. To make sure that the other sections of the page don’t display when you’re printing we use display: none.

#header { display: none; }

The same can be done with any other sections you don’t want to be displayed.

FAQ: What’s the difference between display: none and visibility: none? Visibility will make the element invisible, but it will still take up space on the page. Setting display: none with stop the element from being displayed at all.

If you’ve set background colors for any of the sections then it’s advisable to reset them to white. You should also want to change the dimensions of you sections so that they are relative, rather than fixed. This way they can adapt to the change of styling.

Images

Whether or not to hide images is up to you. If the images don’t really serve any purpose then it might be wise to hide them. You can use the same method as described above to hide the images:

img { display: none; }

If you’re in a position where you want most of the images to be hidden but a select few to show up then you can create a custom class that will override the image styling.

.images { display: block; }

It’s a good idea to apply the same to flash objects too, especially if there is animation involved.

Links

You may or may not want to change the way links are displayed on the paper. If you want to remove the blue coloring and underline then you simply just set a new style for the anchors:

a {

text-decoration: none;
color: #777;

}

Conclusion

Creating a CSS file for print is both easy and worthwhile. Doing so can avoid formatting issues by getting rid of unnecessary navigation, banners and images. Your content will be more concise, easier to read and you’ll save paper.

The post Printing Web Pages with the CSS Media Query appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/printing-web-pages-with-css/feed/ 0
Custom Icons for Lists http://www.cheesetoast.co.uk/custom-icons-for-lists/ http://www.cheesetoast.co.uk/custom-icons-for-lists/#comments Mon, 12 Jul 2010 22:58:00 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=33 Here's a really quick tip for jazzing up your bullet points in unordered lists. Make use of the ability to assign images as your list-style. Continue reading

The post Custom Icons for Lists appeared first on Cheesetoast.

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

Here’s a really quick tip for jazzing up your bullet points in unordered lists. Make use of the ability to assign images as your list-style.

Custom list iconsFirst of all you’ll need a set of icons to use. There are a lot of websites out there that offer free icon sets, such as iconfinder. Alternatively you could make your own. Make sure the icons are a suitable size (I’ve used 15px by 15px icons) and saved them as individual files.

Once you’ve found some suitable icons you can start with the HTML:

<ul>
<li id="home"><a href='#'>Home</a></li>
<li id="articles"><a href='#'>Articles</a></li>
<li id="search"><a href='#'>Search</a></li>
<li id="contact"><a href='#'>Contact</a></li>
</ul>

Each of the list items within the unordered list has a unique ID. Use CSS to associate the icons with each ID:

ul #home { list-style-image: url('/home.png'); }
ul #articles { list-style-image: url('/articles.png'); }
ul #search { list-style-image: url('/search.png'); }
ul #contact { list-style-image: url('/contact.png'); }

It’s that simple! With a bit of extra styling, this method can be used to make some very attractive lists that stand out from the rest.

The post Custom Icons for Lists appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-icons-for-lists/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