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

July 09 2013

06:30

HTML5up: 14 Totally Free and Modern Templates Made With HTML5


  


  

If you happen to be looking for ready-made website-templates you need not search for long. Google brings up a bunch of sites, here at Noupe we don’t abandon you on that search either. When it comes to Google findings, chances are, you will, in most cases, not really be satisfied by the available quality of code or layout. In these case, read: in any case, you should visit the new service HTML5up. What you will find here are really elegant and modern templates for contemporary websites based entirely on HTML5 and CSS3, with a bit of JavaScript, obviously. These templates are not only entirely beautiful, they are also completely free.

May 31 2013

17:00

All You Need To Know About CSS3 Selectors, #1: Structural Pseudo-Classes


  
zombie-apocalypse-2

Today’s front-end developers don’t just need to understand how to write CSS, we need to know how to write it efficiently. And what “efficiently” means can depend on your project and environment. Perhaps you have a team with several members working in the CSS and you need an efficient way to work together. Or maybe you have a huge enterprise site and you need your CSS optimized for speed. You could even be working with a legacy system that restricts access to HTML, which means you need efficient selectors to effectively style elements without ids or classes. You might even face all these situations and more.

April 22 2013

02:30

34 Free Open Source CSS Code Snippets for Developers

Advertise here with BSA


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

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

Glossy Buttons

bright css3 glossy buttons

Facebook Login Form

css html website login form effects input

Dark Datepicker

dark website interface date picker ui

Pricing Table

css3 html5 pricing table buttons freebie

Social Buttons

css3 social media buttons designs

Notification Windows

css3 warning windows html5 open source

Dark and Light Dropdowns

select menu lists input form dark light ui

Newsletter Signup Form

newsletter signup subscribe box effect

Dark Pagination

dark pagination ui effects website

Settings Panel

mac osx settings input panel css3 open source

Multi-colored Buttons

shiny multi-colored buttons css3 html5

Notification Badges

small css3 icons badges notify ios navigation freebie

Flip-Down Clock

static css3 clock paper effects rolodex

Share Buttons

social media sharing buttons freebie open source

Modal Contact Form

bright modal contact form input effects css3

Notepaper Blockquote

css3 notepaper block quote effect

Toggle Switches

pure css3 user input toggle switches open source

Metal Progress Bar

metal progress bar ui html5 css3 freebie

OSX-Style Window

transparent mac osx window made using css3 html5

Search Dropdown

search input dropdown menu suggested open source

Mini Social App

mini twitter social app ui interface css3 freebie

Month Picker

css3 generated input freebie month selection

Animated Progress Bar

css3 animated progress bar interface ui

Inset Side Navigation

inset side navigation effects freebie open source

Login Form

cssflow freebie snippet login form css3 html5 download

Dark Navigation

horizontal dark navigation tabs menu links

Light Horizontal Nav

light horizontal navigation bar tabs links freebie open source

Dark Horizontal Nav

dark block buttons navigation links css3 html5

Animated Profile Popover

user profile features popover hover effects open source

3D Buttons

html css3 3-d buttons freebie download codes

Sliding Tags

sliding blog tags posts count number jquery css3

Accordion Menu

vertical html5 css3 accordion menu interface design

Tabbed Navigation

css3 tabbed navigation toolbar effects design

Mini Dropdown Menu

dark dropdown menu css3 mini effects ui


Advertise here with BSA

April 16 2013

11:52

5 jQuery Plugins to Breathe Life into your Texts


  
jquerytexteffekte_slidingletters-w550 Texts are primarily made for reading. Yet, at least sometimes, we want them to be apparent, eye-catching. A set of jQuery plugins provide possibilities to animate texts in various ways. We have come up with five of the best of them.

April 15 2013

17:45

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


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

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

13:00

Creating a CSS3 Dropdown Menu – Video Tutorial

We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, around 40 minutes, this is because I have gone into great detail explaining the process. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3.

April 08 2013

13:00

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to get hear some of your opinions very, very much!

Create a Responsive Website – Video Tutorial

07:00

April 06 2013

14:25

Unusual Code Checker: Holmes Validates HTML, Uses CSS To Do So


  
holmes-w550 Of course it is advisable, no, mandatory to have your source code checked, double-checked and validated to avoid errors and to ensure standards compliance. Instead of having your project run through one of the many validators out there, you can opt to use the brand-new diagnostic tool by the clever name of Holmes to achieve the same. Holmes is a tool, that uses CSS to check your source code for non-compliant and invalid HTML. Here is how it does it...

March 16 2013

13:00

CSS3 Introduction – New Features, What it Can Do, and Resources

A short time ago I posted an introduction article about HTML5 and I promised you a CSS3 introduction and what new things it brings to the industry, although it’s been some time since it was officially released. If you didn’t read the article on HTML5 yet, I strongly advise you do so, as CSS3 works better with the latest markup language from the World Wide Web Consortium.

CSS2 appeared back in 1998 and since then a lot has happened on the internet. Its only revision was made in 2011, CSS2.1, but experts in the industry say it was only a matter of time until CSS3 should have been released, as the features it comes with are entirely necessary and were missed during the past years. What many people didn’t know about CSS3 was that its development started only one year after the submission of its previous version. So the W3C has been working on this improved version since 1999, for more than 12 years until the first CSS3 stable version was released.

Although it sounds like there is a big difference between CSS2 and CSS3 (which is quite true), all modern browsers were quite quick to adopt the new addition to the W3C family. All major browsers support most CSS3 features that are currently available. As with HTML5, the Consortium still considers CSS3 to be under continuous development and it is very unlikely for it to get a final version, for the same reasons HTML5 will probably not. With the web requirements, and the industry in general, changing so fast, coding needs to move forward at the same pace.

Main differences

Maybe the biggest difference between CSS2 and CSS3 is the separation of modules. While in the previous version everything was a large single specification defining different features, CSS3 is divided into several documents which are called modules. Every single module has new capabilities, without hurting the compatibility of the previous stable release. When we talk about modules, we can name more than fifty of them, however four of these have been published as formal recommendations. The big four is comprised of the following:

  • Media Queries (published in 2012)
  • Namespaces (published in 2011)
  • Selectors Level 3 (published in 2011)
  • Color (published in 2011)

The media queries might well be the most important addition to CSS. What it does is simple: it allows certain conditions to be applied to different stylesheets, making websites fluid and fit all kinds of screen sizes. Media queries allow developers to tailor to different resolutions without having to change or remove content.

media queries

Example of a responsive grid built with media queries

Media queries work very easily and once you have used them once you are pretty much set. Let’s look below at some lines of code.

@media screen and (max-width: 600px) {
    background: #FFF;
}

By starting to style in the media query above, you will only style for screens with a maximum width of 600 pixels. In the example above, all screens with a maximum width of 600 pixels will show you a white background. However, the max-width is not the only condition you can apply to a stylesheet. You can use max-device-width too (which is the screen resolution, unlike max-width which is the viewing area), you can use min instead of max, but you can also combine two conditions, such as in the example below, which will only apply for screens with a viewing area between 600 and 900 pixels.

@media screen and (min-width: 600px) and (max-width: 900px) {
    background: #FFF;
}

CSS3 has some pre-defined stylesheets for portable devices, such as iPhone or iPad, which you can see below:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

and

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

As you can see above, the media queries can come in quite handy when developers need to make fluid grids work on different devices with different screen sizes.

Some other important design considerations of CSS3 are, for example, the borders, which now can be made rounded without hacks. CSS3 has actually introduced rounder borders, which is a huge help for designers and developers. However, many of these features do not work in older versions of Internet Explorer , but this is not something new for us, we’ve heard it before. The only code you need to add in the stylesheet (in the specific class) is something similar to:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;

As you can see, it is much easier than before. Gradients are also available in CSS3, another cool addition that we have wanted to see for some time, as well as box/text shadows and border images. In order to add text shadow to content without any hacks, CSS3 simply requires something similar to the following line of code:

text-shadow: 2px 2px 2px #ddccb5;

Creating columns for content has never been easier than with CSS3, as now you have four lines of code you can use at any time. These are:

  • column-count
  • column-width
  • column-gap
  • column-rule

Another great time saver is the option of inserting multiple background directly from CSS, instead of using all kinds of hacks as we used to do before. The code is simple to write and to remember, and I am sure you will use it at some point in time.

.multiplebackgrounds {
height: 100px;
width: 200px;
padding: 20px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}

Vendor prefixes

Back when CSS3 was newly released, vendor prefixes were used all the time, as they helped browsers interpret the code. Sometimes you still need to use them today, in case the browser you are testing in doesn’t read the code. So below is a short list with all the vendor prefixes for major browsers:

  • -moz- : Firefox
  • -webkit- : Webkit browsers such as Safari and Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Note that, according to an official press release from a few weeks ago, Opera will soon build their new desktop and mobile browser on webkit too, instead of their current Presto rendering engine. This means that the -o- vendor prefix will disappear at some point in time, leaving us with only three major ones.

Browser logos

Vendor prefixes are used in order to make CSS3 compatible with all major browsers

New pseudo-classes

The arrival of CSS3 brings us a bunch of new pseudo-classes, including structural ones, that target elements based on their position in the document and relation to different other elements.

  • :only-child – in case you have an element in the document tree that is the only child of its parent, it can be targeted by this pseudo-class.
  • :empty – targets elements that don’t have any children or any text, for example an empty element such as <p></p>.
  • :nth-child(n) – it takes advantage of numeric (n) values and targets child elements in relation to their position within the parent. To give you a precise example, a list of blog comments would probably look more appealing with alternating background colors – this can be done using this pseudo-class.
  • :first-of-type – this targets the first of a specific type of element within a parent, and is the opposite of :last-of-type.
  • :first-child – targets the first child element in a parent, regardless of its type. It is the opposite of :last-child.
  • :not(s) – this one targets elements that are not matched by the specified selector (s).
  • :root – this one targets the root element of a document.

There are more pseudo-classes added to the new CSS3, but as this is basically an article for beginners, it is not really worth mentioning them.

Examples

There are not many examples of CSS3 that I can show you, as it usually is used in collaboration with HTML5 or jQuery. CSS is for styling and enhancement, not for creating applications. Therefore there are only two interesting links I want to share with you.

1. Rotating Multiple Images

rotating multiple images

2. Robot Animation

Robot Animation

Where to learn?

As I advised you in the HTML5 article (and even much more now), CSS3 is impossible to master unless you have prior CSS knowledge. I assume, since you’ve read this article, that you have prior CSS experience, so you just have to build on that. Otherwise you need to take it from the top. In order to ease you into the CSS3 learning process, I will recommend several sources below:

Conclusion

HTML5 and CSS3 are here to stay, and in combination these two tools are very powerful and can create beautiful, high-quality solutions. Therefore you need to learn them and start using them today, otherwise you will fall behind your competitors.

As promised before, I will start working on putting together several HTML5/CSS3 tutorials so that you will be able to learn even more from 1WD. However, until that comes, please make sure you have at least some basic knowledge of HTML5 and CSS3, so that we are all on the same page when we start. See you next time!

March 11 2013

13:00

HTML5 Introduction – What is HTML5 Capable of, Features, and Resources

After analyzing our new focus here at 1WD, which basically is teaching new, young, designers about web design and helping them improve their skills and to start in the business, we realized that we really need to go as deep as possible into the basics. And while we covered many of these already, two basic things are still missing from the website, and these two are in-depth introductions and discussions about HTML5 and CSS. Therefore it is one of my assignments for the next period to teach you about these two technologies and, after this, to create several tutorials for you. So in the next two to three months, I will cover aspects of front-end web design, basic coding and tutorials about them. Buckle up and get ready to become better at coding!

What Is HTML5?

HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011. In 2011, HTML5 was released and people started writing about it and using it, but the support in different browsers was still poor. Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support, therefore the newest HTML technology can be used at its best today.

html5 logo

The official logo of HTML5

HTML5 works with CSS3 and is still in development. W3C plans to release a stable version next year, but it still looks like this is a long shot. Since its release, HTML5 has been in continuous development, with the W3C adding more and more impressive features, therefore it seems quite unlikely that HTML5′s development will end soon, which is not necessarily a bad thing.

HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet has changed significantly since 1999 and it seemed like the creation of HTML5 was necessary. The new markup language was developed based on pre-set standards:

  • New features should be based on HTML, CSS, DOM, and JavaScript.
  • The need for external plugins (like Flash) needs to be reduced.
  • Error handling should be easier than in previous versions.
  • Scripting has to be replaced by more markup.
  • HTML5 should be device-independent.
  • The development process should be visible to the public.

What’s new?

HTML5 was created to make the coding process easier and more logical. You will see a bit later that many syntaxes are now deprecated and soon to be kicked out through the back door. The unique and impressive features HTML5 comes with are in the multimedia department. Many of the features it comes with have been created with the consideration that users should be able to run heavy content on low-powered devices. The syntactic features include the new <video>, <audio> and <canvas> elements, but also integration of vector graphics content (what we knew before as being the <object> tags). This means that multimedia and graphic content on the web will be handled and executed easier and faster, without the need of plugins or APIs.

There are a bunchload of new syntaxes added, but below I will name and describe the most important. The rest of them can always be found in W3C’s HTML5 section.

  • <article> – this tag defines an article, a user comment or a post, so an independent item of content
  • <aside> – the aside tag marks content aside from the page content, which for example could be a lateral sidebar
  • <header>, <footer> – you won’t need to manually name IDs for headers and footers, as now you have a pre-defined tag for them
  • <nav> – the navigation can now be placed in the markup in between the nav tags, which will automatically make your lists act like navigation
  • <section> – this is another important new syntax, as it can define any kind of sections in your document. It works pretty much like a div which separates different sections.
  • <audio>, <video> – these two obviously mark sound or video content, which will now be easier to run by devices.
  • <embed> – this new tag defines a container for interactive content (plugin) or external application
  • <canvas> – the canvas tag is quite exciting, as it allows drawing graphics via scripting (mostly JavaScript, but some others can be employed as well)

What is important to remember is that the new HTML5 tags do not always work as the ones before. For example, the header and footer tags will not only mark the start and the end of a page, but also the start and the end of each section you have. This means that these two tags are likely to be used more than once in the whole page. In the illustration below can you see what I mean.

html5 code example

Example of how HTML5 code looks like

Oh yes, and the DOCTYPE declaration finally makes some sense. Or, at least, this time it is much simpler than before and it is very easy for us to remember and we won’t have to search for it on the web or copy it from site to site. <!DOCTYPE html> closed by </html> at the end of the page is something we waited for for a long time to come and now it finally is here.

Moreover, complex XHTML declarations many of us used before can now be replaced with <html lang=”en”> and long encoding declarations can simply be written in this way: <meta charset=”utf-8″>. Can it get simpler than that? It most definitely can’t.

The following tags from HTML 4.01 are now removed from HTML5, therefore browsers do not offer support for them anymore. This means that it is a good idea to go back to your HTML pages and check for them, as they might disrupt the design in the latest browsers.

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

Things to know about HTML5

It is crucial to remember that HTML5 is built on the success of its previous version, HTML 4.01, which is undoubtedly the best version ever. In order to be better at using HTML5 you do not need to forget everything about the previous version. You are not learning a totally new language here. Keep your beloved syntaxes and keep the way you used to format your code, only remember that now you need to build upon the coding skills you already have.

In case you have absolutely no knowledge of HTML and you want to start now, I advise you to start with HTML 4.01 and only when you master it move onto HTML5. Starting with the latest version is like learning to run before learning to walk – which is impossible as far as I know. HTML 4.01 still contains the basics of HTML5, therefore in my opinion you should have strong knowledge of former HTML versions in order to be able to master HTML5.

The upside of learning HTML5 now is that the new markup language works right away. You can basically do whatever you want with it today – and it is supported in all major browsers. From video to geolocation, local storage and microdata annotations, HTML5 is something we need to start using. If you are in the design business, sticking with HTML 4.01 is a mistake, because everybody will move on while you will remain behind.

HTML5 is definitely here to stay. It is created to sustain today’s necessities and especially because it is in continuous development, it will be able to sustain the changes that will happen in the industry for quite some time. One of the reasons behind HTML5 taking so much time to develop is because the W3C had to analyze lots of factors and think of the future. They took their time and finally delivered something that can easily be labelled as a high-quality product.

Examples

In order to show you how far HTML5 actually got, I will showcase some websites and applications made with the new markup language, so you can see how much you can actually do with it.

1. Read is a HTML5 responsive theme made for WordPress. It is minimalistic, very simple to understand and use, loads faster than ever and it is not expensive at all.

html5 responsive theme

2. SmartStart is another incredibly simple to use HTML5 template.

html5 theme

3. BIZfolio is also made with HTML5, but it is not a simple template or a WordPress theme. BIZfolio is developed so that it works with Drupal.

drupal html5 theme

4. We start looking at applications by showcasing this simple Poker Blind Timer made with HTML5

blind timer

5. Coolendar is a great calendar application developed with HTML5, which can be both found for computer and portable devices (Android and iOS).

coolendar

6. Scribd is built with HTML5 and allows users to have easy and quick access to different files and documents other users upload.

scribd

Besides websites and applications, developers created games based only on HTML5, instead of Flash as it was before. Here are some addictive HTML5 games out there. Check it out, some of the games are really entertaining.

20-addictive-html5-games-for-you-to-enjoy

Where to start?

HTML5 can’t be taught in a brief introduction. There are two ways to learn it as I see it. Either grab a good HTML5 book, or go out there and actually do it. I recommend both. I myself learned HTML and CSS from the internet, but there is some valuable information that you can get through reading a book and there is some valuable information that you can only get by practising  If you already have a solid understanding of HTML 4.01, it shouldn’t take more than a week or two to grab the necessary HTML5 skills from a book. And then the world is yours, you can go out there and practice.

html5 book

Jeremy Keith’s HTML5 book on several devices

To help you even more, I gathered a collection of good and respected books and tutorials you can start reading. I hope that by the time I will start posting tutorials, more of you will be able to code in HTML5 than in HTML 4.01. So this is where to start guys:

Books

Guides and tutorials

1WD’s HTML5 Book

html5-elements-one-day

Check out our eBook now!

Up Next

After the CSS3 introduction article, which should be online soon, we will start together with some more complex HTML5/CSS3 tutorials, so stay tuned. We will create HTML5/CSS3 templates from scratch, menus, accordions, create signup forms, pricing tables and combined with jQuery, we will make some beautiful effects. We will do some great stuff together in the upcoming months!

September 02 2012

10:49

Metro UI CSS: You can have a tiled website too


  

Microsoft’s new UI, once known by the name of Metro, has caused quite some buzz in the tech world. Meanwhile the name has been dropped, which again caused quite a buzz in the tech world. We don´t know why this was done nor do we know if the next Windows will be a market success. What we know is, that Metro as a design style has its fans. If you are one of them, we have great news for you. Thanks to Metro UI CSS you can give your very own website the same tiled look, the interface of the next generation Windows will have. Go ahead!


Metro UI CSS

Metro UI CSS is actively developed by Sergey Pimenov, who proves generous enough to leave the tool for us to use free of charge under the MIT license. Pimenov not only copied the typical Metro design, but also implemented a variety of effects from the original Microsoft product, for example the fade-in of subtitles on pictures or the switch buttons.

Metro UI CSS: A feature-rich framework

Get your own impression of what Metro UI CSS is capable of by visiting the demo. You’ll find several pages with examples of how pictures, forms, buttons and the typical tiles, bound to substitute the former Windows icons, look and interact.


Metro: Tiles

Ever seen Metro on a tablet? On these devices, Microsoft implemented vertical scrolling as the standard scroll direction. That’s just the way Pimenov implemented it in Metro UI CSS. Using a touch-device you can elegantly scroll through your website. You’re not forced to, though, as mouse scrolling is also supported.


Metro: Buttons

Metro UI CSS: Made with, yes, CSS and JavaScript

Metro UI CSS is not pure CSS, but relies on several JavaScript libraries for advanced functionality. The foundation is, as it often is, jQuery with some complementing plugins and the new superstar Bootstrap. Pimenov wants it mentioned, that he also integrated some of his very own JavaScript functions.


Metro: Pictures

If you like to learn along the guidelines of a thorough documentation, Metro UI CSS is not for you. Because there simply is no documentation. The demo can be downloaded, that’s it.  But it contains all elements for which the Metro style is available and thus should be a good starting point for the first steps to your very own tiled website. Several effects are invoked simply by calling the corresponding classes. You can easily find out by sneaking through the source code. Metro UI CSS needs a modern browser. Microsoft’s own Internet Exploder is supported from version 9 onwards.

(dpe)

September 01 2012

18:56

Brand-new Firefox 16 Beta lays a sharp focus on web developers


  

It’s been merely a few days, since Firefox 15 has seen the light of day in its final version. But the Mozilla crew isn’t lazy and has already pushed out the beta of Firefox 16. Since August 30th Firefox 16 can be downloaded for all the usual platforms. Even a version for Android is already available. This time Mozilla doesn’t only target the end-user with some shiny new functionalities. This time Firefox is all about the web developer. Improved developer tools, including a brand-new command-line, and the unprefixing of several important CSS properties will have the community cheer.

Mozilla Firefox 16: It’s hyperactive developers code like crazy

It’s not always the case that shortened release cycles lead to a higher speed of innovation. Regarding Firefox, though, it does. Looking back at the times where Firefox got updated twice a year, we can clearly see how fast-paced they go now. Say thanks to Google’s Chrome for starting a new era. No browser vendor can afford slow-paced development any longer, if they don’t want to get lost along the way. Firefox is going full throttle. Of course that’s nothing to complain about. The product is improving faster than before and the changes make for a better user experience with every new release.

As Firefox is a product for the masses, the average internet user, we as developers shouldn’t wonder that most updates target the end-user. Higher speed, new user interface, improved sharing, mobile clients and what not. But this time Firefox focusses on the developer community.

Firefox 16: Unprefixing of important CSS properties

CSS3 is constantly gaining momentum. Vendors are implementing the functionality faster than could have been hoped for. It’s mobile browsing on Android and iOs that’s forcing for a faster innovation speed. Firefox got a little behind as of lately and is now hoping to gain some ground in it’s constant battle against Chrome. Version 16 brings the possibility to unprefix several important CSS properties as there are:

  • CSS3 Animations
  • Transforms
  • Transitions
  • IndexedDB
  • Battery- and Vibration API
  • Image Values (The Image Values module defines how properties link to pictures via URL. All properties taking pictures as values use this module, e.g. “background-image” and “list-style-image”)
  • Values and Units (…that CSS properties can have)

Firefox 16: Developer Tools introduce new command-line

Is it the best invention since canned beer? I don’t know. But what I know is, that the improvements to the Developer Tools will be enjoyed by the community, to say the least. Mozilla has further centralized tools that where somewhat cluttered around the interface. Now it’s even easier to access all developer related functionality from one place. Even better than that is the implementation of what Mozilla calls the Graphical Command Line Interface (GCLI), which is a command line tool for accessing most of the browser’s functionality right from the keyboard without having to click around. We all know that a lot of developers claim to be much more productive when they are able to leave their fingers on the keyboard.

The command line can be called using the navigation menu or by a keyboard shortcut (see where that leads?). Once opened, developers can use simple commands to call whatever functionality they like to address. The command line is not limited to control the Developer Tools though. The command help console tells you the available commands and their parameters. After fiddling around a little, you’ll soon notice, that the functionality of the command-line is much more powerful than can be seen at first sight. You can even address CSS selectors oder HTML elements individually.

The command pref, combined with corresponding parameters can be used to change configuration options directly. Using the command resize to responsive designs can be tested. You can even take screenshots right from that tiny little command line. What’s even better, Mozilla promises to improve the command set of the GCLI in upcoming releases.

Watch Mozilla’s video for a first impression:

Web developers should really take a thorough look at Firefox 16 now. It’s well worth it!

Related links:

Tags: CSS3

August 13 2012

07:00

How To Create a Pure CSS Dropdown Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

View the pure CSS dropdown menu demo

The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.

View the pure CSS dropdown menu demo

The HTML Structure

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a></li>
		<li><a href="#">Articles</a></li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a></li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.

HTML menu

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The CSS Styling

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the display:block; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

HTML menu

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

HTML menu

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

HTML menu

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

The Completed Pure CSS Dropdown Menu

View the pure CSS dropdown menu demo

View the pure CSS dropdown menu demo

July 25 2012

10:50

How to Use Custom Fonts in Your Web Designs with CSS3

Advertise here via BSA

IMG_0883

The purpose of this tutorial is to show you how to use the latest version of CSS (CSS3) to use a custom font within your website. Nowadays, we’re looking for new and exciting ways to present our sites and there’s no better way to add an extra bit of personality to your website than including a wonderful custom font.

For this tutorial, I’ll be using a splendid text editor called Chocolat and using Safari but you can use any text editor and modern, good web browser to follow along.

Getting the Font

First, we need to get a font and then convert the font file into separate files for various browsers.

1. To start off, I’ll be using a font called FV Granada but you can use any TrueType font. I encourage you to get a font that is sans-serif. You can find fonts online — here’s my personal favourite for free fonts.

2. Next, we’re going to convert the TTF file that we’ve downloaded. To do this we’ll use the FontSquirrel Generator. Go there and click the ‘Add Fonts’ button, select Optimal and agree that you’re not doing anything illegal.

3. Your fonts should download and if you open the zip, you’ll find that several different files have been downloaded. We’re interested in the .eot, .woff, .ttf and .svg files, so copy them to the directory in which you’ll be storing them for use on your website.

Applying the Font

Now, we’re going to set up a basic HTML page and add the required CSS3 code to get the fonts working with your website.

1. Create two new files, index.html and stylesheet.css.

2. Make sure you save both of those files within a directory along with the fonts. For this tutorial I have a folder called ‘Custom-Fonts’, with an index.html and stylesheet.css in the first level and I’ve created an additional folder called ‘fonts’ to contain all of our font files.

3. Set up the basic structure of the HTML document — open up index.html within a text editor and set up a HTML document. Pull the CSS document in. Create a div for your title with an id of main-title and one for your content with an id of container. See the screenshot for details.

Screen Shot 2012-07-15 at 14.11.31

4. Now, head over to stylesheet.css and add the following code:

@font-face {
	font-family: 'FVGranadaRegular';
	src: url('fonts/fvgranada-regular-webfont.eot');
	src: url('fonts/fvgranada-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/fvgranada-regular-webfont.woff') format('woff'),
		 url('fonts/fvgranada-regular-webfont.ttf') format('truetype'),
		 url('fonts/fvgranada-regular-webfont.svg#FVGranadaRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

#main-title {
	font-family: 'FVGranadaRegular';
	font-size: 72px;
	text-align: center;
	padding-top: 30px;
}

#container {
	font-family: 'FVGranadaRegular';
	font-size: 24px;
	width: 800px;
	padding-top: 30px;
	padding-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
}

Screen Shot 2012-07-15 at 14.25.26

In the above code, the main thing we want to worry about is the @font-face tag. This defines all of our font files and their locations.

5. If you open up index.html within a web browser, you should find the text uses your custom font. Neat! If you find that your font isn’t applied then it’s likely that you have placed your fonts incorrectly. Go back to stylesheet.css and ensure that the src attributes for the font files are correct. If everyone is where it should be and they still don’t work, you may need to upgrade your browser.

There we have it, you have successfully applied a somewhat confusing CSS3 technique successfully and now you’re able to apply a custom font to all of your work!

Click here to download the source files.

Screen Shot 2012-07-15 at 14.14.30

July 23 2012

07:00

10 CSS Rules Every Web Designer Should Know

Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal.

@media

@media screen and (max-width: 960px) {

}

The @media rule not only allows you to specify styling for your web page when printed. These days media queries are more associated with the creation of responsive or adaptive website designs. Create a media query using properties such as min-width to adjust your design according to the user’s viewport size.

background-size

body {
	background: url(image.jpg) no-repeat;
	background-size: 100%;
}

A cool and extremely useful CSS3 property that has now gained thorough browser support is background-size. At one point making a background scale to the size of its parent required some right messing around, but now just one line of code is all you need. Use this snippet to achieve the ever-popular full screen background image effect.

@font-face

@font-face {
	font-family: Blackout;
	src: url("assests/blackout.ttf") format("truetype");
}

One CSS3 property that has really helped transform the web over recent years is @font-face. We previously had all kinds of limitations regarding font licensing which held back this property, but now there’s bucket loads of fonts to choose from and a range of services that build upon the basic @font-face code. Use @font-face manually with freely available fonts, or via third party services such as Google Webfonts or Typekit.

margin: 0 auto;

#container {
	margin: 0 auto;
}

The clever margin: 0 auto; declaration is one of the first snippets you learn when getting to grips with CSS. It’s surprising that no specific declaration for centering a block element was ever added to the CSS spec, but instead we’ve all come to rely on the auto margin workaround. Add margin: 0 auto; to centre any block element within its parent.

overflow: hidden

.container {
	overflow: hidden;
}

There’s all kinds of float clearing solutions and hacks out there, but one pure and simple way to clear your floats is to simply use the overflow: hidden; declaration on the container of your floated elements. It doesn’t add a load of garbage to your stylesheet and it gets the job done in 90% of scenarios.

.clearfix

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

For those float clearing situations where overflow: hidden; doesn’t work, the best alternative is the clearfix technique. Remember you don’t have to use the clearfix class name, your could target this code to any of your HTML elements individually.

color: rgba();

.btn {
	color: rgba(0,0,0,0.5);
}

PNG images used to be required for creating any kind of transparency effects in web design, but thanks to another advance in CSS transparency can now be created with the help of the RGBa color mode. Using RGBa in place of a hex value allows you to select a colour using its red, green and blue channels as well as setting an alpha level, such as 0.5 for 50% opacity.

input[type="text"]

input[type="text"] {
	width: 200px;
}

The input[type="text"] selector and advanced selectors as a whole are great for taking your CSS skills from intermediate to expert. Attribute selectors in particular are extremely useful for styling elements without the need for additional classes. What about using attribute selectors to target the submit version of an input element or add an icon to external links?

transform: rotate(30deg);

.title {
	transform: rotate(30deg);
}

If I’m honest I’ve yet to find a use for CSS transform properties in a real design project, but the ability to manipulate HTML elements without Javascript is so cool it makes these properties worth remembering! Combine transform properties with CSS transitions to create some fun animation effects.

a {outline: none;}

a {outline: none;}

Nothing can spoil a design more than seeing a huge dotted outline spanning across the whole page when you click a link element. The a {outline: none;} declaration will remove this, but for accessibility don’t forget to also add :focus states to your links. If you don’t mind seeing the dotted border but wish it didn’t span the whole screen, just add a {overflow: auto; } to your stylesheet instead.

July 18 2012

08:19

A New Collection of Free HTML5 and CSS3 Templates


  

Professionally designed and neatly coded templates always make life easier for developers, not only because they save time, but also for the effort they save. Since web development is an ever expanding field, it is important for developers to keep their work up to date with the latest changes. HTML5 and CSS3 templates are there to make your websites future proof and make them even more accessible.

In this round up, we are presenting a brilliant collection of some fresh and free HTML5 and CSS3 templates that you can download today. With these templates, you can also learn how to code your websites in HTML5 and CSS3. So, enjoy looking into this collection we have compiled for you.

The Templates

Template for Powerful Business Startup ( Demo | Download )
The visually pleasing layout is the first thing that catches the attention when you look at this theme, but it’s certainly not the last. Along with cool graphic elements and hand-written typography, this free website template will provide you with the functionality you need for a good start for your online business.

Screenshot

Animated Neoarts ( Demo | Download )
This is a modern and elegantly designed web template suitable for Design/Studio websites. All-in-One page with an animated theme.

Screenshot

Vintage – HTML Template ( Demo | Download )
This is a responsive blog template that comes with a retro touch. You can use this template for a stylish portfolio.

Screenshot

Template for Restaurant Business ( Demo | Download )
This free website template features an attractive and functional design, which is important for attracting visitors’ attention and making the time they spend at your site pleasant. Geared towards a restaurant, this high-grade theme comes with a stylish layout in an elegant color scheme, with a jQuery slider, and a nice gallery for the images you have.

Screenshot

Simpler ( Demo | Download )
As the name indicates, the template is relatively simpler than the other templates presented in this collection. It has a fixed layout which is made in HTML5.

Screenshot

Free Template for Spa Salon with Zoomer Effect ( Demo | Download )
If your business deals with offering a wide variety of beauty services, try this nicely done ready-made template for starting up your project. The pleasant color scheme turns out to be a good background for the wonderful images from your collection. The neatly arranged content blocks in the main part of the theme are intended to present all the necessary information in an effective way.

Screenshot

CSS3 Design One ( Demo | Download )
CSS3 Design One is a simple two column fixed width template, with a jQuery drop-down menu, jQuery image fader and working PHP contact form. It utilizes @font-face, and CSS3 rounded corners / text shadow.

Screenshot

Zen ( Demo | Download )
This free website template is best suited for the personal blog pages. The template has been designed by using HTML5 and looks visually appealing.

Screenshot

Template for Web Design Studio ( Demo | Download )
Though this theme can be used for many other purposes, it was primarily designed for web design studios. It is a user friendly and visually appealing web template.

Screenshot

Caja ( Demo | Download )
This creatively designed web template is ideal for those who want to make certain files available for download on their websites as well as want to showcase their work.

Screenshot

