How To Create Depth And Nice 3D Ribbons Only Using CSS3 In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills. Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. DesignM.ag Blogof.FrancescoMugnai.com Yoast.com From-The-Couch.com Wait, wait, wait. Sure? We Want to Make 3D Elements Without Images background: rgba(196,89,30,0.65);
Webdesign Friday (#wdfr) - La communauté webdesign francophone Grid Based Web Design Resources As a complement to our prior post "30 Grid-Based Websites", we've made a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects. Let's start with a little history. Many of you know who Massimo Vignelli is, a known designer with a solid modernist influence who developed his career in numerous areas of design. In 1977, he designed the Unigrid System for the National Park Service. The module grid system allowed the creation of brochures in ten basic formats keeping a consistent, recognizable structure. Who knew that 30 years later his work would be the inspiration of a discipline that he couldn't even dream of at that time. Tools & Online Layouts Generators The 892 unique ways to partition a 3 x 4 grid The 3 × 4 grid poster is a computation-based design. Photoshop Grids and Plugins Frameworks Books & Geekeries This notebook is designed for digital designers.
Accessible star rating widget with pure CSS For ages, we couldn’t utilize the sibling combinators (~ and +) to ease the pain of creating star rating widgets, because of this stupid Webkit bug. Nowadays, not only it’s fixed, but the fix has already propagated to Chrome and Safari 5.1. So, we can at least use the sibling combinator to make coloring the stars easier. But can we use no JavaScript for a rating widget and make it just with CSS? Actually, we can. Of course, you’d still need JS to attach an event handler if you want the votes to be registered through AJAX, but that’s not part of the rating widget per se (it could still work as part of a regular form). What’s best is that it’s fully keyboard accessible (focus and then use keyboard arrows) and screen reader accessible (although VoiceOver will also pronounce the generated stars, but that won’t happen if you use images instead of unicode stars). So, here it is:
Agency | LABS | The very own digital experiences from Epic agency Kineograph As part of a project for one of our clients, it was necessary to play animations in order to make the site more lively. Very quickly we thought about using spritesheets. We were unsatisfied with the existing solutions, therefore we [...] RubyMotion: Debugging Objective-C Following the release of RubyMotion we can finally talk a bit about it (if you haven’t yet, I definitively encourage you to check it out!) Share your beats with the Drumlet ! The Drumlet is the latest music experiment from Epic.net mixing Javascript, Canvas, Web Audio and Social sharing to bring you the very first Drum Machine using these technologies. Digital Painting With Photoshop Because we like sharing, you’ll find this amazing book made by Epic (thanks Henry) relating theory about painting, colours, composition, lights, textures and so on with « How-to » so you can try these technique yourself and share the love. Animate a 3D Model with the timeline
How to vertically and horizontally center text in an unordered list or div Congratulations if you've managed to find this tutorial! I've been trying to increase awareness and publicity to this tutorial by going to other tutorials and leaving comments but I'm finding the authors take a competitive edge and do not approve my link to this page. If you find this helpful then please promote it by using the social links further down the page. The following example shows you how to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. If you simply wish for it to work in a div, remove the list items around it (the code will still work). UPDATE, the code has been altered slightly as of 29/9/2011 to make it easier to work with. Alternatively, you can download the zip here. Like It? Need help with this article? Have you got a suggestion, compliment or need additional help with this article?
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Sous Mac OS X : MAMP - PHP - Général (PHP) Pour ceux qui ont un Mac sous Mac OS X, je vous conseille le programme MAMP (Mac Apache MySQL PHP). Il est vraiment très simple à installer et à utiliser. Vous pouvez le télécharger ici. Vous devriez avoir téléchargé une archive au format .dmg qui contient le logiciel. Lorsque vous l'ouvrez, la fenêtre de la figure suivante apparaît. Vous devez tout simplement faire glisser le dossier MAMP en bas à gauche vers le dossier « Applications » au-dessus. MAMP est maintenant installé. Je vous invite à configurer le répertoire dans lequel Apache ira chercher les fichiers PHP de votre site web. Cliquez sur le bouton « Choisir » pour sélectionner le dossier dans lequel vous placerez les fichiers de votre site web. Sélectionnez ce répertoire, qui devrait être de la forme /Users/pseudo/Sites. Validez les changements et retournez sur la fenêtre principale de MAMP. Pour vous préparer pour la suite, je vous invite à créer un dossier « tests » dans votre répertoire « Sites ».
Workshop / Chrome Experiments Unfortunately, either your web browser or your graphics card doesn't support WebGL. We recommend you try it again with Google Chrome. Writing a Flexible Grid Script for Photoshop Being a capable web designer means having a solid grasp on grids, especially if you want to pursue responsive web design. In this tutorial we'll take a look at a Photoshop script for generating your own custom grids, plus we'll open the hood and look at how the script is actually made. It's quite likely that you've already used psd files from one grid system or another. You'll probably have opened the psd, complete with all its guides, then you'll have altered the document size to give yourself a bit of breathing room. In the case of our script, it will generate Photoshop guides irrespective of the document size. It will allow us to specify the number of columns, the gutter size and the layout width. During this tutorial we'll be writing a Photoshop scriptlet in JavaScript. Before we jump into the development process, let's first quickly cover how to actually install and use the script in Adobe Photoshop. Step 1: Usage Downloading and Installing Step 2: Usage Launching the Script
Dossier : comment apprendre le webdesign en ligne ? Inexistant il y a encore 20 ans, le métier de webdesigner suscite aujourd’hui de nombreuses vocations dans notre monde connecté. Si vous faites vos premiers pas dans le web ou que vous souhaitez vous perfectionner en webdesign grâce à Internet, cet article est fait pour vous. Depuis l’ouverture du blog, vous avez été nombreux à m’écrire pour en savoir plus sur les possibilités d’apprendre le webdesign. Quelles études suivre ? Apprendre sur le web En tant que professionnel depuis presque 3 ans maintenant et intervenant en IUT, j’ai pu échanger avec de nombreux webdesigners. La démocratisation du web a fait naître une génération d’autodidactes. Que vous soyez étudiant dans le webdesign, en reconversion professionnelle, graphiste, développeur, chef de projet (bref dans la communication), simple curieux ou même webdesigner, vous trouverez ici de quoi vous mettre sous la dent pour en apprendre plus sur ce fabuleux métier. 1. Les tutoriels se trouvent en général sur des sites spécialisés. Tuto
Natural Language Form with Custom Input Elements An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements. View demo Download source There is something really interesting about Natural Language UIs and after visiting awesome Escape Flight, we wanted to play around with NL forms and custom form elements. Natural language forms are quite suitable for some UI cases, not for all, of course. Please note: this only works as intended in browsers that support the respective CSS properties. The Markup The HTML will be composed of a form with a sentence and some select and text input elements: We want to transform the select elements to a custom drop-down list, like this: <div class="nl-field nl-dd"><a class="nl-field-toggle">any food</a><ul><li class="nl-dd-checked">any food</li><li>Indian</li><li>French</li><li>Japanese</li><li>Italian</li></ul></div> The toggle is the visual part in the sentence. The text input will also be transformed into a similar element: The CSS
Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Anatomie d'une grille Elle sert d'armature pour organiser la page et son contenu. On obtient alors une page plus lisible et plus homogène.