Posts Tagged ‘coding’

Coding Kung-fu: 35 Graphics Built Purely With CSS3

Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

css3 graphics Coding Kung fu: 35 Graphics Built Purely With CSS3

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! Heck, some of them even come with detailed tutorial that teach you how to achieve it! So don’t miss the great chance to learn to create graphic using CSS3 and little bit of HTML, let’s get naughty with CSS3!

You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Most demos support the latest version of Firefox and Google Chrome, though.

RSS Feed Icon

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial which you can actually learn to “draw” the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!

rss feed icon Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iMac

Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.

apple imac Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Keyboard

It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.

apple keyboard Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone Coding Kung fu: 35 Graphics Built Purely With CSS3

Cherry Blossom

The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!

cherry blossom Coding Kung fu: 35 Graphics Built Purely With CSS3

Coffee Cup

A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.

coffee cup Coding Kung fu: 35 Graphics Built Purely With CSS3

Doraemon

This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.

doraemon Coding Kung fu: 35 Graphics Built Purely With CSS3

Meowww!

Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.

meowww Coding Kung fu: 35 Graphics Built Purely With CSS3

Mushroom, Triforce, Poké ball, Kirby

“Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby. For those that use dinosaur browsers, there’s a screenshot of what it’s supposed to look like.”

musroom triforce pokeball kirby Coding Kung fu: 35 Graphics Built Purely With CSS3

Nyan Cat

“It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for
looping audio. My CSS fails CSSLint test and I’m really proud of this.”

nyan cat Coding Kung fu: 35 Graphics Built Purely With CSS3

Patterns

The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.

patterns Coding Kung fu: 35 Graphics Built Purely With CSS3

BonBon

BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.

bonbon button Coding Kung fu: 35 Graphics Built Purely With CSS3

iOS Icons

Amazing? Yes. These icons are built by rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms, with the help of certain tools such as westciv’s tools and Border Radius.

ios icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

That’s impossible for web developer to not build social media icons if they can build iPhone and Doraemon with CSS3. And they built these icons really well.

social media icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.

social media icons 2 Coding Kung fu: 35 Graphics Built Purely With CSS3

Peculiar

“Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.”

peculiar Coding Kung fu: 35 Graphics Built Purely With CSS3

GUI Icons

84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.

gui icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Steve Jobs

Steve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.

steve jobs Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Fail Whale

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.

twitter fail whale Coding Kung fu: 35 Graphics Built Purely With CSS3

umbrUI

User Interface elements made possible with CSS3, and it looks really sleek!

umbrui Coding Kung fu: 35 Graphics Built Purely With CSS3

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

adobe photoshop logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Android Logo

The Android is made of fairly simple shapes, but it explains the advantage of CSS3: you can make simple stuff and modify it any way you want by using just code but not Photoshop.

android logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Logo

Retro Apple logo presented using CSS3, still as awesome as the time it was created.

apple logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Atari Logo

Years before, who would have thought the Atari logo will be re-created using CSS3.

atari logo Coding Kung fu: 35 Graphics Built Purely With CSS3

BP Logo

Simple logo can be made easily with CSS3. The best thing with some of these logos showcased here are there are code provided for you to try out!

bp logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Dribbble Logo

Famous user-powered showcase site Dribbble’s logo showcased using CSS3.

dribbble logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Magento Logo

Magento’s logo is not too hard to draw but the outcome looks professional.

magento logo Coding Kung fu: 35 Graphics Built Purely With CSS3

McDonald Logo

I’m lovin’ CSS3!

mcdonald logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Bird

Perfect proportion, hat tip to the creator.

twitter bird Coding Kung fu: 35 Graphics Built Purely With CSS3

Windows Logo

Windows logo! Looks really awesome, and it’s easy to create!

windows logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Internet Explorer Logo

Really great creation! It works in major browsers except Internet Explorer 8 or below.

internet explorer logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Google Chrome Logo

I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!

google chrome logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Opera Logo

Now a practice for you: what are the differences between this CSS3 piece and the real deal?

opera logo Coding Kung fu: 35 Graphics Built Purely With CSS3

HTML5 Logo

HTML5 can’t shine without CSS3!

html5 logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Volkswagen Logo

Except the color scheme, this CSS3 clone looks identical to the original one.

volkswagen logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Reflection

With the boom of the logos and graphics made of pure CSS3 come the discussions which greatly debate about the usability of the CSS3-produced graphics in the real world production environment.

Generally the CSS3 graphic is fine, but it might get annoying especially when you need to alter the design or simply resize the graphic, also the biggest pain here is the technology is not yet fully supported by certain browsers like Internet Explorer.

What do you think? Will you use the graphic made with CSS3 in your site? Do you have any solution for its current drawbacks? Let us know your thought, and do share with us if you just baked a CSS3 graphic!

More

Willing to actually do something with CSS3? You’ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.

Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

In our earlier jQuery Mobile tutorial I had introduced much of the underlying framework and how to go about setting up your first website. The JS library is both lightweight and easy to pickup in regards to learning difficulty. There is also generic a CSS stylesheet included with the files so you can further customize the elements in your layout.

jquery mobile custom themes Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

For this second segment I’d like to spend a bit of time delving deeper into this idea of jQuery Mobile themes. The entire design industry has been revolutionized by jQM and the process of constructing a mobile template from scratch has been significantly improved. jQuery Mobile isn’t just a scripting library, but an entire ground framework to build upon and produce efficient mobile templates.

