Initializr - Start an HTML5 Boilerplate project in 15 seconds!
february 2012 by seancron
Generates a custom boilerplate website with a few different frameworks and options to choose from
Bootstrap
Boilerplate
HTML
HTML5
Generator
via:shikakun
february 2012 by seancron
A Periodic Table for HTML
september 2010 by seancron
Josh Duck has put together a fun and useful list of the 104 elements currently in the HTML5 working draft but organized like a periodic table of elements:
When you click on one of the tags more information appears:
Who says chemistry can't be fun?
[via Jackson Harper]
Front_Page
HTML
from google
When you click on one of the tags more information appears:
Who says chemistry can't be fun?
[via Jackson Harper]
september 2010 by seancron
Style Your Site According to the Weather with jQuery
july 2010 by seancron
By pulling in feed from the Yahoo API with jQuery, you can style your website according to the Weather! Find out how by following this step by step guide. We’ll start by creating four backgrounds for sun, rain, snow and cloudy, then use a clever jQuery script to pull in the forecast. To finish things off, we’ll even create a cool manual override, allowing users to switch through the various themes themselves.
I recently put this idea into practice on a site I hashed together for my dog Jake. Jakethelab.com is a Tumblr blog where I post random photos and videos from my iPhone. The theme of the site changes depending on the weather, with Jake being the happiest when it’s sunny and cloudy, and not so much when it’s rainy or snowy. I wasn’t brainy enough to code all the Javascript myself, so some scripts from other talented developers were used alongside a few lines of my own basic jQuery. A few people has asked how it was all done, so here’s a brief overview.
Create the themes
The four themes of the site were put together as large background images. The same layout is used for each, but the overall theme changes to show the four weather conditions of sunny, rainy, snowy and cloudy.
Fetch the weather feed
$(document).ready(function() {
$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w=data.query.results.item;
var class=w.condition.text;
var encodedclass = class.replace(/\s+/g, '-').toLowerCase();
$('body').addClass(encodedclass);
});
});
The script that does all the work by fetching the feed from Yahoo is courtesy of Justin Shearer from Graphically Herding the Masses. Justin’s post takes the API to a more advanced level and creates a complete weather widget. For our site we only need part of the code, and the rest is modified to suit.
With our weather being used as a class on the page body, the condition needed encoding to lower case and the spaces removed. This changed the text from this: Partly Cloudy to this: partly-cloudy. Next, the encodedclass variable was then added as a class to the page body, so the HTML would read <body class="partly-cloudy">, which could then be styled up with CSS.
http://weather.yahooapis.com/forecastrss?p=USNY0996
If you’re using this code on your own site, you’ll want to change the location of the weather feed. The easiest way to find your location code is to head over to Yahoo weather and check the URL of the RSS feed for your particular location.
Write the CSS styles
body.cloudy, body.partly-cloudy, body.mostly-cloudy {
background: #b3c6e4 url(Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
background: #9eacaf url(Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
background: #8cdafe url(Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
background: #889986 url(Snowy.jpg) fixed center bottom no-repeat;
}
With the current weather being injected right into our HTML, we can now write some CSS to make the appropriate changes to the website. Here’s where the list of Condition Codes from Yahoo Weather comes in handy because a bunch of classes are used to render each of the four backgrounds. For instance, a class of sunny, fair or hot will show the sunny background image. We don’t tend to get very many tropical storms in the UK, so just the most common conditions are picked out.
Add a manual override
Unless a user comes back to your website during every weather condition, they may never see your other themes so I figured it would be cool to add a manual override to allow users to toggle through the weather themselves.
<ul id="weather">
<li class="cloudy"><a href="#">Cloudy</a></li>
<li class="sunny"><a href="#">Sunny</a></li>
<li class="rainy"><a href="#">Rainy</a></li>
<li class="snowy"><a href="#">Snowy</a></li>
</ul>
A simple list is laid out in HTML. Each list item contains an anchor which we’ll style up into button style graphics.
ul#weather {
position: absolute; top: 40px; left: 40px;
list-style: none; display: none;
}
ul#weather li {
margin: 0 0 12px 0;
}
ul#weather li a {
display: block; width: 60px;
background: url(weather-icons.png) no-repeat; text-indent: -9999px;
}
ul#weather li.cloudy a {
height: 32px; background-position: 0 0;
}
ul#weather li.sunny a {
height: 63px; background-position: 0 -43px;
}
ul#weather li.rainy a {
height: 50px; background-position: 0 -115px;
}
ul#weather li.snowy a {
height: 48px; background-position: 0 -177px;
}
The buttons are firstly moved into place using absolute positioning. This places them in a fixed position at the top left of the screen. Each anchor is then transformed into a button using CSS image replacement, with each button displaying a simple weather condition icon. Because this feature will only work if the user has Javascript enabled display:none; is used, the buttons will be made visible again by jQuery for those users with JS enabled.
$('ul#weather').show();
$('li.cloudy').click(function() {
$('body').removeClass();
$('body').addClass('cloudy');
return false;
});
$('li.sunny').click(function() {
$('body').removeClass();
$('body').addClass('sunny');
return false;
});
$('li.rainy').click(function() {
$('body').removeClass();
$('body').addClass('rain');
return false;
});
$('li.snowy').click(function() {
$('body').removeClass();
$('body').addClass('snow');
return false;
});
A simple jQuery function is then written for each of the four buttons. When the button is clicked, the current class is removed from the page body and replaced according to whichever button was clicked. return false; disables the default action of the anchor to prevent the page from jumping back to the top.
var name = "#weather";
var menuYloc = null;
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
To finish off the buttons, a nifty piece of code from Nettuts is used to transform the buttons into a floating menu, which slides up and down the page when the user scrolls.
See it in action on jakethelab.com
Articles
coding
css
effects
html
interface
javascript
jquery
techniques
tips
tutorial
weather
web_design
from google
I recently put this idea into practice on a site I hashed together for my dog Jake. Jakethelab.com is a Tumblr blog where I post random photos and videos from my iPhone. The theme of the site changes depending on the weather, with Jake being the happiest when it’s sunny and cloudy, and not so much when it’s rainy or snowy. I wasn’t brainy enough to code all the Javascript myself, so some scripts from other talented developers were used alongside a few lines of my own basic jQuery. A few people has asked how it was all done, so here’s a brief overview.
Create the themes
The four themes of the site were put together as large background images. The same layout is used for each, but the overall theme changes to show the four weather conditions of sunny, rainy, snowy and cloudy.
Fetch the weather feed
$(document).ready(function() {
$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w=data.query.results.item;
var class=w.condition.text;
var encodedclass = class.replace(/\s+/g, '-').toLowerCase();
$('body').addClass(encodedclass);
});
});
The script that does all the work by fetching the feed from Yahoo is courtesy of Justin Shearer from Graphically Herding the Masses. Justin’s post takes the API to a more advanced level and creates a complete weather widget. For our site we only need part of the code, and the rest is modified to suit.
With our weather being used as a class on the page body, the condition needed encoding to lower case and the spaces removed. This changed the text from this: Partly Cloudy to this: partly-cloudy. Next, the encodedclass variable was then added as a class to the page body, so the HTML would read <body class="partly-cloudy">, which could then be styled up with CSS.
http://weather.yahooapis.com/forecastrss?p=USNY0996
If you’re using this code on your own site, you’ll want to change the location of the weather feed. The easiest way to find your location code is to head over to Yahoo weather and check the URL of the RSS feed for your particular location.
Write the CSS styles
body.cloudy, body.partly-cloudy, body.mostly-cloudy {
background: #b3c6e4 url(Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
background: #9eacaf url(Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
background: #8cdafe url(Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
background: #889986 url(Snowy.jpg) fixed center bottom no-repeat;
}
With the current weather being injected right into our HTML, we can now write some CSS to make the appropriate changes to the website. Here’s where the list of Condition Codes from Yahoo Weather comes in handy because a bunch of classes are used to render each of the four backgrounds. For instance, a class of sunny, fair or hot will show the sunny background image. We don’t tend to get very many tropical storms in the UK, so just the most common conditions are picked out.
Add a manual override
Unless a user comes back to your website during every weather condition, they may never see your other themes so I figured it would be cool to add a manual override to allow users to toggle through the weather themselves.
<ul id="weather">
<li class="cloudy"><a href="#">Cloudy</a></li>
<li class="sunny"><a href="#">Sunny</a></li>
<li class="rainy"><a href="#">Rainy</a></li>
<li class="snowy"><a href="#">Snowy</a></li>
</ul>
A simple list is laid out in HTML. Each list item contains an anchor which we’ll style up into button style graphics.
ul#weather {
position: absolute; top: 40px; left: 40px;
list-style: none; display: none;
}
ul#weather li {
margin: 0 0 12px 0;
}
ul#weather li a {
display: block; width: 60px;
background: url(weather-icons.png) no-repeat; text-indent: -9999px;
}
ul#weather li.cloudy a {
height: 32px; background-position: 0 0;
}
ul#weather li.sunny a {
height: 63px; background-position: 0 -43px;
}
ul#weather li.rainy a {
height: 50px; background-position: 0 -115px;
}
ul#weather li.snowy a {
height: 48px; background-position: 0 -177px;
}
The buttons are firstly moved into place using absolute positioning. This places them in a fixed position at the top left of the screen. Each anchor is then transformed into a button using CSS image replacement, with each button displaying a simple weather condition icon. Because this feature will only work if the user has Javascript enabled display:none; is used, the buttons will be made visible again by jQuery for those users with JS enabled.
$('ul#weather').show();
$('li.cloudy').click(function() {
$('body').removeClass();
$('body').addClass('cloudy');
return false;
});
$('li.sunny').click(function() {
$('body').removeClass();
$('body').addClass('sunny');
return false;
});
$('li.rainy').click(function() {
$('body').removeClass();
$('body').addClass('rain');
return false;
});
$('li.snowy').click(function() {
$('body').removeClass();
$('body').addClass('snow');
return false;
});
A simple jQuery function is then written for each of the four buttons. When the button is clicked, the current class is removed from the page body and replaced according to whichever button was clicked. return false; disables the default action of the anchor to prevent the page from jumping back to the top.
var name = "#weather";
var menuYloc = null;
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
To finish off the buttons, a nifty piece of code from Nettuts is used to transform the buttons into a floating menu, which slides up and down the page when the user scrolls.
See it in action on jakethelab.com
july 2010 by seancron
CSS Three — Connecting The Dots
may 2010 by seancron
As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.
Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]
Where do I start?One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.
Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.
Example #1: CSS3 TransitionsA safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.
Start with your link CSS, including the hover state:
a { color: #e83119; }
a:hover { color:#0a99ae; }Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.
a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:
a { -webkit-transition: color .4s ease-out; }View the live example here
The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.
To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:
border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:
border-nav a { -webkit-transition: border .3s ease-out; }View the live example here
ExamplesThis is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:
Team Excellence The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.
Ackernaut Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.
SimpleBits The SimpleBits main navigation transitions over .2 seconds with linear timing.
DesignSwap On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.
Jack Osborne Jack Osborne transitions all of the blue links as well as the post title link on his home page.
Eric E. Anderson Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.
Example #2: Background ClipWhen connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:
<div class="bg-clip">
<h3>kablamo!</h3>
</div>
Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.
.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}View the live example here
This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);
Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.
View the live example here
ExamplesThis is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:
Trent Walton An experiment of my own, combining bg-clip and @font-face to recreate a recent design.
Neography An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.
Everyday Works One of the earliest innovative implementations of CSS text rotation I’ve seen.
Panic Blog The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.
Sam Brown Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.
Example #3: CSS Transforms, Box Shadow and RGBaWhat used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.
Here’s the HTML:
<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>Let’s set up the CSS for the RGBA Shadow:
.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.
RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.
Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:
.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}View the live example here
ExamplesHere are a few additional sites with these properties implemented right now:
Butter Label This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.
Hope 140 Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.
For A Beautiful Web For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.
Simon Collison Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.
Example #4: CSS3 AnimationsIf y[…]
Coding
CSS
css3
HTML
from google
Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]
Where do I start?One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.
Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.
Example #1: CSS3 TransitionsA safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.
Start with your link CSS, including the hover state:
a { color: #e83119; }
a:hover { color:#0a99ae; }Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.
a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:
a { -webkit-transition: color .4s ease-out; }View the live example here
The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.
To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:
border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:
border-nav a { -webkit-transition: border .3s ease-out; }View the live example here
ExamplesThis is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:
Team Excellence The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.
Ackernaut Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.
SimpleBits The SimpleBits main navigation transitions over .2 seconds with linear timing.
DesignSwap On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.
Jack Osborne Jack Osborne transitions all of the blue links as well as the post title link on his home page.
Eric E. Anderson Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.
Example #2: Background ClipWhen connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:
<div class="bg-clip">
<h3>kablamo!</h3>
</div>
Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.
.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}View the live example here
This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);
Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.
View the live example here
ExamplesThis is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:
Trent Walton An experiment of my own, combining bg-clip and @font-face to recreate a recent design.
Neography An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.
Everyday Works One of the earliest innovative implementations of CSS text rotation I’ve seen.
Panic Blog The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.
Sam Brown Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.
Example #3: CSS Transforms, Box Shadow and RGBaWhat used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.
Here’s the HTML:
<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>Let’s set up the CSS for the RGBA Shadow:
.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.
RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.
Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:
.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}View the live example here
ExamplesHere are a few additional sites with these properties implemented right now:
Butter Label This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.
Hope 140 Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.
For A Beautiful Web For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.
Simon Collison Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.
Example #4: CSS3 AnimationsIf y[…]
may 2010 by seancron
Copy this bookmark: