Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 11 2013

10:40

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters

css tilt shift

Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.

In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.

Sneak Peek

Want to see what we’re building? Jump ahead and look at the demo, then come back and see how to do this yourself.

Demo: Click here to launch.

css tilt shift

Meet Webkit Filters

Over the past few years, CSS has been ever so slowly taking over the areas that we used to turn to Photoshop for: gradients, rounded corners, shadows, etc. Recently, Webkit took a big leap forward in this area with the introduction of CSS image filters.

What if you could alter the saturation, contrast or even blur of an image using pure CSS? The possibilities would be awesome. Prepare yourself, because you can do exactly that with a quick line of code.

Starter Image

We’ll need an image to show off all of the techniques that we’re going to play with, so I grabbed the New York aerial shot below from photographer Nathan Siemers.

css tilt shift

Brightness

Brightness can either accept a percentage (10%) or a decimal (0.1). Zero equals normal brightness so 5% increases the brightness and -5% actually darkens the image.

/*Brightness*/
-webkit-filter: brightness(-5%);
css tilt shift

Blur

The blur filter accepts a pixel value similar to the blur on a box-shadow. The higher the pixel value, the heavier the blur.

/*Blur*/
-webkit-filter: blur(5px);
css tilt shift

Contrast

Contrast accepts a percentage based value. 100% is normal, anything above that adds contrast, anything below decreases contrast.

/*Contrast*/
-webkit-filter: contrast(130%);
css tilt shift

Grayscale

Grayscale allows you to gradually desaturate an image with percentages. 0% is full color, 100% is grayscale. The example below shows our image at 50%.

/*Grayscale*/
-webkit-filter: grayscale(50%);
css tilt shift

Hue Rotate

Hue rotate allows you to shift the hue through the metaphor of a color wheel. You adjust the rotation in degrees with zero being the normal, non-adjusted value.

/*Hue Rotate*/
-webkit-filter: hue-rotate(30deg);
css tilt shift

Invert

Does exactly what it sounds like it does, accepts a percentage from zero (default) to 100%;

/*Invert*/
-webkit-filter: invert(100%);
css tilt shift

Sepia

Black and white not doing it for you? Add some age with the Sepia filter. Zero percent contains none of the effect, 100% is full power.

/*Sepia*/
-webkit-filter: sepia(100%);
css tilt shift

Browser Support

Currently, there’s not much support for CSS3 filters. According to CanIUse, they should work in Chrome, Safari 6, iOS Safari 6, and Blackberry Browser 10. All of these require the “-webkit” prefix, but to future proof it, you may want to add the others:

-webkit-filter: grayscale(50%);
   -moz-filter: grayscale(50%);
    -ms-filter: grayscale(50%);
     -o-filter: grayscale(50%);
        filter: grayscale(50%);

Step 1: Tilt Shift HTML

Now that we know which CSS filters are available to us, we can begin building our tilt shift demo. To begin, lay out the following HTML in your favorite code editor:

<div class="tiltshift">
  <img src="city.jpg" alt="nyc">
</div>

Basically, just throw the city image that we’ve been using inside of a “tiltshift” div. That’s all the HTML that we need, let’s move onto the CSS.

Step 2: Basic CSS

Now let’s throw down some basic CSS to make the page look nice. We’ll give the background a dark gray color, center the image and give it a basic polaroid effect (drop shadow and thick white border).

body {
  background: #222;
}

img {
  height: 425px;
  width: 640px;
}

.tiltshift {
  background: url(city.jpg);
  height: 425px;
  width: 640px;
  margin: 30px auto;
  border: 10px solid #fff;

  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
          box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}

The most interesting thing happening here is that I applied a redundant background image (it’s the same as the one we inserted via HTML). Basically, this will have the effect of stacking the HTML version of the image on top of the CSS version. This will allow us to manipulate them separately.

Step 3: Blur the Top Image

Now that we’ve got our foundation set, let’s jump back to the image rule to add in a blur and grayscale effect. Use a 2px blur and a 100% grayscale value.

img {
  height: 425px;
  width: 640px;
  -webkit-filter: blur(2px) grayscale(100%);
}

Step 4: Mask Out the Effect

CSS filters are super easy to implement. The trickiest part of pulling off a tilt shift effect isn’t the blur, it’s only blurring part of the image. How do we do this?

Now that our top image is blurred and our bottom one isn’t, we can mask out the portions of the top image that we want to be sharp. This will give the illusion that the image goes from blurry, to sharp and back to blurry. To do this, we need to turn to another -webkit property: mask-image.

img {
  height: 425px;
  width: 640px;
  -webkit-filter: blur(2px) grayscale(100%);
  -webkit-mask-box-image: -webkit-linear-gradient(black 25%, transparent 35%, transparent 65%, black 75%);
}

With mask-image, we can build a gradient that will serve as a mask, just like in Photoshop. The black portions represent where the blurry image is fully visible and the transparent portions represent where the blurry image is invisible, allowing the sharp image to show through.

Given the code above, here’s what the top image will look like:

css tilt shift

Step 5: Make the Bottom Image Grayscale

To finish off, make sure you go back and add the grayscale filter to the bottom image so the two match.

.tiltshift {
  background: url(city.jpg);
  height: 425px;
  width: 640px;
  margin: 30px auto;
  border: 10px solid #fff;

  -webkit-filter: grayscale(100%);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
          box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}

See It In Action

That’s all there is to it! We now have a nice little pure CSS tilt shift effect. Check out the live version in the demo below.

Demo: Click here to launch.

css tilt shift

tiltShift.js