Scenic Photo Two ( Demo | Download )
Scenic Photo Two is a simple two column fixed width template, with a jQuery drop-down menu and scenic photographic background image. With a working PHP contact form, it utilizes lots of CSS3 features.

Screenshot

Watercolor ( Demo | Download )
This template comes with a fixed layout however you can choose from 4 different skins that are available. It is a friendly XHTML/CSS template.

Screenshot

Responsive Brownie ( Demo | Download )
A brilliant responsive HTML5 template aimed at businesses and portfolios.

Screenshot

Simple ( Demo | Download )
Simple is a neat and clean web template that offers more 7 page layouts, jQuery functionality, 2 Cufon fonts to choose from, loads of background patterns, as well as one sprite file image.

Screenshot

Immaculate 2 ( Demo | Download )
This free HTML5 website template is suitable for blogs and personal websites.

Screenshot

Folder ( Demo | Download )
This is a responsive HTML5 template that can be used with any device and browser size without any problem. This is an ideal template for creative showcases and businesses.

Screenshot

PhotoArtWork2 ( Demo | Download )
PhotoArtWork2 comes with 3 different image galleries, a jQuery drop down menu, as well as a functional PHP contact form. This template is suited for photography related and portfolios websites.

Screenshot

Left ( Demo | Download )
This web template is designed in HTML5 and offers more than 6 page layouts with a unique skin system that can create a new skin appearance within minutes.

Screenshot

PhotoArtWork2_reverse ( Demo | Download )
This is another version of PhotoArtWork2 that is a complete web template with easy to customize options.

Screenshot

Muro ( Demo | Download )
This is another brilliantly designed web template that comes with 3 different skins, 7 page layouts as well as jQuery functionality.

Screenshot

Torn ( Demo | Download )
Torn is an XHTML web template that offers 5 pre-defined skins and 7 page layouts along with jQuery functionality.

Screenshot

Template for Horse Club ( Demo | Download )
Horse Club is one of the free website templates created by the Template Monster team.

Screenshot

CSS3 Seascape Two ( Demo | Download )
This template offers a 2 column fixed width template with a jQuery drop down menu, image transitions and PHP contact form.

Screenshot

Photo Style Two ( Demo | Download )
Photo Style Two web template also offers a jQuery drop down menu, image fader and PHP contact form.

Screenshot

Template for Business Project ( Demo | Download )
If you want your website to look as efficient and professional as possible then you should opt for this free web template. It focuses on the main points of your business and highlight them to grab the attention of the visitors.

Screenshot

Connoisseur ( Demo | Download )
With this web template, you can easily set your website apart from your competitors. This free website template is suitable for all those websites that pertain to fine arts, cuisine, dining, etc.

Screenshot

More on Page Two

Many more templates await, over on page two. So head on over and check them out!

May 09 2012

13:00

Mastering CSS Gradients in Under an Hour

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!

Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?

Well, it’s time to kill those 1px wide images, my friend.

If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.

Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.

So, let’s rock!

Basic syntax

The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, we have at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!).

We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).

This is the basic syntax:

#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** real example **/

background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );

background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );

background: -o-linear-gradient( top left, red, #c10000, #ae0000 );

background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );

background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );

background: linear-gradient( top left, red, #c10000, #ae0000 );
}

This CSS will get this result:

So, here are the items explained:

  • Background: Just like you set background image or colors you’ll set gradients as a separate item
  • vendor -: We can use “-o” for opera, “-moz” for Firefox, “-webkit” for safari and chrome, “-khtml” for Konqueror and “-ms” for IE
  • type: Here we can use “linear” or “radial”
  • start / position: This is a X/Y coordinate which tells the browser either the direction (top means that it’ll be top to bottom, and left that it’ll be left to right) or the exact start point (like 600px 300px will invert the example above because the start point will be the bottom right)
  • shape: If you use radial gradient you can set it as “circle” or leave it blank so the gradient will be ellipsis-shaped
  • size: If you are using radial gradients you can set where the gradient extends to. You can use: closest-side,  closest-corner, farthest-side, farthest-corner, contain, cover to set the gradient position.
  • Color1: This is the first color. It’ll be the color in the start point you set above
  • Colors 2,3,4..: You can add as many colors as you want and they’ll be evenly distributed in the element’s background unless you declare a position.
  • Position (for colors): If you don’t want an even distribution you can add your own rules for positioning colors.

Here is an example making use of color positions:


#wd {

background: -moz-linear-gradient( top left, white, black 25% );

background: -webkit-linear-gradient( top left, white, black 25% );

background: -o-linear-gradient( top left, white, black 25% );

background: -khtml-linear-gradient( top left, white, black 25% );

background: -ms-linear-gradient( top left, white, black 25% );

background: linear-gradient( top left, white, black 25% );
}

You can see the result and an outlined area, about those 25% / 75% portions so you can have a better idea on how the browser calculates those values:

Multiple gradients

Let’s dig a little deeper and see more cool stuff you can do. You can start doing advanced stuff and playing with shape combinations to create new effects.

The syntax is pretty simple, all you’ve got to do is separate multiple declarations with commas. Notice that the “z-index” of the gradients will be reversed and the first item will be at the top.

If you set the color to transparent, you can use a background color if you want. Otherwise the color of the top element will hide all the others.

Ok, let’s play with some code now:


#wd {

background:

-moz-linear-gradient( top left, white, transparent 25% ),

-moz-linear-gradient( bottom right, white, transparent 25% ),

-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-webkit-linear-gradient( top left, white, transparent 25% ),

-webkit-linear-gradient( bottom right, white, transparent 25% ),

-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-o-linear-gradient( top left, white, transparent 25% ),

-o-linear-gradient( bottom right, white, transparent 25% ),

-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-khtml-linear-gradient( top left, white, transparent 25% ),

-khtml-linear-gradient( bottom right, white, transparent 25% ),

-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-ms-linear-gradient( top left, white, transparent 25% ),

-ms-linear-gradient( bottom right, white, transparent 25% ),

-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

linear-gradient( top left, white, transparent 25% ),

linear-gradient( bottom right, white, transparent 25% ),

radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;            }

And this will be your final result:

Cool Effects

As you can see, gradients combinations can lead to awesome results. Here we’ll see a few practical (ok, some of them quite experimental) examples that you can use and even make them better.

Subtle lighting effect

This effect is pretty easy to use, especially for featured images. It gives a subtle elliptical shadow for your elements without additional markup, you can just include it in your images. Oh, and it works pretty well for hovers also.

Here is the CSS to achieve the effect (and also correct positioning for elements):


img {

margin: 0 -60px;

padding: 25px 60px 40px;

background: -moz-radial-gradient( center center, contain, black, white 90% );

background: -webkit-radial-gradient( center center, contain, black, white 90% );

background: -o-radial-gradient( center center, contain, black, white 90% );

background: -khtml-radial-gradient( center center, contain, black, white 90% );

background: -ms-radial-gradient( center center, contain, black, white 90% );

background: radial-gradient( center center, contain, black, white 90% );
}