Default Stylesheet Contents

I should begin by clarifying exactly what type of CSS code is included with the default files. The stylesheet from jQM 1.0 has been split into two main segments – structure and themes.

The structure code is the stuff you can mostly ignore. This is used to set margins, padding, height/width, font variants, along with many other browser defaults. The internal themes are then split up from A-E which each control different visual effects in your design. This can include background colors, gradients, drop shadows, etc.

Each of these inner theme elements can also be referred to as swatches. When you build a mobile template you’ll generally stick with a single theme. But in almost every scenario the design can be improved upon with differing color schemes. The default stylesheet only includes swatches A-E but you can build swatches F-Z to add another 21 alternatives into your theme library. Just to clarify these terms again a theme is considered 1 single CSS file which can include up to 26 different swatches labeled A-Z.

Switching Styles

If you don’t choose to specify any swatches then jQuery Mobile will stick to the swatch A by default. If you weren’t already aware the jQuery Mobile docs utilize HTML5 data attributes for many internal functions. One of these includes changing swatches via the data-theme attribute. Check out my code example below to see what I mean.

<div data-role="page" id="mypage" data-theme="b">
  <div data-role="header">
    <h1>Default jQM Page</h1>
  </div>
  <div data-role="content">
    <p>Here is some internal content.</p>
    </div>
</div>

Notice that I placed the data-theme attribute on the root page div. This means the new swatch color will effect everything inside which includes both the header and content areas. I could additionally include data-theme="c" into the header div to change only that content from the rest of my page.

Components of a Swatch

It should be fairly straightforward how to implement these different swatches within a single layout. So now let’s take a look at the jQM CSS code so we can break down individual components of a swatch. Check out the latest jQuery Mobile 1.0 CSS file hosted on their own CDN.

You should notice how each swatch is separated by a distinct comment and each of the internal classes ends with the appropriate lettering. For example .ui-bar-a and .ui-body-a are applied into the header/footer bars and content areas by default. Most properties are implementing a reset on font and link colors, background gradients, and other small details. I included simply the ui-bar-a codes to give you an idea of which elements we target.

/* A
---------------------------------------------------------------------------------------------*/
.ui-bar-a {
	border: 1px solid #2A2A2A;
	background: #111111;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px #000000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(#3c3c3c, #111); /* FF3.6 */
	background-image:     -ms-linear-gradient(#3c3c3c, #111); /* IE10 */
	background-image:      -o-linear-gradient(#3c3c3c, #111); /* Opera 11.10+ */
	background-image:         linear-gradient(#3c3c3c, #111);
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-a .ui-link-inherit {
	color: #fff;
}

.ui-bar-a .ui-link {
	color: #7cc4e7 /*{a-bar-link-color}*/;
	font-weight: bold;
}

.ui-bar-a .ui-link:hover {
	color: #2489CE /*{a-bar-link-hover}*/;
}

.ui-bar-a .ui-link:active {
	color: #2489CE /*{a-bar-link-active}*/;
}

.ui-bar-a .ui-link:visited {
    color: #2489CE /*{a-bar-link-visited}*/;
}

If you’re just looking to create a custom swatch I recommend basing the template off one of the originals. The process will go a whole lot smoother if you start writing codes in a new CSS document. You won’t have the hassle of editing in the original file and you can start off working on a clean slate. But the key areas you want to focus on will include the following:

  • header and footer bars
  • body content & page text
  • list styles
  • button states default/hover/active
  • form input controls(extra)

Coding a New Bar Design

From the same CSS file we looked at earlier copy/paste all the swatch A code(lines 12-150) into a new file. We can use the swatch name G to implement these new styles. Now after copying the code you want to rename each class instance ending in -a to -g, as this is how jQuery Mobile will recognize which styles to use.

I’d like to start by redesigning the header bar bg to mimic a more familiar iOS gradient. This can be done solely within the .ui-bar-g selector. We want to edit the background and background-image properties to change up the gradient effects. Check out my code below and a demo screen of the new gradient.

.ui-bar-g {
	border: 1px solid #2d3033 /*{a-bar-border}*/;
	border-left: 0px;
	border-right: 0px;
	background: #6d83a1;
	color: #fff /*{a-bar-color}*/;
	font-weight: bold;
	text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #3e4957;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4bfce), color-stop(0.5, #899cb3), color-stop(0.505, #7e94b0), to(#6d83a1));
	background-image: -webkit-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* IE10 */
	background-image:      -o-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1);
}

blue ios jquery mobile gradient Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

I’m using the blue color scheme found in most default iOS applications. My background is initially set to a solid color for devices which can’t render CSS3 gradients. Then below I’m using color stops around the 50% marker to recreate the traditional Apple-style glossy shine effect. Also inside the same selector I’ve slightly modified the text shadow with a more subtle color and range.

Buttons and Text Effects

It’s important when coding swatches to consider specifically which areas of the interface need attention. The header bar looks great with this new background, but one last modification I’d like to make will match the button styles closer to that of iOS apps.

.ui-btn-up-g {
	border: 1px solid #375073;
	background: #4a6c9b;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89a0be), color-stop(0.5, #5877a2), color-stop(0.505, #476999), to(#4a6c9b));
	background-image: -webkit-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* IE10 */
	background-image:      -o-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.ui-btn-hover-g {
	border: 1px solid #1b49a5;
	background: #2463de;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779be9), color-stop(0.5, #376fe0), color-stop(0.505, #2260dd), to(#2463de));
	background-image: -webkit-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* IE10 */
	background-image:      -o-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

jqm topbar with buttons Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

The code area we’re editing now is within the UI button classes. There are 3 different modes to be concerned with: .ui-btn-up-g, .ui-btn-hover-g, and .ui-btn-down-g. I’m mostly focusing on the standard(btn-up) and hover(btn-hover) effects by editing the box shadow and linear gradients. Also I expanded the rounded corners effect so the buttons appear more rectangular.

Because of this I’ve needed to remove the inner border radius from a class titled .ui-btn-inner. This class gets attached onto a span element within each anchor link in your header bar. Without resetting the border radius properties you’ll notice small glitches in the design whenever you hover over a button. As you spend more time coding in jQuery Mobile themes you’ll memorize these little nuances for future projects.

Introduction to ThemeRoller

If you enjoy getting your hands dirty in code then I highly recommend sticking to custom edits. Not only do you have more control but it’s a lot easier to debug issues within the CSS if you made all the edits yourself. But for many designers this process is tiresome and will simply take longer than necessary. Luckily the jQuery Mobile team has released an online editor under the name ThemeRoller.

jquery themeroller Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

From this page you have access to edit the first 3 A-C swatches or even create one of your own. If you look in the left sidebar you can switch between these 3 settings or quickly make changes to the global theme options. These include CSS properties such as border radii, box shadows, or default page fonts. Notice as you select any of the preset swatches that we can edit only the same areas as before – top/bottom bars, body content, and the 3 button states.

adobe kuler Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

But my favorite feature has to be the direct access to Adobe Kuler swatches. You can actually create a few color schemes within your Kuler account and import them into ThemeRoller. The interface supports drag-and-drop functionality so it’s real simple to try out a few different ideas in a matter of minutes.

Ultimately there is no absolute method of properly building your jQM swatches. Some designers prefer to hard code CSS while others will love the intuitive ThemeRoller web app. As long as you’re following the class structure then you should get the same results either way. If you want to read up a bit on ThemeRoller check out this featured jQuery Mobile blog post regarding their newest web tool and its many features.

Helpful Resources

Mobile Design Showcase

What better way to wrap up our guide to jQuery Mobile themes than with a small inspiration showcase? Hundreds of web designers have submitted their themes into the jQM Gallery with some notable success. Check out these astounding mobile templates below which will hopefully stir up your own creative ambitions. And be sure to let us know your thoughts or questions in the post discussion area.

Thumbpark

01 thumbpark Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Elfster

02 elfster Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Let’s GO! Gorizia

03 lets go gorizia Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Woos.at

04 woost Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

iFilmtipset

05 ifilm tipset Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

BAMM.TV

06 bammtv Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Untappd

07 untappd Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

IOUMate

08 ioumate Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Disney Dream Portraits

09 disney dream portraits Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Cookpad

10 cookpad Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Dailymotion

11 dailymotion Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

American Century

12 american century Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Travel Wisconsin

13 travel wisconsin Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Tuscan Maremma

14 tuscan antico casale Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

My Shopping List

15 shopping list Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

twwit

16 twwit Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Take Me Fishing

17 take me fishing Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Lawline Mobile

18 lawline Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

How To Create CSS-Based Content Accordion

In today’s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly. If your accordion is purely in CSS then it will work for all your visitors.

We are going to create a horizontal and vertical content accordion. On clicking the headline text the slide will open displaying the full content, and here’s a quick preview (screenshots) how they look like.

css based accordion How To Create CSS Based Content Accordion

Like what you see? Let the coding begin!

1. Preparing HTML and Content

To start with we are going to create the HTML for the accordion.

The structure needs a container div and then have a section for each slide in the accordion. In this example we are going to have 5 slides. Each of the slides are going to have a title and a paragraph for the content.

<div class="accordion horizontal">
    <section>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>

    <section>
        <h2>Services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>

    <section>
        <h2>Blog</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>

    <section>
        <h2>Portfolio</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>

    <section>
        <h2>Contact</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
</div>

Now we have our slides we can begin to style the accordion.

2. CSS Styling

First we need to style the containing div of the accordion. This will give us an idea of how to display each of the slides and each of the headlines.

/*Define Accordion box*/
.accordion {
     width:830px;
     overflow:hidden;
     margin:10px auto;
     color:#474747;
     background:#414141;
     padding:10px;
}

Next we are going to create the headlines for each of the slides.

.accordion section{
      float:left;
      overflow:hidden;
      color:#333;
      cursor:pointer;
      background: #333;
      margin:3px;
}
.accordion section:hover {
      background:#444;
}

We are setting the background color to be dark grey on the section to be the headline where the visitors will click to display the slide. We are using this section for both the headline and the content which means we are able to use less HTML and reuse the title of the slide as the headline of the content.

.accordion section p {
      display:none;
}

At the moment all the slides will be closed so we need to make sure that the paragraph is hidden from view until the slide is open, so for now set the display of the paragraph to none.

.accordion section:after{
      position:relative;
      font-size:24px;
      color:#000;
      font-weight:bold;
}
.accordion section:nth-child(1):after{ content:'1'; }
.accordion section:nth-child(2):after{ content:'2'; }
.accordion section:nth-child(3):after{ content:'3'; }
.accordion section:nth-child(4):after{ content:'4'; }
.accordion section:nth-child(5):after{ content:'5'; }

With the slides closed we want to display a number at the bottom of the headline to say which number slide we are on. For this we are going to use CSS to add content after the section headline, this can be done by using the :after pseudo-class selector.

Now we have created the headline for the slide we can make the click event to display the slide in the accordion. But there is a problem, CSS doesn’t have a click event, which is why the accordion is normally created by using jQuery so we can attach a click event to the headline text.

We need to mimic the click event in CSS which can be done by using the :target pseudo-class selector.

3. Using :target pseudo-class Selector

:target allows us to style the fragment identifier. Sometimes we use an on-page anchor tag to point to a place on the page. On clicking the link the id in the anchor tag becomes the target and you can style this by using the :target selector.

To add this into the accordion we need to add a link around the headline pointing to an id of the slide.

<section id="about">
	<h2><a href="#about">About Us</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
.accordion section:target {
      background:#FFF;
      padding:10px;
}
.accordion section:target:hover {
      background:#FFF;
}
.accordion section:target h2 {
      width:100%;
}
.accordion section:target h2 a{
      color:#333;
      padding:0;
}
.accordion section:target p {
      display:block;
}
.accordion section h2 a{
      padding:8px 10px;
      display:block;
      font-size:16px;
      font-weight:normal;
      color:#eee;
      text-decoration:none;
}

The above code will change the size of the slide to fit the rest of the accordion and changes the background color to white. The paragraph was hidden so now on target we need to display the paragraph.

Now when you click on the headline of the accordion the slide will change style to display the content of the slide.

4. Horizontal Accordion

The above code will create the general accordion now we can start to make the CSS changes for the differences between the horizontal and vertical accordion. Both these accordions have the same functionality but the headline styling would be different.

.horizontal section{
      width:5%;
      height:250px;
      -moz-transition: width 0.2s ease-out;
      -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

First we set the width of the headline section to 5% so it is a closed slide. As the section is both the headline and the content for the slide we need to add the animation to display the content by using the transition property.

/*Position the number of the slide*/
.horizontal section:after{
      top:140px;
      left:15px;
}

The position of the number on the slide will be the same position on each closed headline these are positioned differently to the vertical headlines.

/*Header of closed slide*/
.horizontal section h2 {
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
     width:240px;
     position:relative;
     left:-100px;
     top:85px;
}
/*On mouse over open slide*/
.horizontal :target{
     width:73%;
     height:230px;
}
.horizontal :target h2{
     top:0px;
     left:0;
     -webkit-transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
}

The above code will change the size of the slide to fit the rest of the accordion. The headline was rotated vertically to run down the headline but now with the slide open we need to change the text back to be horizontal by rotating the text back to 0 degrees.

accordion horizontal How To Create CSS Based Content Accordion

5. Vertical Accordion

The vertical accordion works the same way as the horizontal accordion except we need to change the height instead of the width and we don’t need to change the alignment of the text.

.vertical section{
     width:100%;
     height:40px;
     -webkit-transition:height 0.2s ease-out;
     -moz-transition:height 0.2s ease-out;
     -o-transition:height 0.2s ease-out;
     transition:height 0.2s ease-out;
}

/*Set height of the slide*/
.vertical :target{
     height:250px;
     width:97%;
}

On the target event of the vertical accordion we are going to change the height of the headline to display the slide.

.vertical section h2 {
     position:relative;
     left:0;
     top:-15px;
}
/*Set position of the number on the slide*/
.vertical section:after{
      top:-60px;
      left:810px;
}
.vertical section:target:after{
      left:-9999px;
}

The above will change the position of the headline text on the closed slide. With the closed slide we need to set the position of the number which is located on the right of the accordion. When the slide is open we need to hide this number on headline when the target is set so we change the left position off the screen.

accordion vertical How To Create CSS Based Content Accordion

Now when you click on the headline of the accordion the slide will change style to display the content of the slide.

Demo & Download

View the demo to see this code in action or download the files to see how it’s all put together, or download the file and browse them offline.

Building Websites and Browser Apps with jQuery Mobile: A Beginner’s Guide

Over the past 2-3 years we’ve seen a tremendous growth in browser and OS support for mobile websites. Most notably Apple’s iOS and Google’s Android platforms come to mind. But others such as PalmOS and Blackberry are still in the mix. Up until recently it was very difficult to match a single mobile theme into all of these platforms.

jquery mobile Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

JavaScript was a start, but there hasn’t been any truly unified library until now. jQuery Mobile takes all the best features of jQuery and ports them over to a mobile-based web source. The library is more like a framework which includes animations, transition effects, and automatic CSS styles for basic HTML elements. In this guide I hope to introduce the platform in a way that you can feel comfortable designing your own jQuery mobile apps.

Features & OS Support

The reason I suggest learning jQuery Mobile over any other frameworks is simplicity. The code was built on the jQuery core and has an active team of developers writing scripts and editing bugs. Of the many features include HTML5 support, Ajax-powered navigation links, and touch/swipe event handlers.

jquery mobile support Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

Support is varying between phones and is broken into a chart of 3 categories from A-C. A is the top tier which boasts full support of jQuery Mobile, B has everything except Ajax while C is basic HTML with little-to-no JavaScript. Luckily most of the popular operating systems are fully supported – I added a list below of just a few examples.

  • Apple iOS 3-5
  • Android 2.1, 2.2, 2.3
  • Windows Phone 7
  • Blackberry 6.0, Blackberry 7
  • Palm WebOS 1.4-2.0, 3.0

If you want to learn more try reading up on their official docs page. It’s not written in gibberish and actually feels very easy to follow along. Now let’s focus on the basics of writing a jQuery mobile page and how we can build a small application!

The Standard HTML Template

To get your first mobile app working there is a set template you should start with. This includes the jQuery base code along with the mobile JS and CSS, all external hosted from the jQuery CDN. Check out my example code below.

<!DOCTYPE html>
<html>
	<head>
	<title>Basic mobile app</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body> 

</body>
</html>

The only foreign elements here should be the two meta tags. The top viewport tag updates mobile browsers to use a full zoom effect. Setting the value width=device-width will set the page width at exactly the width of the phone screen. And best of all it doesn’t disable the zoom features since jQuery Mobile can adapt to shifting layouts.

The next meta tag X-UA-Compatible just forces Internet Explorer to render the HTML in it’s most recent iteration. Older browsers and especially mobile will try to get around unfamiliar rendering bugs.

Constructing the Body Content

Now this is where jQuery mobile can get tricky. Each HTML page isn’t necessarily 1 page on the mobile site. The framework makes use of HTML5′s data attributes, which you can create at a whim by appending data- beforehand. In a similar fashion data-role="page" can be set to multiple divs in a single HTML file, giving you more than one page.

You would then move between these pages with anchor links and a unique ID. This setup is a good idea for basic, simple apps. If you only need 3-5 pages then why not store it all in a single file? Unless you have a lot of written content, in which case try using PHP includes to save time.

Check the code example below if you’re lost.

<body>
<div data-role="page" id="index">
	<header data-role="header">
		<h1>Top title bar</h1>
	</header>

	<div data-role="content">
		<h3>Show another page??</h3>
		<p>hint: click the button below!</p>
		<p><a href="#about" data-role="button" data-theme="c">About us</a></p>
	</div>

	<footer data-role="footer">
		<h2>&copy; footer here.</h2>
	</footer>
</div>

<div data-role="page" id="about">
	<header data-role="header">
		<h1>Page 2 Here</h1>
	</header>

	<div data-role="content">
		<p>just some extra content as well.</p>
		<p>I mean, you can <a data-rel="back" href="#index">go back</a> at any time.</p>
	</div>
</div>
</body>
</html>

Take a look at the anchor link from the index page for a moment. Notice I added the attribute data-role="button" to setup the link as a button. But instead of using the default styles we include data-theme="c". This switches between 1 of 5(themes a-e) templates which come packaged by default as CSS styles within jQ Mobile.

jquery mobile themed buttons Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

My button also spans the entire page width. To remove the behavior we need to set the element from block to inline display. The attribute for doing this is data-inline="true" which you could append onto any anchor button.

Header and Footer Bars

Along the very top and bottom of your applications you should append header and footer content. This design style is often attributed with iOS apps which first became popular using Apple’s mobile App Store. jQ Mobile uses attributes of data-role to define the header, footer, and page content. Let’s take a brief look at these areas.

Top Bar Buttons

By default the top bar supports a set of two(2) links in a similar fashion to other mobile apps. iOS defaults to using a “back” button to the left and often an “options” or “config” on the right.

<div data-role="page" id="about" data-add-back-btn="true">
	<header data-role="header">
		<a href="index.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>
		<h1>Page 2 Here</h1>
	</header>

The code above is just focusing on the div container for our About page along with header content. The additional HTML attribute data-add-back-btn="true" will only work when added onto a page data role. The purpose is to automatically include a back button which works similar to your browser’s back button.

jquery tabs back button Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

We could have added a back button manually with similar code as we used in the content area. But I feel this takes a lot longer to setup especially on multiple pages. All anchor links within the header section will default into left/right button positions. By using class="ui-btn-right" this re-positioned my Settings button so there is free space for the back button. Also I’m using the secondary theme styles to give it some extra spunk!

Footer Navigation

The footer area many not feel very useful at first. It’s a place where you can store copyright stuff and more important links, but this could just as easily be added at the bottom of your content area. So what good is using the footer?

Well the best example I’ve seen utilizes footer space as a navigation system where tab links appear to control the page navigation. There are plenty of options where you can select fullscreen effects, add icons, adjust placement, and a few other attributes as well. But let’s just build a simple footer nav with 3 buttons to get an idea of how this works.

[Preview Live Demo]

<footer data-role="footer" class="ui-body-b">
	<div data-role="navbar">
		<ul>
			<li><a href="#index" data-direction="reverse">App Homescreen!</a></li>
			<li><a href="http://www.google.com/" data-rel="external">Google Me</a></li>
			<li><a href="http://www.hongkiat.com/" data-rel="external">Hongkiat Blog</a></li>
		</ul>
	</div>
</footer>

So here is some footer code for the about page section. data-role="navbar" should be added onto the container element housing an unordered list and NOT the UL element itself. Each link within the list is treated as a tab bar, which then gets equally divided based on the total number of links. The additional class of ui-body-b just adds aesthetic effects as we switch between the few available styles.

ios path app nav bar Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

If you notice on the first button I have the attribute data-direction="reverse". Even though I could use the back button setup as before to return onto the home page, I’ve instead used the page ID of #index. By default the app window will transition to the right which looks pretty tacky since you expect the animation to move backwards. You can play around with even more of these animated effects if you have time. Check out the transitions info page in the jQuery documentation.

Ajax & Dynamic Pages

The first segment has really opened up the key points to building a mobile app with jQuery. But I want to start a new app which loads data from an external page. I’ll be using a very simple PHP script to attain the $_REQUEST[] variable and display a small Dribbble shot accordingly. The screenshow below should give you an idea what we are going to build.

dynamic pages demo Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

First I’ll make an index.html page set on the default template. For this home screen I’m using a list view setup to display each link in order. This is done in the content area with a data-role="listview" attribute on the list container. Cutting out the same header stuff as before, I added all my code from this new index page below.

<body>
<div data-role="page" id="img-listing">
	<header data-role="header">
		<h1>October 2011 Shots</h1>
	</header>

	<div data-role="content">
		<ul data-role="listview" data-theme="c">
			<li><a href="image.php?imgid=1">First image</a></li>
			<li><a href="image.php?imgid=2">Second image</a></li>
			<li><a href="image.php?imgid=3">Third image</a></li>
			<li><a href="image.php?imgid=4">Fourth image</a></li>
		</ul>
	</div>

	<footer data-role="footer"><h3>www.dribbble.com</h3></footer>
</div>
</body>
</html>

Each of the anchor links in my list view point to the same file – index.php. But we’re passing in the parameter imgid as a request variable. On the image.php file we take the ID and test it against 4 preset values. If any match up we use the matching image URL and title, otherwise we just display a default Dribbble shot.

Image Loader Script

The image.php script still has the default jQuery mobile template added into the code. It actually shares a very similar header and footer, except for the addition of our back link attribute data-add-back-btn="true". Notice this button will only show up if we come from index.html first! Try directly loading image.php and nothing will appear since there’s no “back” to move to.

I think we can make a bit more sense of the code by examining my PHP logic first. We use a switch / case method to check against the 4 different IDs and provide a header title, image URL, and original artist source link.

<?php
$theid = $_REQUEST['imgid'];

switch($theid) {
	case 1:
		$heading = "Wunderkit";
		$origin  = "http://dribbble.com/shots/297593-Wunderkit-tasks";
		$source  = "wunderkit.png";
		break;
	case 2:
		$heading = "College";
		$origin  = "http://dribbble.com/shots/298643-Colleeeeeeeeeeeeege";
		$source  = "college.jpg";
		break;
	case 3:
		$heading = "Forum app";
		$origin  = "http://dribbble.com/shots/298649-Forum-app-for-Facebook";
		$source  = "forum-app.jpg";
		break;
	case 4:
		$heading = "Twitter";
		$origin  = "http://dribbble.com/shots/298069-Twitter";
		$source  = "twitter.png";
		break;
	default:
		$heading = "Abandoned lighthouse";
		$origin  = "http://dribbble.com/shots/298615-Abandoned-lighthouse";
		$source  = "lighthouse.jpg";
}
?>

All seems fairly straightforward – even a novice PHP dev should be able to follow along! And if you don’t understand it’s not important to the jQuery code anyway, so don’t worry. We should switch now and take a look at the template I’ve built within this new page. All the HTML code is added after that whole PHP block above. I used the ID of “images” for the container and even setup the header to change with each new photo.

<div data-role="page" id="images" data-add-back-btn="true">
	<header data-role="header">
		<h1><?php echo $heading; ?></h1>
	</header>

	<div data-role="content">
		<p><strong><a href="<?php echo $origin; ?>" data-rel="external">View the Original</a></strong></p>
		<p><a href="<?php echo $origin; ?>" data-rel="external"><img src="img/<?php echo $source; ?>" /></a></p>
	</div>

	<footer data-role="footer"><h3>www.dribbble.com</h3></footer>
</div>

You can probably see how simplistic this demo is. But the whole purpose is to demonstrate the scalability of jQuery mobile. PHP can easily be added into the mix and you can churn out some really neat apps with just a few hours of development.

Fancy Design with List Thumbnails

One last added effect we can implement is the use of thumbnails to liven up listing page. I’m also going to split text into a heading and description box to display both the artwork title and artist’s name.

dribbble image browser app preview Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

To begin open up Photoshop and create an 80×80 px document. I’m going to quickly re-size each image and save thumbnails to match each one. Then updating the list view items we should include a few more elements.

Check out the code below and my demo example to see what I mean.

[Preview Live Demo]

<div data-role="content">
	<ul data-role="listview" data-theme="c">
		<li><a href="image.php?imgid=1">
		<img src="img/wunderkit-t.png" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Wunderkit tasks</h3>
		<p class="ui-li-desc">by Sebastian Scheerer</p></a></li>

		<li><a href="image.php?imgid=2">
		<img src="img/college-t.jpg" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3>
		<p class="ui-li-desc">by Scott Hill</p></a></li>

		<li><a href="image.php?imgid=3">
		<img src="img/forum-app-t.jpg" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Forum app for Facebook</h3>
		<p class="ui-li-desc">by Ionut Zamfir</p></a></li>

		<li><a href="image.php?imgid=4">
		<img src="img/twitter-t.png" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Twitter</h3>
		<p class="ui-li-desc">by Sam Jones</p></a></li>
	</ul>
</div>

The classes for ui-li-heading and ui-li-desc are added by default into the jQuery Mobile stylesheet. This is similar to the image class ui-li-thumb which automatically re-sizes each list view bar according to the image height. Now from here you could build more on the frontend with animations, page effects, stylesheets, etc.

Or alternatively you could begin constructing a backend system to upload new images and automatically trim thumbnails to include in the list. There is so much flexibility with jQuery Mobile you almost can’t label it solely as a JavaScript library. It’s more of an entire HTML5/CSS/jQuery framework for building quick and scalable mobile apps.

Conclusion

As of writing this article the jQuery Mobile team has officially put out RC1.0 of the code library. This means most if not all of the major bug fixes have been squashed and now testers are gearing up for a full release. Because of this you won’t find a whole lot of information on the web.

But as the months advance web developers are sure to pick up on the trend. Mobile applications and even mobile web layouts are growing in popularity with the huge increase in smartphones. Web developers don’t have the time to learn a full programming language for building Android/iOS apps. Thus jQuery Mobile is a slim alternative which includes support for a majority of the mobile industry software, and continues growing each day with an active developer community.

How to Create Gmail logo with CSS3

Couple of months ago I showed you how to create RSS feed logo with CSS3. I figured it’d be fun creating something a little bit more complex. In today’s post, I’m going to show you how to create not one, but two variations of Gmail logo using just CSS3.

preview How to Create Gmail logo with CSS3

Shortcuts to:

Gmail logo #1

This first logo is simple, and fairly easy to created. Without further ado, here are the steps. Let’s start with firing up your favourite code editor and enter the following HTML codes, and save it as logo-gmail.html.

<html>
	<head>
		<title>Gmail CSS Logo</title>
		<style type='text/css'>

		</style>
	</head>
	<body>
		<span class='gmail-logo'>
			<span class='gmail-box'>&nbsp;</span>
		</span><!-- End .gmail-logo -->
	</body>
</html>

Add the following CSS styles between <style></style> to reset default CSS values.

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	display:block;
	font:normal normal 0/0 serif;
	}

The following CSS codes give us the Gmail logo’s red background and a rounded sides.

.gmail-logo {
	margin:110px auto;
	background:rgb(201, 44, 25);
	width:600px;
	height:400px;
	border-top:4px solid rgb(201, 44, 25);
	border-bottom:4px solid rgb(201, 44, 25);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}

1.4 gmail wrap How to Create Gmail logo with CSS3

Then, we proceed creating the white box within the red background.

.gmail-logo .gmail-box {
	overflow:hidden;
	float:left;
	width:440px;
	height:400px;
	margin:0 0 0 80px;
	background:white;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

1.5 gmail box How to Create Gmail logo with CSS3

In order to create the red "M" effect, we’ll first create a box with red border.

.gmail-logo .gmail-box:before {
	position:relative;
	content:'';
	z-index:1;
	background:white;
	float:left;
	width:320px;
	height:320px;
	border:100px solid rgb(201, 44, 25);
	margin:-310px 0 0 -40px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	}

1.6 gmail box before How to Create Gmail logo with CSS3

Then we proceed hiding the excessive sides, giving us a complete "M" in red color.

.gmail-logo .gmail-box {
	overflow:hidden;
	}

1.7 hidden How to Create Gmail logo with CSS3

Now, let’s give two thin red border, giving it the envelope look.

.gmail-logo .gmail-box:after {
	content:'';
	float:left;
	width:360px;
	height:360px;
	border:2px solid rgb(201, 44, 25);
	margin:10px 0 0 40px;
	-o-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	}

1.8 gmail box after How to Create Gmail logo with CSS3

We are almost done. Let’s add some gradient to the red envelope.

.gmail-logo:after {
	content:'';
	position:relative;
	z-index:2;
	content:'';
	float:left;
	margin-top:-404px;
	width:600px;
	height:408px;
	display:block;
	background:
		-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
		/* rgba(255, 255, 255, 0.3) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
		/* rgba(255, 255, 255, 0.2) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-webkit-gradient(
		linear, left top, left bottom, color-stop(0%,
		rgba(255, 255, 255, 0.3)),
		/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
		color-stop(100%, rgba(255, 255, 255, 0.1)));
	}

Last but not least, let’s give it a different color upon hovered. Add the following HTML DOCTYPE before <html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And the following CSS styles before </style>

.gmail-logo:hover {
	background:#313131;
	border-color:#313131;
	/* cursor:pointer; */
	}
.gmail-logo:hover .gmail-box:before {
	border-color:#313131;
	}
.gmail-logo:hover .gmail-box:after {
	border-color:#313131;
	border-bottom-color:#fff;
	border-right-color:#fff;
	}

1.9 hover How to Create Gmail logo with CSS3

Preview | Download source file

Gmail logo #2

Next, we’ll create Gmail logo from another perspective with a little 3D effect. We’ll start with the basic HTML markup.

<html>
	<head>
		<title>Gmail logo 2 </title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<span id='gmail-logo2'>
			<span class='element1'>&nbsp;</span>
			<span class='element2'>&nbsp;</span>
			<span class='element3'>&nbsp;</span>
			<span class='element4'>&nbsp;</span>
			<span class='element5'>&nbsp;</span>
		</span>
	</body>
</html>

Since the logo has a different perspective, we’ll start by rotating it a little and create the layers needed (which we’ll call them elements) in sequence.

#gmail-logo2 {
	margin:0 auto;
	display:block;
	width:380px;
	height:290px;
	-moz-transform:rotate(6deg);
	-webkit-transform:rotate(6deg);
	-o-transform:rotate(6deg);
	transform:rotate(6deg);
	}
#gmail-logo2 .element1 {
	display:block;
	width:380px;
	height:290px;
	}
#gmail-logo2 .element2,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5  {
	float:left;
	display:block;
	width:380px;
	height:290px;
	margin:-290px 0 0 0;
	}

2.1.elements position How to Create Gmail logo with CSS3

Styling .element1::before

#gmail-logo2 .element1::before {
	content:'';
	position:relative;
	margin:2px 0 0 14px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height:276px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	border-radius:22px 0 0 20px;
	-moz-border-radius:22px 0 0 20px;
	-webkit-border-radius:22px 0 0 20px;
	box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.2.element1 before How to Create Gmail logo with CSS3

Styling .element1::after

#gmail-logo2 .element1::after {
	content:'';
	position:relative;
	margin:40px 5px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height:238px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	border-radius:0 18px 26px 0;
	-webkit-border-radius:0 18px 26px 0;
	-moz-border-radius:0 18px 26px 0;
	box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	}

2.3.element1 after How to Create Gmail logo with CSS3

Styling .element2::before

#gmail-logo2 .element2::before {
	content:'';
	margin:22px 0 0 48px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:315px;
	height:14px;
	-moz-transform:rotate(6.8deg);
	-webkit-transform:rotate(6.8deg);
	-o-transform:rotate(6.8deg);
	transform:rotate(6.8deg);
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.4.element2 before How to Create Gmail logo with CSS3

Styling .element2::after

#gmail-logo2 .element2::after {
	content:'';
	position:relative;
	margin:230px 0 0 36px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:310px;
	height:12px;
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.5.element2 after How to Create Gmail logo with CSS3

Styling .element3::before

#gmail-logo2 .element3::before {
	content:'';
	position:relative;
	margin:8px 0 0 42px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:42px;
	height:268px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	}

2.6.element3 before How to Create Gmail logo with CSS3

Styling .element3::after

#gmail-logo2 .element3::after {
	content:'';
	position:relative;
	margin:40px 32px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:22px;
	height:236px;
	-moz-transform:rotate(3.0deg);
	-webkit-transform:rotate(3.0deg);
	-o-transform:rotate(3.0deg);
	transform:rotate(3.0deg);
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.7.element3 after How to Create Gmail logo with CSS3

Styling .element4::before

#gmail-logo2 .element4::before {
	content:'';
	position:relative;
	margin:-2px 0 0 130px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height:192px;
	-moz-transform:rotate(-49deg);
	-webkit-transform:rotate(-49deg);
	-o-transform:rotate(-49deg);
	transform:rotate(-49deg);
	box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	}

2.8.element4 before How to Create Gmail logo with CSS3

Styling .element4::after

#gmail-logo2 .element4::after {
	content:'';
	position:relative;
	margin:12px 88px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height:186px;
	border-radius:30px 0 0 0;
	-webkit-border-radius:30px 0 0 0;
	-moz-border-radius:30px 0 0 0;
	-moz-transform:rotate(53deg);
	-webkit-transform:rotate(53deg);
	-o-transform:rotate(53deg);
	transform:rotate(53deg);
	}

2.9.element4 after How to Create Gmail logo with CSS3

Styling .element5::before

#gmail-logo2 .element5::before {
	content:'';
	position:relative;
	margin:115px 0 0 125px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(55deg);
	-o-transform:rotate(55deg);
	-webkit-transform:rotate(55deg);
	transform:rotate(55deg);
	}

2.10.element5 before How to Create Gmail logo with CSS3

Styling .element5::after

#gmail-logo2 .element5::after {
	position:relative;
	content:'';
	margin:115px 0 0 150px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	transform:rotate(-50deg);
	}

2.11.element5 after How to Create Gmail logo with CSS3

Adjusting the priority of z-index.

#gmail-logo2 .element1::before {z-index:3;}
#gmail-logo2 .element1::after {z-index:1;}
/*#gmail-logo2 .element2::before {}*/
#gmail-logo2 .element2::after {z-index:2;}
#gmail-logo2 .element3::before {z-index:5;}
#gmail-logo2 .element3::after {z-index:1;}
#gmail-logo2 .element4::before {z-index:4;}
#gmail-logo2 .element4::after {z-index:3;}
/*#gmail-logo2 .element5::before {}
#gmail-logo2 .element5::after {}*/

2.12 z index How to Create Gmail logo with CSS3

We are almost done. Your Gmail logo should look something like this:

2.13 gmail How to Create Gmail logo with CSS3

Finally, let’s give it a different color upon hovered.

#gmail-logo2:hover *::after,
#gmail-logo2:hover *::before {
background:rgba(20, 196, 7, 1);
}
#gmail-logo2:hover .element1::before {
	box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element1::after {
	box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element2::before {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element2::after {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element3::after {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element4::before {
	box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	}

2.14 hover How to Create Gmail logo with CSS3

Preview | Download source file