Talented developers Noel Tock and Adam Yanalunas have created an easy to use jQuery plugin that helps you use CSS filters to create a similar tilt shift effect. Download tiltShift.js and give it a shot.

css tilt shift

Conclusion: Why Bother?

Tutorials like this always raise a big question: should we be using Webkit only properties in professional development workflows? The answer is always the same: no. This is an experiment, a fun way to learn about the possibilities for the future of CSS. One day, CSS filters could be a standard feature. For now, they’re just an idea.

The sad thing is that so many developers completely write off things like this until they’ve reached a more official status. As a member of the web development community, you should try out potential new features to see how they’re being implemented and be vocal about your opinion. Even if you feel like you’re an unimportant voice, remember that your opinion does matter and that you’re part of a larger whole that can and does affect the future of the web.

On that note, what do you think of CSS filters? Leave a comment below and let me know. I personally think they’re a blast and could lead to a lot of cool projects. Should all of this really be done with CSS though? You tell me.

Tags: CSS

October 10 2013

06:30

IcoMoon, Fontello and Fontastic.me: Best of Icon Fonts


  

Icons are the best invention since canned beer, at least designers might agree. They are definitely on the rise in popularity. Mobile devices with their comparably small screens boost the use of icons as natural choices for navigation menus in modern web design. New icon sets get created by the hour. Especially mobile design is the trigger for a new breed of icons. These are no longer implemented in the form of individual PNGs or so-called sprites. Icon’s successor is the icon font. Iconfonts have many advantages with the biggest being their free scalability to any size, while at the same time reducing server requests to an absolute minimum. The downside of icon fonts is, that in most cases you will not need the whole font set or – even worse – need icons from different font sets. Font generators have come to deal with both of these problems. Today we’ll take a look at three of the best generators the web has to offer…

Sponsored post
soup-sponsored
20:53

September 23 2013

06:30

How To Create Flat Style Breadcrumb Links with CSS

With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

CSS breadcrumb links

The breadcrumb links we’ll be creating are styled with chevron shapes to support the idea of drilled down content. Previously a background PNG image would be used to create this chevron shape, but with the help of clever border techniques the same effect can be created purely with CSS.

View the CSS breadcrumb links demo

<div id="crumbs">
	<ul>
		<li><a href="#">Breadcrumb</a></li>
	</ul>
</div>

We’ll begin by quickly fleshing out the breadcrumb navigation links as an unordered list. Each breadcrumb link will appear as an <li> with a nested anchor element.

#crumbs ul li a {
	display: block;
	float: left;
	height: 50px;
	background: #3498db;
	text-align: center;
	padding: 30px 40px 0 40px;
	position: relative;
	margin: 0 10px 0 0; 
	
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

The initial CSS code styles up each list item anchor as a neat blue rectangle. The text is positioned centrally within the space and equal padding is added to either side. In order to position elements absolutely later, position: relative; is added so those absolutely positioned objects will display relative to this parent element.

#crumbs ul li a:after {
	content: "";  
	border-top: 40px solid red;
	border-bottom: 40px solid red;
	border-left: 40px solid blue;
	position: absolute; right: -40px; top: 0;
}

We’ll now recreate the chevron effect in CSS that would previously only be achievable with a background image. Use the :after selector to create an extra element that can be styled up individually. The triangle shape is generated through the use of various CSS borders, so as you can see in the initial demo a single blue triangle can be created by applying top and bottom borders to intersect the overlap. These are currently coloured red for demonstration, but making these transparent will produce a single blue triangle. This border effect is then moved into place through absolute positioning.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

The border effect with the correct colour values will produce the desired triangle which gives the breadcrumb link the popular chevron shape.

#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #d4f2ff;
	position: absolute; left: 0; top: 0;
}

Using the same principle another triangle shape can be applied to the left of the breadcrumb link. This time the border colour is set the same as the page background to disguise parts of the blue link background colour.

padding: 30px 40px 0 80px;

This additional triangle before the link affects the appearance of the text, but a simple padding adjustment will quickly rectify its appearance.

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
</div>

As more links are added to the HTML the series of breadcrumbs increases, each separated by the cool chevron shape thanks to the CSS border triangle effect and a touch of right margin.

#crumbs ul li:first-child a {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
	display: none; 
}

#crumbs ul li:last-child a {
	padding-right: 80px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
	display: none; 
}

The full breadcrumb navigation list can be further styled by removing the triangle effect on the first and last items with the help of the :first-child and :last-child selectors, then given subtle rounded corners with border-radius.

CSS breadcrumb links

#crumbs ul li a:hover {
	background: #fa5ba5;
}
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;
	}

All that’s left is to apply a hover effect to the links. Don’t forget to change the border-left-color on the hover state of the triangle effect so the whole breadcrumb link changes colour.

View the CSS breadcrumb links demo

September 16 2013

06:30

August 29 2013

06:30

Building an Interactive Navigation Bar with HTML/CSS


  

A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

August 12 2013

06:30

Getting Started with the Sass Preprocessor

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

	<a class="button">Click Me!</a>

</div>
</body>
</html>

That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button


.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;
}
	

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		$button-colour
		linear-gradient(top, $button-start 20%, $button-stop)
	);
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);
}
	

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
	

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	...
	
	&:hover {
		@include background(
			$button-hover-colour
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		);
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	}
	
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		);
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);
	}
}
	

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;
}
	

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

August 01 2013

06:30

Best of July 2013: 30+ Brand-New HTML/PSD Themes & UI Elements


  