And this is the effect applied to one o four images:

CSS Background Patterns

There are quite a few highly experimental CSS patterns out there, but there are a few that you can actually use, especially the ones which rely on gradients that end smoothly.

Here is an example on how to apply a subtle background pattern that you can easily integrate in your site:


body {

background:

-moz-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-webkit-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-o-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-khtml-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-ms-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

radial-gradient( center center, contain, #757575, transparent ),

black;
}

And this will be the rendered result:

It’ll Blow your mind – CSS Painting

If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.

Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.

Here is the code I used to do a simple scared face to show to your IE users:


#wd {

position: relative;

width: 450px;

height: 400px;

margin: 20px auto;

background:

-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

border-radius: 50%;

}

#wd:after {

content: "Are you using IE??";

position: absolute;

top: 225px;

left: 315px;

padding: 5px 10px;

width: 150px;

font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */

background: white;

border: 2px solid #E19B92;

border-radius: 4px 4px 4px 4px;

}

And this is the rendered result:

Compatibility notes

There are 2 important final notes on this. First is on old Webkit rules (which still in use for many old versions including mobile). They are slightly different than the ones presented here:

#wd {

background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );

/* example */

background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}

And we have also Microsoft filters for IE. They are better explained in this Microsoft’s guide.

So, what do you think about it?

Can you think of new uses for those CSS gradients? Let us know using the comments section!

April 17 2012

13:09

Beercamp: An Experiment With CSS 3D


  

I recently had the pleasure of organizing this year’s Beercamp website. If you’re unfamiliar, Beercamp is a party for designers and developers. It’s also a playground for front-end experimentation. Each year we abandon browser support and throw a “Pshaw” in the face of semantics so that we can play with some emerging features of modern browsers.

This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you’ve not seen it, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.


“Beercamp 2012: A Tale of International Mischief”

Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).

Finally, please remember that this is an experiment! It will not work in all browsers. It does not degrade gracefully, and the markup is less than poetic. Put your convictions on hold for a moment and let’s have some fun.

Takeaway #1: Exploring 3D Space Is Fun

Before I started building the Beercamp website, I did some “research” into what makes pop-up books so much fun. As I flipped through the paper-crafted version of Dr. Seuss’ Oh, the Places You’ll Go, I found myself inspecting each page from multiple angles. Seeing how things looked from different perspectives was fun, and interacting with the environment was engaging.


The inspiration for Beercamp: Dr. Seuss’ “Oh, the Places You’ll Go.”

I wanted to create that same engagement in my digital version with intuitive and unobtrusive controls. Thus, the scene rotates based on the mouse’s coordinates, allowing the user to move the book around without much effort. Achieving this was pretty easy:

1. Set up a listener.

This is for the mousemove event.

$document.mousemove(rotateScene);

2. Calculate the rotation.

I wanted the book to rotate between -15 and 15 degrees, based on where the mouse is located along the x axis. This can be calculated using the following:

rotationY = -15 + (30 * e.pageX / $body.width());

3. Apply the rotation.

$scene.css('transform': 'rotateY(' + rotationY + 'deg)');

Pretty simple, right? The only problem is that our friends on iPhones and iPads don’t have mouse coordinates. They do, however, have a gyroscope. Rotating a phone is very similar to rotating a book, so adjusting the scene based on the device’s orientation made for an intuitive and delightful interaction. Setting this up was similar but slightly more involved.

1. Set up a listener.

window.addEventListener('deviceorientation', rotateScene, false);

2. Determine the orientation.

Before we can calculate the rotation, we need to know whether the device is in landscape or portrait mode. This can be determined by evaluating window.orientation:

  • Landscape
    Math.abs(window.orientation) == 90
  • Portrait
    window.orientation == 0


Determine the device’s orientation by evaluating window.orientation.

3. Calculate the rotation.

Now that we have the orientation, we can pull in the appropriate values from the gyroscope. If the device is in landscape mode, we’ll tap the beta property. Otherwise, we’ll use gamma.

var theta = (Math.abs(window.orientation) == 90) ? e.beta : e.gamma;
rotationY = 0 + (15 * (theta / -45));


The deviceorientation event enables us to pull alpha, beta and gamma rotation values. Note that these values are relative to the current orientation of the device. The image above shows the axes of a phone held perpendicular to the ground in portrait mode.

4. Apply the rotation.

$scene.css('transform': 'rotateY(' + rotationY + 'deg)');

Takeaway #2: Depth-Sorting Is Notoriously Buggy

A number of browsers support 3D transforms, but few do so elegantly. Apart from general efficiency issues, the biggest hindrance is improper depth-sorting.

Depth-sorting is required when two planes intersect in three-dimensional space. The rendering engine must determine which plane (or, more specifically, which areas of the plane) should be rendered and which should be clipped.


Depth-sorting varies across browsers.

Unfortunately, each browser implements depth-sorting differently and, therefore, has its own issues. The best we can do to combat the glitchy pop-through of underlying elements is to keep planes away from each other.

The Beercamp website involves numerous plane intersections. Initially, I had all of the pages rotating around the same point in 3D space (0, 0, 0). This meant that just about every plane in the book was fighting to be on top. To counter this, the pages needed to be positioned as if they were next to each other along the spine of an actual book. I did this by rotating the pages around an arc, with the open page at the pinnacle.


Rotating pages around an arc helps to prevent clipping.

function updateDrag(e) {
    …
    // operate on each spread
   $('.spreads li').each(function(i) {
        // calculate the angle increment
        var ANGLE_PER_PAGE = 20;

        // determine which slot this page should be turned to
        var offsetIndex = per < 0 ? 5 + curPageIndex - i : 5 + curPageIndex - i - 2;

        // calculate the angle on the arc this page should be turned to
        var offsetAngle = per < 0 ? offsetIndex - per - 1 : offsetIndex - per + 1;

        // calculate the x coordinate based on the offsetAngle
        var tarX = 5 * Math.cos(degToRad(offsetAngle * ANGLE_PER_PAGE + 10));

        // calculate the z coordinate based on the offsetAngle
        var tarZ = 5 * Math.sin(degToRad(offsetAngle * ANGLE_PER_PAGE + 10));

        // position the page
        $(this).css('transform', 'translateX(' + tarX.toFixed(3) + 'px) translateZ(' + tarZ.toFixed(3) + 'px)');
    });
}

This technique helped to clear up most of the depth-sorting issues, but not all of them. Further optimization really relies on the browser vendors. Safari seems to have things worked out on both desktop and mobile. Chrome Stable struggles a bit, but the latest Canary works wonderfully. Firefox does a fine job but suffers from slow frame rates. It’s a tough battle to win right now.

Takeaway #3: Vector Space Is Tricky But Useful

