Cibgraphic Design Studio Blog

Responsive Calculator and Other Projects

2012-11-30T17:57:04Z

It has been a long time since I have posted an update so I thought I would do that. I haven’t been ignoring the site (or clients for that matter), but have been hard at work. When not dealing with clients (you guys come first always), I have been working on some tools to help web developers make their job a little easier.

I would like to talk a little about them one by one so you can get a better glimpse of what these tools do. All of these projects are currently available at my projects page and they are 100% free. If you would like to make a donation to help me out, I wouldn’t say no.

Vanilla5

The first one is my major project Vanilla5. This has gained a lot of traction in the last 6 months but it is still widely unknown. I am currently looking for venues to promote it. That said, it is by no means a project that doesn’t deserve mentioning. Its not only a project that I develop, but one that I use on a daily basis. Currently the project sits at version 1.3. It has a lot of features while remaining lightweight (hence the “vanilla” name). It has two different flavors both raw HTML5/CSS and Wordpress. It also has LESS files included into it with some great mixins to help especially with CSS3.

View project

Responsive Calculator

This is a new project of mine. The first of two new projects. This app is based on Adobe Air (so it will work on both Windows and Mac OSX) and is basically a calculator to help with responsive designs. It will do some basic math and convert the answer into either a percent or em. When it produces an answer it will also provide a css comment so you can keep track of what the equation was. It is a really helpful tool and one that I am proud of.

View project

jViewport

My other new project. This is a jQuery plugin that basically displays the current viewport of what ever website you include it onto. No CSS files are included and all styling is done within the plugin. This makes integration really easy. Options are available to change this up so it can match your site (not that you should use this on a production site anyway). As an added bonus it will tell you what major mobile device the current viewport is within range of. No guessing. Really nice.

View project

Useful LESS Parametric Mixins

2012-09-12T20:32:56Z

Unless you are a web developer who has been hiding under a rock, you might have heard of LESS. LESS is for dynamic style sheets. In other words, its really cool. You can learn more about LESS by visiting their webpage http://lesscss.org/

In this article, Im not going to go over how to use it. That is a job best left to the official documentation. Instead I am going to give you some really useful parametric mixins for some CSS3. In short, stop writing your CSS3 with all the vender prefixes, and let LESS take care of that instead. This list is already included in my Vanilla5 project, but if you are not using it (you really should) you can easily add it to your next LESS project.

Border Radius - all side equal

/* Border Radius - All Equal */
.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
} 

Border Radius - different sides

/* Border Radius - Custom Sides */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  -ms-border-radius: @topleft @topright @bottomright @bottomleft;
  -o-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
} 

Box Shadow

/* Box Shadow */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -ms-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -o-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
} 

Inner Shadow

/* Inner Shadow */
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -ms-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -o-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
} 

Animation

/* Animation */
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  -webkit-animation: @name @duration @delay @ease;
  -moz-animation: @name @duration @delay @ease;
  -ms-animation: @name @duration @delay @ease;
} 

Transition

/* Transition */
.transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
} 

Linear Gradient

/* Linear Gradient */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
} 

Quick Gradient - applies full transparent to 20% Opaque to any background color

/* Quick Gradient - needs background color */
.quick-gradient (@origin: left, @alpha: 0.2) {
  background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
} 

Webkit Reflection

/* Webkit Reflection */
.reflect (@length: 50%, @opacity: 0.2){
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
} 

Table Zebra Stripes

/* Table Zebra Stripe */
.zebra-stripe(@stripe_color: #F0F0F0) {
  tbody tr:nth-child(2n+1) { background: @stripe_color; }
} 

Opacity

/* Opacity */
.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
  -moz-opacity: @opacity;
  opacity: @opacity;
} 

Opacity for IE6 and IE7

/* Opacity IE6-7 - Use with Opacity Mixin */
.transparent (@opacityIE: 0.5) {
  zoom: 1;
  filter: alpha(opacity=@opacityIE);
  opacity: @opacityIE;
} 

Kitchen Sink

/*
-----------------------------------------
Useful LESS Mixins
-----------------------------------------
*/

/* Border Radius - All Equal */
.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

/* Border Radius - Custom Sides */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  -ms-border-radius: @topleft @topright @bottomright @bottomleft;
  -o-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
}

/* Box Shadow */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -ms-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -o-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

/* Inner Shadow */
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -ms-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -o-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

/* Animation */
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  -webkit-animation: @name @duration @delay @ease;
  -moz-animation: @name @duration @delay @ease;
  -ms-animation: @name @duration @delay @ease;
}

/* Transition */
.transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}

/* Linear Gradient */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}