This is the second compilation in our monthly series of brand-new HTML/PSD themes and UI elements. All the works exposed here are fresh resources from the month of July 2013. You will find another big set of ready to use themes, templates and elements for the web as well as completely editable files for your favorite image or vector editor. We got something for everybody…

July 29 2013

06:30

July 22 2013

06:30

July 19 2013

00:13

Pure: What, Why, & How?

This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I’ll guide you through the creation of a simple page in order to highlight how you can use some of the library’s components.


Why Create Responsive Layouts?

Over the past few years in web development, three words that are bouncing around, over and over again are: Responsive Web Design (RWD). At this point you should already know what it is, but, just in case you missed it, here are some resources to fill in the gaps:

But the question is: Why go responsive? The answer is that we don’t have any control over which resolution the next device will be using when they visit our website. No longer can we just display sentences like, “Best viewed at 1024×768 resolution” (although you can still find them on the web). One of the main reasons for this phenomenon was from the growth in the width of PC monitors and also from the spread of mobile devices which are connected to the Internet. Additionally, based on StatCounter, currently ~ 16% of users are connected through a mobile device. Now I’m not saying that RWD is just a matter of optimizing a website for a given screen size, what I mean is that we’re creating a great experience for users visiting our website regardless of the devices they are using.

With that said, it’s also clear that not all of us work for a company where every person has a single role (designer, developer, tester, and so on). So, let’s say that you’re a solo developer, working as a freelancer and you don’t know much about web design. There are a lot of libraries available that can speed up your work-flow. The most complete ones are surely Boostrap and Foundation but sometimes they can be overkill and you may need something smaller. In these instances, a new interesting project has been launched by Yahoo which we can use, called Pure.


What Is Pure?

Citing the Pure website, it is a set of small, responsive CSS modules that you can use in every web project. As said before, the complete library is really light, being only 4.2KB minified and gzipped, but to keep your website even lighter, you can include just some of the available modules. Basically, it’s composed of the following modules:

  • Base
  • Grid
  • Forms
  • Buttons
  • Tables
  • Menus

One of the things I really appreciate about Pure is that it’s based on Normalize.css, a well known library that renders elements more consistently and in line with modern standards and also works in older browsers. Since it’s really small, it doesn’t offer a complete solution to all of your problems, but it has several prebuilt common UI elements that you can find in a lot of websites on the web. Another interesting feature of Pure is that it’s highly extensible and customizable. The authors used SMACSS to build it and all of its classes start with pure-, so you can easily recognize them.

Although Pure is an interesting project to look at, keep in mind that it is really new and might not be a good fit for large projects. In fact, the current version (0.2.0 at the time of this writing) has several issues that you probably wouldn’t find in more mature frameworks and its documentation could also be improved upon. Nonetheless, I liked it and being a precursor, you have the advantage to study and learn Pure, from the very start, which could end up being the next well known project on the web.


Let’s See Pure in Action

They say that an image is worth a thousand words. For us, as developers and designers, a demo that we can play around with is even better. So, to see what Pure can do for us, let’s create a basic demo app. Our demo will consist of a simple Homepage containing some information about myself (sometimes my imagination scares me). The image below shows you what the final result should look like on a large screen:

Final Result on Desktop

And the following image, instead, shows you how it will look on a smartphone:

Final Result on Mobile

Step 1: Create the Horizontal Menu

As I said, Pure has several prebuilt common elements that you can find in a lot of websites on the web. A horizontal menu is surely one of them and will give us the chance to take a look at some of the classes of the menus module.

To create this using HTML5, we usually have a <nav> element wrapping an unordered list that contains the main links of our website. Once the list is created, we have to display it horizontally. To achieve this, we have to apply three classes to the list wrapper (<nav>): .pure-menu, .pure-menu-open, and .pure-menu-horizontal. The first class applies rules that are common to all menus in Pure. The .pure-menu-open class is used to show (instead of hide) the list items, while the .pure-menu-horizontal class is the one responsible for showing the list items on the same line. Please note that by default, the menu isn’t centered.

Now, to enhance the user interface, we should highlight the list item that links to the current page. This is done by applying the .pure-menu-selected class to the <li> element you want to highlight. By doing so, the color of the text will turn from grey to black.

The complete code of our menu is displayed below:

<nav id="main-menu" class="pure-menu pure-menu-open pure-menu-horizontal">
   <ul>
      <li class="pure-menu-selected"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Publications</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
   </ul>
</nav>

Step 2: The Author Description

After the menu, you can see we have an ideal “row” containing on the left side, a photo and on the right side, a small description of me. This “row”, is actually a responsive grid made of two grid units, where the first wraps the photo and occupies 25% of its space, while the second wraps the description and occupies the remaining 75%, as long as the width of the screen is larger than 767px. On the contrary, if the screen’s width is equal to or smaller, the grid units are stacked and occupy 100% of the width available. Please note that the units have a 100% width, so if the elements inside them are smaller in width, they will occupy only part of the unit. To see how this works, try resizing the window and notice how the photo does not consume 100% of the width, while at the same time, the grid units are stacked.

As noted before, Pure has a specific module for managing grids. To declare a responsive grid, you have to apply to the container a class called .pure-g-r. The grid units though, instead, share a similar name, .pure-u-*-*, where the final part of the class specifies how much space the given unit will take up. For example, if you apply to an element the .pure-u-1-4 class, it’ll reserve 25% of the available width, as I did for the photo. Another example could be .pure-u-2-3 which will allow the unit to take up 66.6% of the grid space.

This grid system is really interesting because it can save you a lot of time if you don’t know how to manage float, clear, and other rules to create layouts. In addition, they will save you from all the pain of managing the responsive side of the layout.

