Tag: HTML5

  • IT FITs Version 2.0 – Our most popular responsive template

    It’s been a while but it’s here finally. Version 2.0 of our most popular HTML5 CSS3 Responsive Template.

    Major updates since last version:

    • Updated Typography
    • Added large display responsive support
    • Dropped IE8 and older support
    • Removed flashy transitions.

    DEMO

    If you find any issues and want more features, submit them here in Github – https://github.com/cssjunction/It-Fits

    DOWNLOAD

  • Metro UI Form using HTML5 and CSS3

    Metro UI Form using HTML5 and CSS3

    Few months ago I had posted a PSD freebie for Metro UI Contact form. I received many requests saying for the HTML/CSS version of the same. So here is the form, coded using HTML5 and CSS3.

    A Quick preview:

    HTML/CSS Demo

    Metro Style Contact Form PSD

    Here you can download the HTML/CSS:

    Download

    Happy sharing!

  • Top 5 Articles on HTML5 Audio Video

    Top 5 Articles on HTML5 Audio Video

    Learn HTML5 Audio Video

    1. Everything you need to know about HTML5 video and audio

    Here, Simon Pieters, from Opera, will walk you through everything basics you needed to know about HTML5 Audio & Video features. He says:

    This article aims to provide all the nitty-gritty details of HTML5 media, the DOM API, events, and so forth, so you can implement your own HTML5 player with fallback to old browsers.

    2. HTML5 Audio and Video: What you Must Know

    Bruce Lawson talks on Nettuts+ about must know facts regarding HTML5 Audio/Video.

    3. Getting started with the HTML5 Audio Video API

    Very quick & a short article to get you started on making your own media players on HTML5 Video.

    4. Using HTML5 Video and Audio in Modern Browsers

    This time, in-depth learning on API, learn about browser fall back & how to handle those legacy browsers – from SitePoint.

    5. How to Make Your Own Video Player On HTML5 Video

    Once again very depth article. This article will take you thoroughly on how you can create your very own media player using HTML5 Audio & Video.

    That’s it. Hope you will learn from very basic to creating your own full functional media players. Happy coding!

    PS: Image used in this post banner is taken from 356PSD.com

  • It Fits :: Free HTML5 CSS3 Responsive Template

    It Fits :: Free HTML5 CSS3 Responsive Template

    We have something very special today for all of you great visitors. Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features. Even icons are fonts – hmm super fast page loading.

    UPDATE: New Version 2.0 of this template is available.  Check Version 2.0 –  IT FITS.

    HTML5 CSS3 Template

    Page you will have:

    • Home page
    • Portfolio page
    • Regular page
    • Blog page
    • Contact page
    • 404 page – (default from HTML5 Boilerplate template.)

    I have used LESS css for this projects – for better and faster CSS coding, but you will notice there is pure CSS file is in use. Reason – what I used to do is I do code in LESS and compile it using any software like WINLESS and then I use the compiled pure css files. When you download the template source code, you will find three .LESS files but all complied in one css file that is main.css.

    Too much talk? Head over now:

    Demo

    Browser compatibility:

    All modern browser works fine. Responsiveness is missing from IE7 and IE8. IE9+, Chrome, Firefox, Opera, Safari works fine. You can see how it looks on the smaller device by re-sizing your browser. Or head over to The Responsinator, then give the demo URL and see.

    In terms of visual appearance, IE7 and IE8 has graceful degradation – no support for CSS3 so as, but template presentation is fine.

    IE6??? I don’t talk about it.

    That’s it guys – not much talk. This theme has been released under Creative Common  CC 3.0 Attribution (by) license, so feel free to use anywhere.

    Download now

    Let me know your views and feedback. Please follow us @CSSJunction, if you want to follow the author of template – @shekhardesigner

    More HTML5/CSS3 Templates:

  • Free HTML5/CSS3 WordPress Theme – Clin-UPress

    Free HTML5/CSS3 WordPress Theme – Clin-UPress

    After long time we are today releasing a very useful freebie – its a HTML5/CSS3 WordPress theme. Initially I coded this theme for my current blog, (where you’re now) but I came to create another minimal theme which is used now. So the theme was ready and without use in my HD – the reason I came to give it for you.

    Theme is best suited for running personal blogs, community blogs, tech blogs etc. Having excellent typography ensures visitors will enjoy reading. There is Bebas for main headline and secondary headlines are on Arial, rest of the copy is in ‘Sansatin Regular’. I grabbed both fonts from FontSquirrel.

    PSD

    There is no PSD of this theme, I directly coded it in HTML.

    Mark up

    Theme is coded in HTML5/CSS3 on base of HTML5 Boilerplate. Its just a HTML Template, isn’t coded in PHP yet. Currently theme has following pages

    1.) Home page

    Clin-UPress Home Page

    2.) Single post page

    Clin-UPress Single Post Page

    3.) Full width post page
    4.) Contact page

    Browser compatibility:

    Since theme is coded in HTML5 and CSS3 – I have tried to use much less images as I can. This theme is compatible with standard browsers and falls gracefully in IE.

    Copyright

    You can use this template for any kinds of usage – in your personal blog page or may be in commercial projects, but you can not remove the footer link for original theme location.

    Also I am gonna release its working WordPress theme which will be coded in PHP, subscribe our RSS feed or follow me in twitter to get updates.

    Futher, what you can not do is you can not publish its version template in your blog. Let me know if you’re interested to code it in php & release it through this blog.

    Check it out, demo of HTML Theme
    Demo

    You can grab all theme files in a ZIP, for free:
    Download

    If you find it really useful, share it.

  • Must read books for Web Desingers/Front End Developers in 2011

    Must read books for Web Desingers/Front End Developers in 2011

    A book list for Web Designers and Front End Developers, one must read to keep your knowledge aligned with current standard of emerging web technology.

    What is your preffered reading method? Reading on screen or reading printed books? I often choose printed books to read. Laying down on ground somewhere in park (or you may choose bed) and turning pages over, reading, makes more enjoyable (than just makign eyes bigger with tears looking at screen) – only possible if you choose to read printed books.

    Web industry is such a emerging field where last things goes (usually, not always) too obsolete and if you dont keep yourself upto date with current standards, it shows there is a high possibility that your competitor will left you behind and steal more clients.

    So, what takes it to be updated, well said staying upto date with current web standards and new technologies?
    In order to answer question above and help you to do so, I have listed a essential books, reading upon, you ll gain good and aligned knowledge with current web trends.

    List goes :

    Smashing Book #2

    By: Smashing Magazine

    Smashing Book 2

    Hardboiled Web Design

    By: Andy Clark

    Not available as of 2019 June.

    hardboiled-web-design

    HTML5 & CSS3

    By: SitePoint

    Getting Good with JavaScript

    By: Andrew Burgess

    Responsive Web Design

    By: ETHAN MARCOTTE

    Responsive Web Design

    Rockstar WordPress Designer 2

    By: Rohan Mehta

    WordPress Designer 2

    Magento Theme Designer

    By: Richard Carter

    Magento1.4 Theme Design

    Distinctive Design

    By: Alexander Dawson

    Distinctive Design

    Introducing HTML5

    By: Bruce Lawson, Remy Sharp

    Introducing HTML5

    Other recommendations:

    Enjoy reading, Happy reading !!!
  • HTML5-CSS3-Modal-Window-Template

    Everybody, as promised on last article (Modal Window PSD), here is the HTML5 CSS3 Template for Modal Window, Tested in all modern browsers and graceful degradation on older browsers.

    Have a look
    Ok, now if you find that this is what you’re looking for, hmm go download it now.

    Get Template here

    You know what I will say now? ‘Yes’ use it wherever and whenever you want.

    Say thanx to me, use form below. Stay in touch for more useful resources; follow me in twitter @shekhardesigner. You might also want to subscriber our RSS feed

  • Free HTML5 CSS3 Login Form


    Last week we have give a Login Form, layered psd. This time we are giving our readers a coded Simple Login Form. Coded in HTML5 and CSS3, which gracefully degrades in olders browsers. Intially this Elegant login form was created by Orman of Premium Pixel back in October 2010. I have co-ordinated with Orman about giving his artwork in form of a HTML/CSS Template. He have agreed. Thank you Orman for allowing me to convert your artwork.

    Check out workign template here:
    Demo

    Original PSD can be download from his website: Elegant Login Form Design (PSD), which is also featured on Creattica.

    Hope this HTML5/CSS3 Login Form will help our readers. Once again Happy Login.
    Download the coded template here:
    Download ZIP

    Keep visiting for more useful Freebies :). and follow me @shekhardesigner

    Related freebies