/* Quick Gradient - needs background color */
.quick-gradient (@origin: left, @alpha: 0.2) {
  background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

/* Webkit Reflection */
.reflect (@length: 50%, @opacity: 0.2){
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

/* Table Zebra Stripe */
.zebra-stripe(@stripe_color: #F0F0F0) {
  tbody tr:nth-child(2n+1) { background: @stripe_color; }
}

/* Opacity */
.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
  -moz-opacity: @opacity;
  opacity: @opacity;
}

/* Opacity IE6-7 - Use with Opacity Mixin */
.transparent (@opacityIE: 0.5) {
  zoom: 1;
  filter: alpha(opacity=@opacityIE);
  opacity: @opacityIE;
} 

Purpose of Design

2012-03-06T18:45:27Z

I have been a designer for about 8 years now. I have seen a lot of trends come and go. The latest one I have noticed has me concerned. New designers lack a fundamental knowledge of design principles. What are those principles? Things like color theory, typography, symmetry, rhythm, proportion, dominance, unity, and many others.

New designers today seem preoccupied with the latest and greatest in technology and seek to quickly add it to their next project. I don’t know how many times I have seen designers/developers have slapped a lightbox plugin to their webpage because they don’t want to go through the effort of figuring out a layout that would more correctly accommodate their needs.

So what is design? Quite simply it is a graphical means to portray a message or idea. But is it really that simple? I think so. What about the tired saying ‘Art for Art’s sake’. That’s fine… but it isn’t design. Thats art.

So how can we have purpose in our designs? I will go through a couple of questions that a designer should be asking him/herself every time they start the design process. Without asking these questions, you are just shooting in the dark and hope to get a ‘pretty picture’ instead of a design that works for its intended purpose.

What is the message or idea that is trying to be conveyed?

This is arguably the most important one. If you don’t know why the design needs to be made, why is it being made in the first place. Once you have a purpose for the design, you can start to work out what elements are needed to make that message come across.

What colors/type is appropriate for the design?

Far too many times have I seen designers turn away fonts that were a perfect fit for a project because they were popular or deemed overused by the design community. They usually use the age old term ‘think outside the box’ as a reason to exclude fonts. Why is this? Would you turn away a perfect car because your buddy down the street drives one too?

Colors are a little harder to nail down. There are some pretty good tools out there such as Adobe’s Kuler and Colourlovers, but for the most part I find it hard pressed to find a designer who can say what a Tertiary color scheme is (without looking it up). Knowing how color works and how to use it properly can add purpose and intent to your designs.

Where is the message/idea going to be delivered, and to whom?

This is one that is often missed by designers. You need to take your audience into consideration. Are they old? Young? Men? Women? Mix? What are their ideals, faiths, way of thinking. Knowing as much about them as you can will help you make decisions about what direction your design should go.

I live in Utah. As most people know we have a high population of people who belong to the Church of Jesus Christ of Latter Day Saints (Others know us as LDS or Mormons). If I was designing a billboard for use in downtown Salt Lake City, I would not have a woman on there in a bikini in some sensual pose? Why? Because LDS folk tend to hold to high standards and distance themselves from crude and obscene images and language. A billboard like that would not go over well and would be a huge disservice for the client trying to get customers. Knowing your audience is key into figuring out what should be put into the design.

Where the message is going to be display is another key factor. Is it going to be a billboard, or on a tiny pass along? Are viewers going to have 10 minutes to stare at the design, or just a few seconds. I saw a design for a billboard that a designer was making to celebrate a birthday of his daughter (wish I had that kind of cash). Since the billboard would be on a freeway no where close to where they lived they would be forced to drive by it only getting a couple seconds to admire the artwork. Having seen this artwork before it got printed I talked to the designer about how a lot of the elements used in the design were way too small and were not going to be easily seeable from the freeway if they were to be seen at all. The designer agreed and changed the design. My point is, is that it should’t have been like that in the first place. the elements were way to small a seasoned designer would of (and in this case did - me) see this right away.

I have a saying which I try to hold to every design that I make:

PRETTY + SMART: It takes more than good looks to make a design effective

Designers today seem to focus too much on the pretty, but not the smart.

For example, I reviewed a webpage the other day where the designer spent tons of time working on the graphics/coding/animation of his website. Despite ‘looking good’, the webpage did not work because the design was not smart. It forced the user to click 4 times to get to any content. And not only that, the menus jumped around making it hard to know where in the site he was since the whole site was loaded via AJAX in one page. Even entering the site was confusing. All there was, was a simple link (which did not look like a link) which said “My name is …” and then an arrow about 400px to the right of it. There was now clues to the user that the text was a link that they had to click on to enter the rest of the site. Despite quality graphics and smooth animations, the design just did not work because it was not smart.

There is something to be said of going back to basics. Does the design work? Does it have purpose or does it just ‘look good’.

Adobe Distiller

2011-11-20T16:21:12Z

Adobe Acrobat Distiller is a very powerful program that few designers seem to take advantage of. In this tutorial I will show you some reasons to use Distiller and some useful features. Before you can learn how to use it, you must learn what it is. Adobe Acrobat Distiller is a tool that turns postscript files into PDF files. Now why use Distiller instead of just exporting a PDF from Adobe InDesign or another Adobe program? Many reasons. Lets get into it.

Ironically, you may have used it without you even knowing. Ever made a PDF from the print dialog box from MS Word or another non-Adobe application? That uses Distiller to make the PDF. But aside from that Distiller is really gets into its own by be able to convert multiple files at one time from a PS file (thats PostScript not Photoshop). Say you are working on a project for a client that requires multiple InDesign files, lets say 15. The client wanted PDF that were compatible with Acrobat 7 and higher, CMYK color, and highest quality possible. Typically a designer would just export these right from InDesign. The problem arises that, say the client wanted to make it compatible with Acrobat 5 and higher, RGB color, and a lesser quality in order to put it on the internet. The designer would have to go back in and export out all of the files by hand again. Complete waste of time.

Now lets say that the designer has some foresight and instead of creating PDFs from the InDesign files he exported out PS files (again thats PostScript) from the print dialog box (instead of your printer, choose PostScript). Once the client makes the change, he would just have to run the PostScript files though distiller and it would create the PDFs with the exact settings that he needed. No need to open up InDesign at all or export anything by hand. It’s all run in batch (or in other words, in groups). That saved the designer at least a half hour if not more, especially if the client requests more PDFs.

One of the coolest features of Distiller is the ability to set up watch folders. Watch folders will automatically look for PS files and convert them on the fly. This is helpful if you are constantly creating PDFs from PS files. Just as simple as drag and drop. We are going to learn how to do this.

In Distiller in the menu system go to Settings - Watch Locations.

After the dialog pops up, click Add Folder. You will want to have set up a folder in advanced of where you want to drop your PS files. Each folder can have it’s own PDF settings which can make it nice if you need to do multiple PDF settings. After selecting the folder you can edit the folder output settings by clicking Edit Settings. Once you are done with the settings click ok. Your watch folder is now set and ready to go. Distiller will automatically create 2 folders for you. One called In and the other Out. I don’t think I need to explain what these do. To process a PS file into a PDF just drag and drop a PS file into the In folder. It will automatically be processed for you. No exporting it by hand.

Distiller is a really powerful tool that can work with you to make your workflow easier and faster. It may not be right in all situations and it is up to you to correctly utilize the tool but one thing is for sure; it is a very under used tool.

Realistic Box Shadows

2011-11-11T17:14:11Z

With all the cool things you can do with CSS3, probably the most used would have to be the box-shadow property. No longer do you have to use images to put a simple shadow on an element. Most don’t go beyond the simple drop shadow for things like containers and pictures. In today’s tutorial we are going to use some more CSS3 properties to create a more advanced shadow. To set the record right, I know that the shadow being used isn’t a likely shadow to occur in nature, but for tutorial purposes we are going to create both.

Like usual we will need some markup to apply our CSS to. We are going to have a div element with a id of myImg and a img tag with an image sized to 480 x 180. They are sized as such because we will be putting a 10px padding around the image to give it a nice border.


<div id="myImg"><img src="image.jpg" alt="nature"></div>

You can make any picture that you want, I am using a nice image I found off of Google Images. Lets start off by giving div some styles as well as a base box shadow (nothing special yet).

#myImg {
  width: 480px;
  height: 180px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  position: relative;
  -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 3px 2px rgba(0,0,0,.15);
  box-shadow: 0 3px 2px rgba(0,0,0,.15);
} 