With that said, the code that implements the first grid should look like this:

<article id="about-me" class="pure-g-r">
   <h1>Aurelio De Rosa</h1>
   <div class="pure-u-1-4">
      <img src="http://aurelio.audero.it/images/aurelio-de-rosa-2.jpg" alt="Aurelio De Rosa" />
   </div>
   <section class="pure-u-3-4">
      <p>
         I'm an Italian web and app developer who have a bachelor degree in Computer Science and more
         than 5 years' experience programming for the web using HTML5, CSS3, JavaScript and PHP.
         I mainly use the <abbr title="Linux Apache MySql PHP">LAMP</abbr> stack and frameworks like
         <a href="http://jquery.com/" target="_blank">jQuery</a>, <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a> and
         <a href="http://phonegap.com/" target="_blank">Cordova (PhoneGap)</a>. My interests also include web security,
         web accessibility, SEO and <a href="http://wordpress.org/" target="_blank">WordPress</a>.
      </p>
      <p>
         Currently I'm self-employed working with the cited technologies. I'm also a regular blogger for
         several networks (<a href="http://www.sitepoint.com/author/aderosa/" target="_blank">SitePoint</a>,
         <a href="http://mobile.tutsplus.com/author/aurelio-de-rosa/">Tuts+</a> and
         <a href="http://flippinawesome.org/authors/aurelio-de-rosa/" target="_blank">FlippinAwesome</a>)
         where I write articles about the topics I usually work with and more.
      </p>
   </section>
</article>

Step 3: The Information Grid

The second and last grid is split into three equal parts. I created them to show you other components of the library, so you can have a good overview of them. In fact, the first unit has a table, the second has a form, and the third has a vertical menu.

The code below shows you how to split the grid into three parts:

<article class="pure-g-r">
   <div class="pure-u-1-3">
   </div>
   <div class="pure-u-1-3">
   </div>
   <div class="pure-u-1-3">
   </div>
</article>

Now, let’s explore each unit of this responsive grid.


Step 4: A Responsive Table

Another one of the available modules in Pure, is Tables. Like the name says, it contains rules to style a <table> element and its children. By default, tables will have a vertical border applied to visually separate columns. However, you can also add a horizontal border, applying the .pure-table-bordered class or show only the latter using the .pure-table-horizontal class to the <table> element. Additionally, you can also create striped tables to aid the user in reading the data. To achieve this, you have two possibilities. The first will work on browsers that support nth-child and consists of applying the .pure-table-striped class name to the <table> element. The second, instead, works in all the browsers, including Internet Explorer 8 and lower, but it’s more verbose. It consists of adding the .pure-table-odd class name to every other <tr> element. For compatibility reasons, I’ll go for the second approach.

Currently, tables have a problem when viewed on small screens, but it’ll be fixed in the next release. Please note that you won’t see it in the demo because I fixed it. High five for me.

The code that creates the striped table is shown below:

<h3>Funny Price Table</h3>
<table class="pure-table">
   <thead>
      <tr>
         <th>Hours Number</th>
         <th>Price (&euro;)</th>
         <th>Safe (%)</th>
      </tr>
   </thead>
   <tbody>
      <tr class="pure-table-odd">
         <td>1</td>
         <td>30 &euro;</td>
         <td>0%</td>
      </tr>
      <tr>
         <td>5</td>
         <td>135 &euro;</td>
         <td>10%</td>
      </tr>
      <tr class="pure-table-odd">
         <td>10</td>
         <td>255 &euro;</td>
         <td>15%</td>
      </tr>
      <tr>
         <td>20</td>
         <td>480 &euro;</td>
         <td>20%</td>
      </tr>
      <tr class="pure-table-odd">
         <td>50</td>
         <td>1050 &euro;</td>
         <td>30%</td>
      </tr>
   </tbody>
</table>

Step 5: A Stacked Contact Form

Forms are yet another module of the Pure library. It allows you to display your forms in several different types of styles. In this demo, we’ll create a stacked form, where the input elements are below the labels. To do this, we have to add the .pure-form and the .pure-form-stacked classes to the <form> element. Then we have to place both the label and the input tags within a wrapper, where we’ll apply the .pure-control-group class and then put all of these wrappers into a <fieldset> element. The submit and the reset button will have a wrapper as well, but their wrapper will have the class .pure-controls. Please note that for the submit button, we used the class .pure-button-primary to highlight it. The cited class belongs to the Buttons module and is used to change the style of the button, applying a blue color.

Here’s what your form code should look like:

<h3>Contact me</h3>
<form id="contact" name="contact" action="#" method="post" class="pure-form pure-form-aligned">
   <fieldset>
      <div class="pure-control-group">
         <label>Name:</label>
         <input type="text" name="name" placeholder="Name" />
      </div>
      <div class="pure-control-group">
         <label>Email</label>
         <input type="email" name="email" placeholder="Email" />
      </div>
      <div class="pure-control-group">
         <label>Subject</label>
         <input type="text" name="subject" placeholder="Subject" />
      </div>
      <div class="pure-control-group">
         <label>Message:</label>
         <textarea name="message" placeholder="Your message here..."></textarea>
      </div>
      <div class="pure-controls">
         <input type="submit" class="pure-button-primary" value="Submit" />
         <input type="reset" value="Reset" />
      </div>
   </fieldset>
</form>

Step 6: A Vertical Menu With a Header

The final element that you’ll learn how to create, using Pure, will be a vertical menu with a header. A menu of this type is styled with a black border, all around. To use it, we’ll apply to the list wrapper, two of the three classes we’ve already used in the first step, that is .pure-menu and .pure-menu-open. In addition, to create the header, we must add another element and apply to it the .pure-menu-heading class.