Building the pop-ups was by far the most difficult aspect of the project, but also the most satisfying. Other pop-up books have been built on the Web, but I’m unaware of any that use realistic pop-up mechanics. This is with good reason — achieving it is deceptively complex.

The magic of programming pop-up mechanics lies in the calculation of vector space. A vector is essentially a line. Knowing the lengths and directions of lines enables us to perform operations on them. Of particular use when building pop-ups is the vector cross product, which is the line that runs perpendicular to two other lines in 3D space.

The cross product is important because it determines the upward rotation of each pop-up piece. I’ll spare you the headache of play-by-play calculations (you can view the math below if you’re really interested). Instead, let’s try a visual representation.


The vector cross product in action.

We start by determining two points where each pop-up piece touches the page within 3D space. Those points are used to define a vector for each pop-up piece (the red lines). Using those vectors, we can calculate their cross product (the blue line), which is essentially the line at which a physical pop-up folds in half. Rotating each piece up to the cross product then gives us perfectly aligned pop-ups!

This is not exactly easy math in my opinion, but it is extremely useful. If you’re interested in playing with vectors, I strongly recommend Sylvester. It really simplifies vector math.

function setFold() {
    var points = [];

    // origin
    points[0] = [0, 0, 0];

    var adj = Math.sqrt(Math.pow(POPUP_WIDTH, 2) - Math.pow(POPUP_WIDTH * Math.sin(degToRad(-15)), 2));

    // left piece: bottom outside
    points[1] = [-adj * Math.cos(degToRad(-180 * fold)), adj * Math.sin(degToRad(-180 * fold)), POPUP_WIDTH * Math.sin(degToRad(-15))];

    // right piece: bottom outside
    points[2] = [adj * Math.cos(degToRad(-180 * 0)), POPUP_WIDTH * Math.sin(degToRad(-180 * 0)), POPUP_WIDTH * Math.sin(degToRad(-15))];

    // left piece: top inside
    points[3] = [-POPUP_WIDTH * Math.cos(degToRad((-180 * fold) - 90)), POPUP_WIDTH * Math.sin(degToRad((-180 * fold) - 90)), 0];

    var len = Math.sqrt(Math.pow(points[1][0], 2) + Math.pow(points[1][1], 2) + Math.pow(points[1][2], 2));

    // normalize the vectors
    var normV1 = $V([points[1][0] / len, points[1][1] / len, points[1][2] / len]);
    var normV2 = $V([points[2][0] / len, points[2][1] / len, points[2][2] / len]);
    var normV3 = $V([points[3][0] / len, points[3][1] / len, points[3][2] / len]);

    // calculate the cross vector
    var cross = normV1.cross(normV2);

    // calculate the cross vector's angle from vector 3
    var crossAngle = -radToDeg(cross.angleFrom(normV3)) - 90;

    // transform the shape
    graphic.css('transform', 'translateY(' + depth + 'px) rotateZ(' + zRot + 'deg) rotateX(' + crossAngle + 'deg)');
}

Takeaway #4: SVG Is Totally Tubular

I know, I know: you’ve heard the case for SVG before. Well, you’re going to hear it again. SVG is an incredible technology that works really well in 3D space. All of the illustrations on the Beercamp website were done in Illustrator and exported to SVG. This provided numerous benefits.

Benefit 1: Size

Because the pop-up pieces required large areas of transparency, the file-size savings of SVG were enormous. PNG equivalents would have been 200 to 300% larger than the uncompressed SVGs. However, we can reduce file size even more by exporting illustrations as SVGZ.

SVGZ is a compressed version of SVG that is incredibly small. In fact, the SVGZ files for Beercamp are up to 900% smaller than their PNG equivalents! Implementing them, though, requires some server configuration. This can be done easily with an .htaccess file:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Benefit 2: Flexibility

The flexibility of SVG is perhaps its most highlighted benefit. The graphics on the Beercamp website are scaled in 3D space to fill the browser window. There are also hotspots on each page that allow the user to zoom in for more details. Because everything is handled with SVG, the illustrations remain crisp and clean regardless of how they’re manipulated in 3D space.


SVG files are inherently responsive.

Benefit 3: Self-Contained Animation

All of the SVGs on the Beercamp website are implemented as background images. This helps to keep the markup clean and allows images to be reused in multiple locations, such as with the pop-up pieces. However, this means we lose DOM access to each of the nodes. So, what if we need some animation on the background SVGs?

SVG allows us to define animations within the file itself. All of the pop-up images in the final Beercamp website are static, but an earlier version featured animated beer bubbles. To increase performance in some of the less-capable browsers, these were taken out. However, the SVG animations ran very smoothly in WebKit.

SVG animation gets less hype than its CSS cousin, but it’s just as capable. Within an element, we can add an animate node to specify typical animation settings: properties, values, start time, duration, repeat count, etc. Below is an excerpt from one of the Beercamp bubbles.

<circle fill="#fff" opacity=".4" clip-path="url(#right-mug-clip)" cx="896" cy="381" r="5">
    <animate attributeType="XML" attributeName="cx" from="890" to="881" begin="7s" dur="5s" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="cy" from="381" to="100" begin="7s" dur="5s" repeatCount="indefinite" />
</circle>

Takeaway #5: Experimentation Is Messy But Important

Now that the practical tidbits are out of the way, I’d like to say a word about experimentation.

It’s easy to get boxed in by the reality of developing websites that are responsive, cross-platform, cross-browser, gracefully degrading, semantically perfect, progressively enhanced, _______, _______ and _______ (space to fill in upcoming buzzwords). These techniques are useful on production websites to ensure reach and consistency, but they can also limit our creativity.

I’ll be the first to admit it: the Beercamp website is buggy. Browser support is limited, and usability could be improved. However, the website is an experiment. It’s meant to explore what’s possible, not satisfy what’s practical.

A dogma is emerging in our industry — and the buzzwords above are its doctrine. Experimentation enables us to think beyond that dogma. It’s a wonderful exercise that indulges our curiosity, polishes our talent and ultimately advances our industry. If you’re not experimenting in some capacity, you should be.

The State of CSS 3D

CSS 3D has yet to hit a tipping point. Browsers simply don’t support it well enough, but there is promise on the horizon. Mobile Safari, with its hardware acceleration, renders 3D transforms extremely fast and with very little depth-sorting issues. It’s only a matter of time until other manufacturers release stable implementations. It’ll be interesting to see how CSS 3D techniques hold up against other emerging technologies, such as WebGL.

Remember Flash? Me neither.

You’re Invited

By the way, Beercamp is being thrown by nclud at the Front-Trends Conference in Warsaw. If you’re headed to the conference, you should stop by and say hello!

Related Links

(al)


© Tom Giannattasio for Smashing Magazine, 2012.

April 09 2012

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

Don't be the product, buy the product!

Schweinderl