This is all pretty standard stuff so far. So make the shadows on either side, we are going to use the pseudo classes :before and :after. If you are unsure how these work please refer to my making Pure CSS Triangles tutorial.

#myImg:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 20px;
  bottom: 20px;
  left: 90px;
  z-index: -1;
} 

We created an element that is 50% of the width of the parent (#myImg in this case), absolute positioned it to the side of the parent, and put a z-index at a negative value to put it behind the parent. Now for the box shadow.

-moz-box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15);
-webkit-box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15);
box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15); 

In this tutorial I’n not going to go into what each value means (you can learn that here). Now the box shadow looks good, but it just looks like a plain fuzzy box. We need to skew it to make it look better. If you need a refresher on how to skew please read my 2-D Transformations tutorial.

-moz-transform: skew(40deg);
-webkit-transform: skew(40deg);
transform: skew(40deg); 

We now have a great looking and realistic box shadow. Here is the final code:

#myImg:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 20px;
  bottom: 20px;
  left: 90px;
  z-index: -1;
  -moz-box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15);
  -webkit-box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15);
  box-shadow:  -100px 0 10px 20px rgba(0,0,0,.15);
  -moz-transform: skew(40deg);
  -webkit-transform: skew(40deg);
  transform: skew(40deg);
} 

If you want the other shadow, just use the :after pseudo class and change some values.

#myImg:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 20px;
  bottom: 20px;
  right: 90px;
  z-index: -2;
  -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.15);
  -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.15);
  box-shadow:  100px 0 10px 20px rgba(0,0,0,.15);
  -moz-transform: skew(-40deg);
  -webkit-transform: skew(-40deg);
  transform: skew(-40deg);
} 

Now instead of having boring drop shadows, you can have advanced pure CSS shadows. If viewed in a browser that doesn’t support box-shadows, then nothing will be broken, just no shadows.

View Demo

Create an Expandable Search Form

2011-08-26T23:21:50Z

It’s been a while since I have done a tutorial so I thought I would do a pretty neat HTML5/CSS3 tutorial. In this tutorial we will be creating a search form that expands to allow for more content to be added. We are going to be dealing with HTML for the markup, and CSS3 for effects and animation. This is much like the Apple search bar but the relation was not intended.

Lets get started. First we are going to write the markup. Since the search form is basically a self-contained element it belongs in the section tag.

<section>
    <form class="search_form">
        <input type="search" class="searchinput" placeholder="Search"/>
        <input type="submit" value="Search" class="searchsubmit"/>
    </form>
    <div class="clear"></div>
</section> 

Please take note of the “search” type on the input box as well as the placeholder attribute. A clearing div was added for backwards compatibility but you are welcome to use other techniques that fir your site. To use the clearing div just use the following CSS:

.clear {
    clear: both;
} 

In our search form we are going to have a little magnifying glass act as our button so we need to make it appear as if it is in our input box. We are going to style the form element as an input box to achieve this.

.search_form {
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #d6d6d6;
    padding: 3px;
    padding-left: 8px;
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -o-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    float: left;
} 

We gave it CSS3 rounded corners as well as an inset shadow to add depth. Basic padding, border and background was added as well. There are different ways to control the width but I opted for floating the form element so that the inside elements can be floated as well (this is mainly for backwards support and ease when expanding the container).

We are going to do the actual button first because the input box needs additional explanation. For the submit button, we are just going to use a basic image as the background and then use CSS to hide the text. This text should still be there in the code in case they don’t have CSS active. This is all pretty basic stuff but let me know if you have any questions on how it works.

.searchsubmit {
    display: block;
    height: 23px;
    width: 23px;
    line-height: 29px;
    background: url('../images/searchicon.png') no-repeat 3px 4px;
    text-indent: -9999px;
    border: none;
    vertical-align: middle;
    float: right;
} 

For the actual input box we can style it as normal but eliminating some of the defaults such as the border and the blue outline that webkit browsers put when the input is in focus.

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
} 

Notice that we have declared the width of 200px. We want the width to be double when someone clicks on it. We can do that with put CSS.

.searchinput:focus {
    width: 400px;
} 