The code for this menu is listed below:

<h2>Where to find me</h2>
<div class="pure-menu pure-menu-open">
   <a href="#" class="pure-menu-heading">My profiles</a>
   <ul>
      <li><a href="http://www.twitter.com/AurelioDeRosa">Twitter</a></li>
      <li><a href="http://www.linkedin.com/in/aurelioderosa">LinkedIn</a></li>
      <li><a href="https://github.com/AurelioDeRosa">GitHub</a></li>
      <li><a href="https://plus.google.com/111199469497044249730">Google+</a></li>
   </ul>
</div>

Conclusion

So that completes this introduction to Pure. I hope you enjoyed it. If you’d like to follow the development of Pure, you can visit its repository on GitHub. Feel free to submit issues, issue pull requests, and contribute.

July 11 2013

06:30

Summer 2013: The best HTML/PSD Themes & UI Elements of the Season


  


  

If you develop websites and your environment is not WordPress, you still don’t need to live your online life in visual darkness or hide beneath the sheets. We curated a list of awesome templates layered in HTML and CSS to make your work easier, and with a lot of different grooves to find the appropriate one for your web. Or, if you are you more confortable developing your own theme based on some pre-built elements, here is the inspiration you need to create an awesome theme or application. Starting with the PSDs  and UIs shown below, you can create your own awesome design. Take a look!

June 21 2013

12:15

What the Heck Is CSS Specificity?

screenshot

CSS specificity is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that?

Ultimately, you can only avoid it for so long. Specificity is an essential concept that you need to grasp to be an effective developer. Today I’ll walk you through the concepts of specificity in a simple and easy to understand manner. It’s easier than you think!

The Core Concept of Specificity

Specificity is a funny word, right from the outset it communicates the idea that this is going to be complicated. Fortunately, its bark is bigger than its bite. There’s no reason that you can’t pick most of this stuff up in a few minutes or less.

To break the practical application of specificity down into something that anyone can wrap their mind around, let’s use a familiar metaphor.

Who Would Win in a Fight?

When you were a kid, the world was a much cooler place. If given the opportunity to ask one and only one question to an all knowing entity, you would not have pondered the meaning of life or ventured forth a query about whether or not world peace is attainable, only one thing would matter. If Batman and Spiderman got into a fight, who would win?

screenshot

ScrewAttack writes huge pieces dedicated to pitting heroes against each other.

There’s this innate curiosity in children to constantly compare things and ask which is better. As we grow older, shades of gray replace black and white and we lose this tendency (we nerds are of course an exception). To understand CSS specificity, you should revert to childhood. When given two similar selectors, always ask yourself, “Who would win in a fight?” The answer could prove critical to the way you code.

To see how this works, let’s pit a few selectors against each other and see what happens.

And the Last Shall Be First

For our first battle, let’s pit two essentially identical selectors against each other. How do we know which selector would win?

screenshot

Talk about class warfare. Puns aside, imagine that we had the following setup on our web page:

<!-- HTML -->
<div class="blue box"></div>
/*CSS*/
div {
  height: 200px;
  width: 200px;
}

/*The Battle*/
.blue {
  background-color: blue;
}

.box {
  background-color: red;
}

Here we have an equal matchup. Both classes are applied to the same div with no other complexities to muck up the example. Let’s let them battle it out and see who wins…

screenshot

The box is red! That means the “.box” class won. But why? You probably already know the answer right? It came last. Switch the selectors around and we see the opposite outcome:

screenshot

Here the square is blue because the “.blue” class came last, overriding the “.box” class.

Class Doesn’t Change Who You Are

That last battle wan’t very interesting. The opponents were too equally matched and the outcome was obvious. We haven’t even really scraped the surface of specificity yet. Nevertheless, that was a necessary foundation that needed to be laid.

Now we’ll dive into a battle that’s a little more juicy: ID vs. Class.

screenshot

Our setup here is pretty similar to last time, only instead of two classes, we’ll have one class and one ID:

<!-- HTML -->
<div class="box" id="box"></div>
/*CSS*/
div {
  height: 200px;
  width: 200px;
}

/*The Battle*/
#box {
  background-color: blue;
}

.box {
  background-color: red;
}

Given the rule that we learned last time, you might predict that the class would win in this scenario. Let’s see if that proves true.

screenshot

An upset! Even though the class came after the ID, it still lost. This indicates that IDs are somehow stronger than classes in the battle of specificity.

Pseudo Death Match

Before we jump in to see how all of this works, let’s look at one final example. We’ll ramp up the complexity here so you can begin to appreciate how this knowledge can be applied in a real world situation.

screenshot

Oh snap! I’ll bet this one even trips up some of the experienced readers. Many of us don’t even know the difference between the two, much less which one wins a specificity death match. Let’s get this party started.

<div>
   <h2>h20</h2>
</div>
h2:first-child {
  color: blue;
}

h2::first-line {
  color: red;
}

What’s it going to be? Will the h2 be red or blue? Let’s find out:

screenshot

The pseudo element takes it! The pseudo class didn’t stand a chance. But why? What behind the scenes voodoo is taking place here? How can we be sure of the outcome before we even try it?

Rules of Specificity

Trial and error is a great way to learn, but ultimately there are just too many different possible scenarios to run through to glean all of the information that we should know. What we need is a hard and fast way to decide which selectors the browser places more importance on and why.

It turns out, there are in fact simple rules that govern specificity. In fact, there’s even a handy point system:

screenshot

