A Comprehensive Collection of Free UI Kits & Templates
User interface design involves a lot of creativity, inspiration, testing and motivation along with the skills necessary to communicate effectively with clients. A good UI is consistent and can make a website easier to understand and use. Having a set of editable UI elements is essential for every web designer to make quick layouts and prototypes for their projects. Today, we have a comprehensive collection of Free UI Kits and templates for you. All of the UI kits are editable, in .psd format and all are perfect for creating web mockups. Sharp UI Kit Pizza UI Kit iTunes Inspired UI Kit Pandora UI Pack Heavenly Assorted UI Kit The Bricks UI Pack Light Grey UI Kit Dark Chart UI Kit Clean UI Kit Transparent UI Kit Sticky Butterscotch UI Kit #F57a59 UI Kit Dark UI Kit Minimize Simple UI Kit Dark Web Apps UI Kit Wood UI Kit Fresh UI Kit Futurico UI Pack Minty UI Kit UI Kit Impressionist UI Pack Fresh UI Pack Milky UI Kit 10 Comments
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation
February 2010 Warning: This isn't going to work in any currently available version of Internet Explorer* or many older browsers. Background In July last year, the excellent Jonathan Snook wrote an article about CSS rotation. If you're interested stuff like this and you haven't heard of Mr. Snook before, I suggest you read his stuff. He explains in his article that the Webkit (Google Chrome & Safari) and Firefox 3.5+ browsers support the CSS transform property. He also notes that it is also possible to implement basic (0° / 90° / 180° / 270°) rotations using Internet Explorer, but clearly this wasn't going to cut it for what I wanted to do here. The code to make the clocks work is really very simple. transform: rotate(42deg); // this won't work yet, but one day it may -moz-transform: rotate(42deg); // mozilla specific -o-transform: rotate(42deg); // opera specific -webkit-transform: rotate(42deg); // webkit specific In jQuery that could look like: How it works A couple of things to note
Powerful New CSS- and JavaScript-Techniques (2012 Edition)
Advertisement Since our last round-up of useful CSS techniques1, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage. Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. Table of Contents CSS Transitions And Animations CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Interactive CSS3 lighting effects7 An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms. Visual Techniques with CSS
Le BlogDuWebdesign boost l'inspiration des intégrateurs #4 - inspiration-integration
Découvrez sur le Blog du Webdesign 10 animations CSS3 sans javascript ! Les animations et transitions CSS3 Qu'on se le dise, il n'est plus obligatoire d'utiliser du Javascript pour avoir de jolies animations sur son site ! Le CSS3 fournit deux outils vraiment très bien : les transitions et les animations. Les Transitions ne sont ni plus ni moins qu'un moyen de répartir le changement d'une propriété (par exemple un changement de couleur de texte au survol) dans le temps, pour donner un effet d'apparition, par exemple. Les animations sont bien plus que ça: Il est possible grace à elles de définir des images clés, et les transitions qui doivent être appliquées pour passer d'une image a l'autre ! Attention, ces deux propriétés ne sont pas supportés par internet explorer 9 et inférieur. Pour illustrer ce que l'on peut faire avec tout ça, découvrez 10 animations ne contenant pas de Javascript (ou alors n'utilisant le Javascript que pour des taches annexes, comme détecter un clic).
50 Excellent CSS3 Techniques and Tutorials for Beautiful Design
CSS3 has got a huge potential to create very elaborate and complicated details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques. Many designers all over the world believe that CSS3 is a technique which has unbelievable potentiality which will be used to create wonderful designs in the years to come. At present, it is not being used varied all over the world due to a number of limitations – obsolete browsers being one of them. Many say that it would be the application of the future as it can improve the efficiency of the workflow by substituting waste workarounds as it was once used in the case of Internet Explorer 6. It has many features which are not compatible with the old web browsers and hence it will require some present day internet browsers like Internet Explorer 7 & 8, Chrome, Safari and Firefox to use the CSS3. Create an Audio Player in HTML5 & CSS3 Filter Functionality with CSS3 Create CSS3 Pricing Tables CSS3 Lightbox
Comprendre et utiliser les CSS : Le positionnement par bloc (formation vidéo)
On aborde le dernier thème de cette série de petites formations vidéo en partenariat avec video2brain, en se consacrant cette fois aux feuilles de style CSS. Si vraiment tu es étranger à la création de pages web, les feuilles de style CSS permettent de travailler sur la mise en page et la présentation des pages. Elles permettent par exemple de positionner les différents éléments de ton site, c'est le sujet abordé par cette vidéo. (note : Le formateur utilise ici le logiciel d'édition de site web Dreamweaver, qui permet dans le cas présent de bien voir le résultat des modifications de CSS. C'est bon, tu t'en est sorti ? Dernière vidéo la semaine prochaine, à propos de la grille 960px. En attendant, si tu es intéressé par les formations vidéo de video2brain, n'hésite pas à me demander un bon de réduction de 10%, valable sur tout le catalogue.
Fancy Forms: HTML5 + CSS3 – JS | Interesting Things
Forms in HTML have typically been pretty boring – input boxes and buttons with all validation performed by javascript. With the new HTML5 Forms module things have become a little more useful. As of May 2010, only bleeding edge browsers support this, Webkit Nightlies, Chrome Dev Channel builds and Opera. The HTML5 forms module started out as Web Forms 2.0 before moving into HTML5 . The focus has been to increase the number of input types and to allow validation of input to happen in the browser, rather than in javascript. HTML5 Form Demo In this demo I’ve set up a simple form with a number of different fields, the code should be pretty self explanatory, but there are a couple of new features of interest. New input types – email, url, number and range New pseudo classes – :valid, :invalid:, :required You can’t submit the form until all fields are counted as valid by the browser I’ve also added a few CSS3 touches to make things a little nicer to look at: Things to try HTML5 Form Demo