Right now it’s a little jarring. We want to make the experience nice. So lets add a CSS3 transition. We need to add it to the normal state of the input.

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
} 

Take note of the last 5 lines. It will still be jarring for browsers that don’t support it, but it’s their fault for using an older browser right. Ok not really.

We still have a bit of a problem. In webkit browsers, the search input types have a default style that can not be over ruled even with !important. So what are we to do. It looks horrid. Thankfully there is a little known trick that was built in that will help us overcome it.

::-webkit-search-decoration
{
    display: none;
}

input[type=search]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
} 

Why they didn’t allow us to style it our self without doing this I don’t know. With that now in place you should have a great looking and expandable search form. You could do this same thing with Javascript and have it work the same in all browsers… but what would be the fun in that?

As usual I have set up a demo so you can check out the form

View Demo

CSS3 Gradients Revisited

2011-07-09T17:50:00Z

CSS3 gradients are the mystery of the CSS properties. People love to use them, but few know the syntax. Typically users just go to an online generator and have the syntax automatically made for them. I must admin, I have done this too (and still do). It is easy and convenient. The purpose of this tutorial is not so much to write your own code for CSS3 gradients, but rather to understand the syntax behind it so you can modify and edit it. If you want to go so far as to memorize the syntax so you will never need an online generator again, go right ahead.

I am going to go over two types of syntax, one with color stops and one with out. The one without color stops is easier to understand so we will start there but before we get started I must mention that in order to do proper fallback, you must declare a normal background color. It isn’t anything new just a simple:


background: 74A2E8;

Now lets get started. We are going to be applying the gradient to a basic div with the following CSS:

div.basicgradient {
  height: 200px;
  width: 300px;
  margin: 20px;
  background: 74A2E8;
} 

We are going to learn two different syntax’s for the basic gradient, one for Webkit and one for Mozilla. I should note that the Mozilla syntax will work for Safari 5/Chrome 11, Opera 11.10, and IE10 (no it will not work in IE9 and below). Wait a minute… you are probably thinking that I was going to explain the Webkit syntax but the Mozilla one will work for Safari 5/Chrome 11 which are both Webkit browsers. That is true. The Webkit syntax is actually for Safari 4 and Chrome 10 and below. They tried to introduce their own syntax which didn’t catch on since other browsers implemented the Mozilla syntax. So technically Safari 5/Chrome11 will support both syntaxes but to support all versions it is best to include both with the newer one being declared after the old one for future support.

So with that out of the way, lets look at the older Webkit syntax:

background-image: -webkit-gradient(
  linear,
  left top,
  left Bottom, 
  from(#59C2B1), 
  to(#74A2E8)
); 

Lets break it down by line.

Gradient Type
Gradient Start Position
Gradient End Position
Starting Color
Ending Color

Now lets look at the Mozilla syntax:

background-image: -moz-linear-gradient(
  top, 
  #59C2B1,
  #74A2E8 
); 

And line by line (please note that the gradient type is in the function name not in the values):

Gradient Start Position
Starting Color
Ending Color

As you can see, the Mozilla one is much easier to read and remember. Now lets get to the more complex syntax, the one with color stops. If you are unaware of what color stops are, they are points in a gradient in which the color changes. Think of the starting and ending colors in basic gradient as the first and last color stops.

Webkit syntax for color stops:

background-image: -webkit-gradient(
  linear,
  left bottom, 
  left top,
  from(#59C2B1),
  color-stop(40%, #74A2E8),
    color-stop(60%, #59C2B1)
); 

Gradient Type
Gradient Start Position
Gradient End Position
Second Color Stop, Position and Color
Last Color Stop, Position and Color

And the Mozilla syntax:

background-image: -moz-linear-gradient(
  top,
  #59C2B1,
  #74A2E8 40%,
    #59C2B1 60%
); 

Gradient Start Position
Starting Color
Second Color Stop, Color and Position
Last Color Stop, Color and Position

So take a minute and experiment with adding and modifying color stops and the gradient in general. There is something that we didn’t go over, and that is radial gradients. We will talk about those in a different tutorial.

Check out the examples in the live example.

View Demo

Pure CSS Triangles

2011-05-25T23:07:48Z

Creating things with pure css can be a fun and exploratory process. Creating CSS triangles falls into that group as well. Even though that support for pure CSS triangles goes back to IE7 (yes really), it’s only with the introduction of CSS3 that we can really let it shine. In this tutorial I will give a basic overview of how to create pure CSS triangles as well as how to create a complex CSS3 button that involves triangles.

First thing to understand when making triangles is how browsers treat CSS borders. Now it may seem that CSS borders has nothing to do with making triangles but it is actually the backbone of it.

When a browser renders a border it needs to treat the corners in a certain way that each side has equal proportions. To do this it splits the corner from the outside corner to the inside corner. As you can see in this illustration the different colors make it really easy to see the separation. Now, what if you have an element that doesn’t have a height or a width? What do you know, 4 triangles.

Basic Triangle

So how do we single out just one of the triangles? Very simple. Define one edge as you normally would and make the borders next to it have the same values but instead of a color define it as transparent. Instant triangle. Lets see a working example.

<div class="basicTriangle"></div>

.basicTriangle {
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #666;
} 

Speech Bubble

Now lets use it for a practical application: a pure CSS speech bubble. For this we are going to use a CSS style that is only supported in IE8 and above so it is recommended that if you use this in a production environment, make sure it is not part of the required styles that absolutely need to show.

First the markup.

<div class="speechBubble">
  <p>Hello World</p>
</div> 

Technically this can be reduced to a single div but seeing how we want to give flexibility to what ever may be shown in the speech bubble, extra markup was used.

Some base CSS:

.speechBubble {
    padding: 10px;
    background: #4e99b8;
    position: relative;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    width: 100px;
}

.speechBubble p{
    font-size: 15px;
    color: #fff;
    text-align: center;
} 

We define the div with a position: relative because we are going to use CSS to create the triangle element using the CSS style content and absolute position it into place.

.speechBubble:after {
    position: absolute;
    bottom: -10px;
    left: 20px;
    content:"";
    display:block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #4e99b8;    
} 

We now have a pure CSS speech bubble. You can modify any of the settings to make it work in your own setting such as give it a fluid width, but for ease of understanding I made it a fixed width.

CSS Arrow Link

Lets get a little more fancy. Lets make a CSS arrow that is a link. This is the same basic concept as the speech bubble. The only difference is that the arrow is larger than the main element. Lets see how it works.

Markup:


<a href="#" class="arrow"></a>

CSS:

.arrow {
    height: 40px;
    width: 40px;
    background: #4e99b8;
    margin: 20px 0 20px 20px;
    position: relative;
    display: block;
}

.arrow:after {
    content: "";
    position: absolute;
    right: -30px;
    top: -10px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #4e99b8;
} 

Even though the triangle goes outside the main linked element, the triangle still retains the link making it really useful.

Advanced Button with Triangles

Now for a more real world application. We are going to combing the before and after pseudo classes to create two elements to create a really neat CSS button. Now again, this involves a lot of CSS3 so older browsers (like IE) will look nothing like this so check it in browsers to make sure the style is acceptable before you use it in a production environment.

Markup:


<a href="#" class="advancedButton">Advanced Button</a>

Base CSS:

.advancedButton {
    display: block;
    position: relative;
    font-size: 13px;
    width: 185px;
    height: 40px;
    line-height: 40px;
    color: #666;
    text-shadow: 1px 1px 0 #fff;
    text-decoration: none;
    padding-left: 15px;
    background: #ededed;
    background: -moz-linear-gradient(
      top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%
      );
    background: -webkit-gradient(
      linear,
    left top, left bottom,
    color-stop(0%,#ffffff),
    color-stop(50%,#f1f1f1),
    color-stop(51%,#e1e1e1),
    color-stop(100%,#f6f6f6)
    );
    background: -webkit-linear-gradient(
      top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
      );
    background: -o-linear-gradient(
      top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
      );
    background: -ms-linear-gradient(
      top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
      );
    background: linear-gradient(
      top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
      );
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    border: 1px solid #ededed;
} 

Holy cow thats a lot of CSS. Yes, well it is actually lighter than using an image so we deal with it. Lets make it better. Again, this is using the same concepts as we used above, just taking it a step further.

.advancedButton:before {
    content: "";
    position: absolute;
    height: 25px;
    width: 25px;
    right: 10px;
    top: 8px;
    background: #666;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.2);
}

.advancedButton:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    line-height: 0;
    font-size: 0;
    right: 17px;
    top: 13px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff;
} 

And for fun lets add some hover effects:

.advancedButton:hover {
    color: #87b77b;
}

.advancedButton:hover:before {
    background: #87b77b;
} 

Now that is a lot of CSS so take your time and go through it slowly so you know how it is working. If you read the article from the start you should have no problem understanding it.

Compatibility

So what kinda of compatibility does this have? For the triangles it is supported back to IE7. IE6 technically supports it but it doesn’t support the transparent style so if you use it make sure instead of transparent it is the same color as your background. The before and after pseudo classes are supported in IE8 and newer. Other browsers you don’t need to worry about because it has backwards support for browsers that people are actually using.

So experiment and have fun with triangles. Let me know if you have any questions in the comment section below.

Also check out the live demo of everything that that article goes over.

View Demo

Japan Inspired Banner With Photoshop and Illustrator

2011-04-27T00:11:26Z

In a late Photoshop tutorial we are going to take inspiration from Japan to learn about some layer blending techniques to create a cool banner. The techniques are simple and can be applied anywhere. We are even going to introduce some Illustrator to create some of the graphics for this banner.

The first thing to start off with is our paper background. In the files I have supplied you will find a jpg of paper texture. You will need this for your background. Inside Photoshop create a new document that is 600px wide by 200px high and place the paper texture in. Resize and position it so you get good texture but is void of any weird folds or highly dark areas as these will distract from the point of the banner.

Select the document (Cmd-A for OSX, Ctrl-A for Windows) and apply a layer mask. To the layer, apply a Inner Shadow layer style. Set the Blend Mode to Color Burn, opacity to 50%, distance to 0, and size to 35px. You should have an nice edge around the border of the graphic. If you didn’t apply a layer mask it would apply it to the whole image, and not the viewable area.

Press D on your keyboard to set your color swatches to default black and white. Create a layer on top of the paper texture and select: Filter - Render - Clouds and set the blend mode to Color Burn with an opacity of 15%. Create a Brightness and Contrast Layer adjustment and set the contrast to 45px. Your paper texture should have a lot of dark brown and brown-red areas which will make it seem a little authentic and rustic.

Now for the graphics. Use your Ellipse Tool (the circle shape tool) and create a circle in the middle of the document. Set the color to a red color. I used #681a1a. Position the circle on the bottom of the document only the top part of the circle is showing. Set the Blend Mode to Overlay and set the opacity to 80%.

Now for Illustrator. Use the shapes in the program to create a elongated triangle. Use the Rotate Tool to copy a bunch in a circle by 30 Degrees. You only need to do enough to cover a half circle.

Copy and Paste this into your document as a smart object. Enlarge it so it covers the entire document. Position the center at the bottom of the circle so it appears as though sun rays are coming out of the circle, change the blend mode to Overlay and the opacity to 15%. Put the smart object behind the circle in the layers pallet. Make a selection of the circle and reverse the selection. Select the ray layer and make layer mask out of your selection. This makes it so you can’t see the rays behind the circle.

The last step is to create and position the text. I use the font Gentium, but you can use what ever font you want. Both text objects are set to Overlay with the bigger being set to 15% opacity while the smaller one is set to 75%. The final step was the copy and apply the same layer mask that the rays had to the larger text. This cleans up the graphic and lets the circle really stand out as its own object since it is so important to the culture.

You are now done. With a few shapes and the help of blend modes we have created a neat banner that feels artistic and authentic.

Download Tutorial Files

HTML5 Basics

2011-03-26T18:24:32Z

HTML5 is certainly a hot topic and if you are a web developer you have to at least know the basics of it. Thankfully it is fairly easy to learn if you know what is going on. In this tutorial I am going to go through some of the basics that will help you get started coding HTML5.

DOCTYPE

The biggest change is the fact that the DOCTYPE has been simplified. No longer are you required to know long DOCTYPEs. In fact, it has been simplified to the point where it can actually be memorized. For example, if you were doing a traditional HTML4 document your DOCTYPE would look something like this:

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Good luck actually memorizing that. In HTML5 it is simply:


<!DOCTYPE html>

Much easier to memorize.

Changes in the HEAD tag

HTML5 is smart enough to know what kind of documents you might be linking to your page like Javascript and CSS. In the past we would have to declare what type of document you were attaching by a type=“text/css” or type=“text/javascript”. This is no longer needed.

New Tags

HTML5 brings a bunch of new, more semantic tags to use in your code. Gone are the days where you have to write a header like


<div id="header"></div>

Now you can simply use the new header tag.


<header></header>

Here is a list of some common new tags that you would do well to learn

Header - Defines a header of a page or section.

Footer - Defines the footer of a page or section.

Article - Defines content that is self-contained and could be independently distributed or reused. For example, this could be a blog post.

Section - Defines a group of common elements or information.

Aside - Defines information that is related to the content around the aside element. For example, this could include bullet points to an article.

Hgroup - Defines a group of headers (the headers such as H1 and H2 not the header tag itself).

Nav - Defines navigation

There are many many more tags but this are the ones that you should know and use first. A good place to learn about all the tags is http://html5doctor.com/

Multimedia

Because it is such an involved subject I will leave the full explanation of this for another tutorial but HTML5 has the capability to show multimedia such as movies and audio with the video and audio tags. Right now there is a browser fight for which formats to support so if you do include this into your page, make sure you include all formats including Flash for browsers that do not support these tags. Again, this is a deep topic and will be fully covered in another tutorial.

Technology

This is another section that is very deep so I won’t go into it much here, but HTML5 has some advanced technology behind it to support Offline Storage, Geolocation APIs, Canvases, Web Workers and XMLHttpRequest 2. A lot of these also need Javascript to work but these are powerful technologies that are built in the specification.

Support

This is the big question. “Can I use it now?” The answer is yes. In fact if you are reading this on my site then you are already seeing it in action because this site is made with HTML5. Now just writing the new DOCTYPE and the new tags isn’t enough because past browsers don’t know what HTML5 is so you have to do a little work to get it to display correctly. Most notable is the IE browsers. Currently the only IE browser that can understand HTML5 is IE9 which at the time of this writing was just released a couple weeks ago. Past IE browsers don’t recognize the tags and won’t display them correctly. For this we will have to add the HTML5 tags to the browser’s DOM (Document Object Model) via javascript. The script is confusing if you don’t know javascript but thankfully you don’t need to understand it. Also Google has taken the time to host it on it’s CDN (Content Delivery Network) for us to use and take advantage of. In your head tag place this code:

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
<![endif]--> 

This will make it so IE can see the new tags and style them. Without this IE will not even be able to style the tags with CSS.

We also have another problem that needs to be addressed. IE can now see the tags, but it doesn’t know what tags are Block Level elements or what ones are Inline elements. We can use CSS for this. There are only a few tags that we need to worry about so add this to your CSS document:

header, footer, aside, nav, article, section {  
    display: block;  
} 

That is it. Your website should now we ready to be displayed in all browsers.

The A Tag

There is one more thing that I want to go over. In HTML5, the a element is now considered a block element. We don’t include this into our CSS because it would cause havoc with styling the site. HTML5 browsers will also display them inline despite them technically being a block level element. So what gives. Why the change?

The change goes the way of necessity. For example, say we wanted to make this whole section link to another page:

<div>
    <ul>
        <li>Point one</li>
        <li>Point one</li>
    </ul>
</div> 

To get this to link to another page, we would have to use javascript or make the unordered list into a bunch of span tags. With HTML5 it is now valid to wrap the whole section with an a tag such as this:

<a href="#">
    <div>
        <ul>
            <li>Point one</li>
            <li>Point one</li>
        </ul>
    </div>
</a> 

This is now perfectly valid in HTML5.

Conclusion

HTML5 is a very powerful spec that is still changing but you can use it right now. In order to help you get started you can use my HTML5 Vanilla Kit which comes with all the code that I have talked about here. You can download a free copy at http://cibgraphics.com/projects/vanilla

Let me know if you have any questions about HTML5 in the comments section below.

CSS3 2-D Transforms

2011-02-26T19:18:12Z

One of the most powerful aspects of CSS3 is 2d transforms. They enable the front-end developer to manipulate objects in ways that CSS2 only dreamed of. In reality, the only way to get to do 2d transforms was to use javascript. We are going to be looking at the basics of using 2d transforms and then you can use your creativity in how they apply to your own pages. Since these are not going to work in older browsers it is best if you use these effects in “nice to have” situations instead of “need to have” ones. If you absolutely need to have these effects to do a particular effect then you will need to rely or fall back on javascript.

In order to understand how CSS3 transforms work you will need to understand the concept of a CSS function. Chances are you have been using them already an haven’t known it. In short a CSS function is a property’s value that accepts an argument. Or rather an property’s value that accepts an addition input. The background-image property is a good example of a property that uses a CSS function.


background-image: url('../image/logo.png');

See the parentheses? That is the function. You ‘pass’ in a value.

Now that we understand CSS functions we can now learn CSS3 transforms because it is all about functions. Just for notes that you will need to use vender prefixes but for clarity I will omit them here.

Instead of showing images of what these do (boring in this case), please refer to the demo which I have set up which will show all of these in action.

View Demo

For the demo, I am using a normal empty div with basic CSS applied to it so you can see what is going on. Every div has the exact same basic CSS applied to it. The only thing that is different is the transform that we are learning about.

div {
    height: 150px;
    width: 150px;
    margin: 50px;
    background: blue;
} 

Translate

The first transform value we are going to learn about is Translate. Translate by default accepts two arguments (remember those are values). The first is the x-offset (left and right) and the second is the y offset (up and down). For the x-offset a positive number will move it to the right while a negative number will move it to the left. The y-offset a positive number will move it down while a negative number will move it up. Lets look at the code.


transform: translate(70px,20px);

One thing to note is that if you pass only one argument, it will only do the x-offset and not apply anything to the y-offset. This is different that properties like margin and padding that apply it to both x and y.

Translate accepts all the normal values be it pixels, ems, percents, ect.

Scale

The next value we are going to be learning about is Scale. Judging by the name you might know what this does already. This will scale the object based on the arguments you pass to it. Unlike the other values, this one does not accept normal inputs such as a pixel value. (are you confused with double values yet?) With scale you pass an argument based on how you want to multiply its width and height by. If that confuses you lets look at some code. Lets say you have an object that is 10px x 10px and you wanted the width to be 15px. Here is how you would do that with the scale property:


transform: scale(1.5,1);

If you remember back to math class 1.5 multiplied by 10 is 15. The same holds true for the other argument (10 x 1= 10). Easy huh. If you wanted one of those values to be 5px just pass an argument of 0.5 and you have it.

Rotate

Next up is Rotate. Rotate is fun because you can get some very interesting effects especially if you combine it with other CSS3 effects such as animation. The Rotate value accepts only one argument which can be either a deg or a rad (for clarity we will be using deg). A positive value will go clockwise and a negative value will go counter-clockwise.


transform: rotate(25deg);

Skew

CSS Skew accepts two arguments and just like the others that accept two arguments the first is the x-offset and the second is the y-offset. The arguments accept degrees and can be kinda tricky to figure out what you need so until you get the hang of it, just experiment with it.


transform: skew(5deg,10deg);

Combining Functions

If you wanted to combine a bunch of these and apply them to one object there is a simple way to do that instead of writing them out each individually. You can separate the functions by a space (not a comma) like so:

transform: translate(70px,20px) scale(1.3,0.5) rotate(25deg) 
skew(5deg,10deg); 

Wrapping Up

2D transformations are very powerful. Remember when you apply them to add the vender prefixes and or javascript fallbacks and you should be good. Try experimenting with them and combing them with other CSS3 additions such as animation.

I have set up a demo page so you can see all of these working (of course in the browsers that support it) so you are able to see at a glance what that do.

If you have any questions let me know in the comment section.

View Demo

CSS3 Animated Gradient Background

2011-02-16T13:14:11Z

So far we have looked at CSS gradients as well as CSS animations. We are now going to combine them into a cool and interesting effect. This should be considered experimental and probably shouldn’t be used on any production sites unless you have the proper CSS fallbacks.

We are going to create a simple list where the background animates on the hover event so lets get started with some base markup.

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 

Pretty basic here. Nothing new or fantastic. Let’s also set some base CSS styles.

li {
    padding: 10px;
    margin: 10px;
    width: 200px;
} 

Now is the time for the gradient. We are going to do a 3 color gradient, two at the ends with a color stop 50% through. The markup looks like this:

background:-webkit-gradient(
    linear, left top, right top, 
    from(#FFD820),
    color-stop(50%,#FF8722),
    to(#FF3021)
);

background:-moz-linear-gradient(
    left,#FFD820,#FF8722,#FF3021
); 

For the animation we are going to want the background gradient to move to the left so we see the right most color. This may seem a little odd because you are thinking you should be already seeing the right most color since the gradient takes up 100% of the width. You are correct. We are going to change that with a new CSS property background-size.

-moz-background-size: 200%;
-webkit-background-size: 200%;
background-size: 200%; 

To start the animation we are going to need to declare some sort of movement or change on the hover event. In this case we want the background to move to the left (have a background position of right).

li:hover{
    background-position:right;
} 

To finish up the animation we actually need it to animate, so on the li we need to add this:

-webkit-transition:1s background-position linear;
-moz-transition:1s background-position linear;
transition:1s background-position linear; 

And there we have it, your background gradient should now be animating when you hover over it. A simple and effective technique that requires no images or javascript. As usual this will only work with Firefox 4 Beta 2 and Webkit browsers (Safari and Chrome).

View Demo

Neon Space Text in Photoshop

2011-02-06T17:13:36Z

For this tutorial we are going to be focusing on who to create a neon text with adding a cool graphic behind the text. The effect is very simple (so simple you will be amazed) but the image has a lasting impression that you can use on many projects to gave it an extra flare.

The first thing we are going to do is write out our text. You can use any font you like. I used Josefin Sans Bold which you can download for free. Create a new document 600px wide and 300px high at 72ppi and fill the background with black. Type out Photoshop in white and center it in the the middle.

Double click on the layer to bring up your layer styles and add a Outer Glow. Set the Opasity to 50-55% and make the color to a neon blue color.

Next create a Inner Glow, set the blend mode to Normal, Opacity to 100%, color to the same blue as the Outer Glow, and the size down to 3px.

Duplicate the layer, drop behind the old layer. Right click on the layer and clear layer styles. Go to Filter - Blur - Gaussian Blur and set it to about 6px and hit ok.

Double click on the layer to apply a layer style to that layer. Apply a Color Overlay of the same blue as before.

We now have our text ready. The last thing to do is apply our graphic behind our text, position our text and delete any stars that might be interfering with our text.

Download PSD

Create a Color Radial in Adobe Illustrator

2011-01-08T23:45:21Z

Adobe Illustrator is a wonderful program that lets you create amazing vector graphics. There are so many tutorials out there that cater to Photoshop that I though it was time to do one for Illustrator. In time I will also do tutorials for Adobe’s other programs such as InDesign and perhaps Flash Catalyst. Today we are going to be creating a beautiful color radial using simple techniques that can be applied anywhere.

To get started create two elongated circles that overlaps about 50% (see picture). It doesn’t matter what color they are because we will be changing the color of them later.

Get out out Pathfinder pallet (Window - Pathfinder). With both circles selected click the intersect option (top row, third from left). This will make only the parts that overlap remain. What we want is a nice leaf like shape.

In your tool pallet, find your rotate tool under your eraser. With your shape select Option/Alt click the bottom point of the shape. This will bring up a dialog box asking for a angle. Enter 15 degrees and select Copy (not Ok). To get our radial pattern we want to repeat this step but to do it the easy way Illustrator has a built in function to accomplish this. Hit Cmd/Ctr-D to duplicate the effect. Do this until the radial is complete.

We now want start preparing our radial. Go through and make sure the stacking order is reverse of what it is currently. Meaning the last object that was made is last, and the first object you started with is in the front.

Now comes the fun part. Color. To start our color we are going to start off with red at the top, yellow on the left, green on the bottom, and blue on the right. On your radial add these colors to those points now. This is just for reference to make your life easier later. Make sure these are pure colors.

Now we want to figure out what out colors are actually going to be. Instead of doing a bunch of math and color conversions we are going to go it the easy way. In the bottom of your document make 5 squares each with the base colors that you used above (with the last box being the same color as the first). What we are going to do here is make a color chart we can grab colors from. Make sure you have a good deal of space between the boxes. Go up to Object - Blend - Blend Options, set the spacing to Specific Steps and set the steps to 5. Select all your color boxes and go to Object - Blend - Make. You should now have a good looking color bar to grab colors from. The final step for this is to expend the bar. Go to Object - Expand to turn the boxes into individual objects you can interact with. A tip I used was to put a black bar above the pure colors so I could tell where they were. This helps so you can tell where they are.

You can now do through and apply your colors to the correct object to make the color radial using the eye dropper tool.

The final step that I did was to put it on a black background, change the blending mode to Overlay, and drop the opacity to 50%. And added touch was to type the word Illustrator in the font Lobster, set the blending mode to Soft Light and the opacity to 75%.

You can use the tips and techniques in this tutorial for almost anything. Have fun with it and see what you can create.

CSS3 Multi-Column

2011-01-02T16:51:12Z

CSS3 has really changed the way front end developers are shaping and designing the way webpages look today without the need for extra images and extra markup. Today we are going to be looking at a new CSS3 property that takes a common problem that took several divs and reduces it to a simple container leaving the presentation to the CSS where it belongs.

This common problem is as you might have guessed is multiple columns. I am going to show you how to make a simple article with a header and text using CSS3 properties for multiple columns that will degrade gracefully in browsers that do not support it (read: Internet Explorer and Opera).

To start off we will need our basic HTML markup to apply our CSS to. In case you might be wondering, we are going to be using a little HTML5 here. It can easily be adapted to a HTML4 document.

<article>
    <h2>Today's Headline Article Header</h2>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</article> 

And once again, we will need our base CSS styles.

h2 {
    background: #b4cad3;
    color: #fff;
    padding: 5px 10px;
}

p {
    color: #404040;
    font-size: 12px;
    line-height: 18px;
    margin: 10px 0;
    background: #f2f2f2;
    padding: 5px;
} 

Now comes the fun part, applying the multiple columns. There are 4 main properties but we are only going to be focusing on 3. The first is column-count. This is basically how many columns you want. The next is column-gap. This controls the space between the columns. The last one we will be looking at today is column-rule. Column rules are basically lines that separate the columns. They only exist between the column and never on the outside. The syntax is the same as the CSS border property being width, type, color in that order. The property we won’t be looking at today (because it won’t be necessary), is column-width, and that is exactly what you expect it is.

As usual, since this is CSS3 we will be using the standard vender prefixes. Opera in this case does not support multiple columns so don’t bother trying to use the -o- prefix. It will not work here.

In our example we need to write very little CSS. We want to have 3 columns, have a gap of 25px, and have a dashed 1px rule. Since we don’t want our rule to conflict with the readability of our text, we are going to have the color of our rule be much lighter than the body text.

article {
    -moz-column-count: 3; 
    -moz-column-gap: 25px; 
    -moz-column-rule: 1px dashed #898989;
    
    -webkit-column-count: 3; 
    -webkit-column-gap: 25px; 
    -webkit-column-rule: 1px dashed #898989;
    
    column-count: 3; 
    column-gap: 25px; 
    column-rule: 1px dashed #898989;
    
    margin-top: 50px;
} 

That is all there is to it. In browsers that don’t support it, the text will just flow as if there was not any columns there. I also added a little CSS3 text-shadow to the header and body copy to add a little visual flair.

Download Files
View Demo

Let me know in the comment section below if you have any comments or suggestions.