A given CSS selector can have any number of the pieces of this puzzle. The trick to figuring out specificity is to add them up. The one with the highest score wins. It’s that simple.

Nobody likes math though, so to test the specificity of a selector, we can use the awesome specificity calculator on Keegan Street.

screenshot

With this great tool, we can type in two selectors and a score for each will automatically be calculated. The first selector in the example contains one class, one pseudo-class and two elements (score: 0,0,2,2). The second selector beats it hands down with one ID, one class, one pseudo class and one element (score: 0,1,2,1).

The rule here, as you can see, is that the selector with the highest degree of specificity wins. In other words, more specific selectors trump less specific selectors.

Given our previous example of a class vs. an ID, we can see why the ID wins. Its specificity is far higher than that of the class, so it overrides the class.

Special Rules

Given the specificity calculator, we can figure out most scenarios, but there are a few curve balls that we need to keep in mind.

  • The universal selector (*) is worth 0
  • When two selectors have the same specificity, the last one wins
  • Elements can never beat a class selector, even if you pile them on
  • !important is Superman, it can beat up almost anything

The last one here is the most interesting one, so let’s take a look at an example. Here’s some HTML and CSS to consider:

<!-- We'll use this to test the effects of important -->

<h2 class="header">Some Headline</h2>
h2 {
  color: blue;  
}

.header {
  color: red;  
}

Simple enough, right? Using our point system, the class scores higher than the element, so the headline will come out red. But what if we toss Superman into the scenario?

h2 {
  color: blue !important;  
}

.header {
  color: red;  
}

Now we’ve rigged the fight. In this case, the headline actually comes out blue! The !important rule says, “screw you specificity” and does what it wants.

Less is More

Now that you understand specificity, you’ll be able to manipulate your CSS to do a lot of crazy things. Just remember that with great power comes great responsibility.

In CSS, the general rule is that less is more. The shorter your rules, the better. Never use .list ul > li > a when li a will work just fine. Shorter selectors are more efficient and easier to read. Sometimes you have to get fancy, but let that be the exception, not the rule.

A Puzzle to Solve

Wait a dang second. The rules were supposed to explain the results that we received in our initial tests, weren’t they? So what about this one?

screenshot

As far as I understand the rules, a pseudo class beats a pseudo element, so why does the pseudo element win here? Maybe we’re wrong about which is the pseudo element, let’s check our chart.

screenshot

Nope. We were right about first-child being the pseudo class versus first-line, the pseudo element. Maybe we’re calculating it wrong? Let’s consult the calculator:

screenshot

As far as the calculator is concerned, the headline should be blue because first-child beats first-line. But that’s not how it works in the browser. What gives? Maybe our calculator is broken, let’s try another one.

screenshot

According to this one too, first-child should have a higher specificity value and should therefore win… but it doesn’t. I’ve tried using the single colon syntax, switching the order; nothing works. The pseudo element always wins, no matter what I throw at it.

body {color: blue;}
h2 {color: blue;}
div h2:first-child {color: blue;}
h2:first-child {color: blue;}
.someClass {color: blue}

/*Wins Every Time*/
h2::first-line {color: red;}

This is where it really gets nuts, even if I toss in an inline style element, which should beat almost anything, the dang thing still comes up red!

<!-- Even this doesn't work! -->
<h2 style="color: blue;">h20</h2>

Conceptually, this almost makes sense. Our pseudo class is targeting the entire h2 element while our pseudo element is targeting only the first line of that element, which seems more specific.

Your Explanation Here

To be blatantly honest, I’m a little baffled here. For the most part, specificity is pretty straightforward, but I can’t seem to wrap my mind around this one. My instinct is that it’s perhaps some sort of inheritance issue, but I’m not sure. It might also be something similar to :not() which has special significance in regard to specificity (only the items in the parentheses count, by itself it’s a zero).

In response to our little puzzle, here are some helpful answers from readers!

Tim Pietrusky
“According to the spec only another element wrapping the content of the first line is more specific than the first-line pseudo-element.” – CodePen Demo

Thomas
“Think of first-line as an additional Element (like span) inside of the headline, wrapping only the first line, so its target is an element inside of the h2, like <h2><span>first line</span> second line</h2> The background-color of the h2 would only be used (inheritted) if no value would be declared for ::first-line”

Further Reading

There have already been a lot of great articles published on specificity, here are a few:

Conclusion

As we just saw, CSS specificity is super simple, except when it’s super complex… You can and should learn the basics so that you can avoid any unexpected results, but when it comes down to it, some good old fashion trial and error might be necessary if you come across a sticky situation.

What do you think? Do you understand specificity as much as you should? Can you explain the puzzling scenario that we ran into above?

Tags: CSS

June 06 2013

14:00

Building CSS3 Notification Boxes With Fade Animations

featured preview css3 notification alerts windows fading effect

Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.

For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.

Live DemoDownload Source Code

Building the Page

To get started, we need to make two files named “index.html” and “style.css”. I will be including a reference to the latest jQuery library hosted by Google’s code CDN. The HTML is fairly straightforward since we just need to create some dummy text within an alert box. And all of the JavaScript has been added into the bottom of the page to save on HTTP requests.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Notification Boxes Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

This is my header code for setting the external documents and the HTML5 doctype. Not very convoluted since we are just building a sample demo. For the notification windows I have setup two different styles – success and error. There are other design styles like warnings and info boxes, however I did not create alternate styles because I wanted to focus more on the effects.

<div id="content">
  <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
  <div class="notify successbox">
    <h1>Success!</h1>
    <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
    <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  </div>
  
  <div class="notify errorbox">
    <h1>Warning!</h1>
    <span class="alerticon"><img src="images/error.png" alt="error" /></span>
    <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  </div>
  
  <p>Click the error boxes to dismiss with a fading effect.</p>
  
  <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
  
  <div class="btns clearfix">
    <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
    <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
  </div>
</div><!-- @end #content -->

Each icon image was created from this freebie PSD of flat elements and UI pieces. The icons were vector shapes which I scaled and resized to fit as a checkmark and X error button. If you need a warning/info icon it shouldn’t be hard to update the colors and create your own. The generic class .notify is added onto each of the message boxes. This will generate the box shadow and internal font styles.

Then additional classes such as .successbox and .errorbox allow us to change colors and details within the alert window. You can see this in my demo where the page loads with two existing alert messages. Each of the buttons at the bottom may be clicked to append a new alert box at the top of the page.

CSS Box Styles

I won’t go into too much detail on the CSS resets which are typical in all my other tutorials. I have created a default batch of typography and also centered the wrapper element with an inner #content div. This creates the box area which allows jQuery to append new warning elements at the very top of the page.

/** typography **/
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {    
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {    
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}


/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.flatbtn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #f9f8ed;
  text-decoration: none;
  background-color: #b6a742;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  font-weight: bold;
  padding: 12px 22px 12px 22px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
  color: #fff;
  background-color: #c4b237;
}
.flatbtn:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

The website layout is quite simple to keep the effects noticeable. Anybody who is familiar with frontend web development should be able to port over these classes into their own stylesheet. I am using a unique style for the flat buttons to generate new alert box windows. Similarly I have updated the internal styles for each of the .notify class elements.

/** notifications **/
.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }

.notify .alerticon { 
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

I setup a few default assumptions which work best in my sample layout. Each of the message notifications are limited to a 400px width and centered on the page using margin: 0 auto. Also I have updated the cursor icon to a pointer hand so that users know the entire element is clickable. We need to create a jQuery event listener which performs a function whenever the user clicks to dismiss a notification.

jQuery Animation

My JS codes actually perform two distinct operations. First we are detecting any existing .notify elements which are contained inside the #content div. Once a user clicks on this .notify box we need to fade the box down to 0% opacity with display: none, and then remove() the element out of the DOM altogether.

$(function(){
  $('#content').on('click', '.notify', function(){
    $(this).fadeOut(350, function(){
      $(this).remove(); // after fadeout remove from DOM
    });
  });

If you are familiar with jQuery then this selector may appear strange at first. We are not selecting the #content div but actually looking for any .notify boxes within the content container. If you check out the documentation for jQuery’s .on() method you will notice we have the ability to pass another selector as the 2nd parameter which will update after the page has been rendered. Here is an excellent thread on Stack Overflow which explains this concept in greater detail.

The other piece of my script will check whenever a user clicks on either of the two buttons at the bottom of the page. These buttons are using the IDs #newSuccessBox and #newAlertBox. Whenever the user clicks we stop the default action of loading the HREF value and instead create a new HTML block to prepend onto the page.

  // handle the additional windows
  $('#newSuccessBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
  $('#newAlertBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
});

Each function has its own variable containing a copy/paste mirror of the HTML I used for the box items. This HTML content is stored inside a string using the jQuery selector as an object. I can use the method prependTo() and select the content div so the new alert boxes will appear at the very top of the page. All of the new boxes may also be dismissed in the same fashion since their HTML codes are identical to the boxes which are hard-coded in static HTML.

css3 notification alert windows messages jquery tutorial

Live DemoDownload Source Code

Tags: CSS

May 21 2013

19:07

11 Useful And Free CSS UI Kits

We have previously presented many user interface (UI) kits for our designers fellows but rarely have compiled UI kits that have been exclusively built with CSS. This is something that many designers are looking for. So, look no further as here we are presenting 11 free CSS UI Kits for you. All of these 11 UI kits have been coded with CSS and contain a wide range of common web UI elements. These UI kits and more precisely the common web UI elements are the resources that you will need to build your own wireframe. We hope that you will find this collection useful for you.

Here is the full list after the small jump. We hope that you like this collection. Feel free to download as many as you like. Also, let us know what you think about this compilation. Your comments are always more than welcome. Enjoy!

CSS User Interface UI Kit

Gumby Framework provides huge buttons, navigation and other CSS UI kits which are easy to implement.

Ui.css

ui.css is a tool for creating clean user interfaces for the web. The download includes a css file with styles for all the elements, including :hover and :active states.

Designer CSS UI Kit

This UI kit has been designed and hand-coded from scratch in HTML5 taking advantage of modern CSS3 techniques, it includes a range of common user interface elements and font stacks, which look beautiful in modern browsers and degrade gracefully in Internet Explorer.

CSS3 UI Kit

Here is fully coded CSS3 UI Kit. This includes everything from a search box, checkboxes, radio buttons, and more! Everything is code.

Icon Deposit CSS3 UI Kit (PSD+CSS)

This CSS3 UI Kit includes everything from GUI switches and buttons, to radio buttons and checkboxes. I also included the Photoshop PSD file for those who want to edit the design or make the images bigger.

All CSS UI-kits

This set includes web CSS UI elements that works in both bright and dark enviroments.

Pure CSS UI Kit

Massive CSS3 UI Kit

A huge assortment of UI elements made in nearly only CSS. Only one image (the arrow of the dropdown), no javascript, no extra markup.

Metro UI CSS

Metro UI CSS a set of styles to create a site with an interface similar to Windows 8 Metro UI. This set of styles was developed as a self-contained solution.

CSS Grid UI Set

Futurico UI HTML

Futurico UI HTML is written using the SASS preprocessor. If you are not familiar with SASS you can use the CSS version instead

 

May 13 2013

07:00

April 23 2013

15:28

Efficiency and Economy: Responsive Design On a Budget


  
Budget-Responsive-550px

The word 'budget' is deemed in some quarters to be a dirty word with negative connotations suggesting shortcuts, unreliability and even lower quality. You’ll be pleased to hear the approach I’m suggesting doesn’t manifest in any of those shortcomings and in fact the 'budget' approach could actually improve the end product. That’s right, streamlining your design and build processes to produce cost effective responsive solutions might actually be the best thing that ever happened to you.

April 22 2013

15:14

11 Useful CSS Tools To Speed Up Your Design Process

Here we are presenting 11 extremely useful CSS tools that will help you quicken your design process. CSS is the most popular and most widely used programming language that has been used for the website development. This is mainly because CSS is relatively easy to learn as compared to other programming languages. Another reason is the vast variety of CSS tools that are available online to help you quicken your design process and save your time.

So without any further ado, here we present the list of 11 very useful CSS tools that will save your time and will allow you complete your work quickly. Check this out and get as much as you like!

CSS Menu Maker

CSS Menu Maker makes it easy to create custom CSS drop down menus without having to know all the complicated code.

CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

CSS3 3D Transforms

CSS 3D Transforms are increasingly supported in current browsers as of late 2011. They are however still experimental, and require vendor specific prefixes in all browsers.

Prefixr

Cross-Browser CSS in Seconds!

IE6 CSS Fixer

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Quick Form Builder

Accessify’s quick form builder merges two older tools (form builder and form element generator) into one much slicker process. There are three steps: Enter the fields that you want to capture in the form 1) Define what each field type is (text, password, textarea etc), 2) Choose some markup options (HTML, XHTML and so on), 3) Seconds later you have a fully accessible and valid form. There’s even some CSS to help you style the form.

Layer Styles

Just like your favorite graphics editor but in your browser, and it creates CSS.

Sencha Animator

Sencha Animator Create Mobile CSS3 Animations with Ease.

Patternify

A CSS Pattern Generator.

CSS Text Shadow

CSS text shadow generator is an amazing free tool to create css text shadow effects, try it now!

Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

02:30

34 Free Open Source CSS Code Snippets for Developers

Advertise here with BSA


With a quick Google search you will find a ton of handy CSS2/CSS3 code snippets. But what about pre-built CSS web interfaces? There are some cool widgets and samples out there, but it can be difficult finding great high-quality releases. I think developers really treasure open source codes for the fact that it saves a lot of time putting together more complicated websites.

In this showcase gallery I have organized 34 outstanding and free CSS code snippets. All of these examples provide some type of website interface element such as forms, buttons, tables, switches, pagination, and other common items. Be sure to check out the gallery listing to get a better idea of what you may be able to use in your own website(s). All items are provided by CSSFlow which you can download for free and include on any number of projects.

Glossy Buttons

bright css3 glossy buttons

Facebook Login Form

css html website login form effects input

Dark Datepicker

dark website interface date picker ui

Pricing Table

css3 html5 pricing table buttons freebie

Social Buttons

css3 social media buttons designs

Notification Windows

css3 warning windows html5 open source

Dark and Light Dropdowns

select menu lists input form dark light ui

Newsletter Signup Form

newsletter signup subscribe box effect

Dark Pagination

dark pagination ui effects website

Settings Panel

mac osx settings input panel css3 open source

Multi-colored Buttons

shiny multi-colored buttons css3 html5

Notification Badges

small css3 icons badges notify ios navigation freebie

Flip-Down Clock

static css3 clock paper effects rolodex

Share Buttons

social media sharing buttons freebie open source

Modal Contact Form

bright modal contact form input effects css3

Notepaper Blockquote

css3 notepaper block quote effect

Toggle Switches

pure css3 user input toggle switches open source

Metal Progress Bar

metal progress bar ui html5 css3 freebie

OSX-Style Window

transparent mac osx window made using css3 html5

Search Dropdown

search input dropdown menu suggested open source

Mini Social App

mini twitter social app ui interface css3 freebie

Month Picker

css3 generated input freebie month selection

Animated Progress Bar

css3 animated progress bar interface ui

Inset Side Navigation

inset side navigation effects freebie open source

Login Form

cssflow freebie snippet login form css3 html5 download

Dark Navigation

horizontal dark navigation tabs menu links

Light Horizontal Nav

light horizontal navigation bar tabs links freebie open source

Dark Horizontal Nav

dark block buttons navigation links css3 html5

Animated Profile Popover

user profile features popover hover effects open source

3D Buttons

html css3 3-d buttons freebie download codes

Sliding Tags

sliding blog tags posts count number jquery css3

Accordion Menu

vertical html5 css3 accordion menu interface design

Tabbed Navigation

css3 tabbed navigation toolbar effects design

Mini Dropdown Menu

dark dropdown menu css3 mini effects ui


Advertise here with BSA

April 15 2013

17:45

CSS Architectures #1: Principles of Code Cleanup and the New Best Practices


  
Box-Models in Real Life Can Come Over Complicated, too

All too often, the CSS for major (and minor) websites is a textbook case of code bloat and redundancy, with lines of code that boast unnecessary use of qualifier elements, overly specific selectors from unnecessarily long selector chains, overdependence on descendent selectors when other selectors would be more appropriate, and the inappropriate or unnecessary use of !important. We'll show you better ways in the following article...

April 08 2013

07:00
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...