Devin R. Olsen - Pure CSS Menu & Infinite Sub Menus This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in: IE7, IE8, FireFox, Safari Opera This pure CSS menu with infinite sub menus technique only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS. The CSS The HTML <ul id="nav"><li>Menu 1 <ul class="nav first"><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4 <ul class="nav"><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li></ul></li></ul></li><li>Menu 2</li><li>Menu 3</li><li>Menu 4</li></ul>
CSS3 Bling in the Real World All you disco-dancing designers out there (no more anticipation of alliteration) have been loving the new features CSS3 provides for making websites look cool in an easier, less hackish, and more straightforward fashion. Features like CSS3 gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of less time spent in Photoshop, fewer horribly nested <div>s, more flexibility, and more fun! Not to mention more time down at the pub, excitedly showing your friends your latest cool experiments on your iPad, while sipping on a smooth glass of ale with an intense air of self-satisfaction and smugness. The new breed of CSS3 shizzle even allows a self-confessed design amateur like myself to produce some fairly tasty looking designs. On both desktop and mobile (and other alternative browsing devices) there are rendering engines out there other than Webkit. Ok, I’m probably not saying anything that you don’t know already. A suitable example? Web fonts#section2
Responsive Content Navigator with CSS3 Today we want to show you how to create a responsive, css-only content navigator. View demo Download source Today we’ll show you how to create a content navigator with CSS only. The images used in the demo are by super-talented Karrie Nodalo. Please note: the result of this tutorial will only work as intended in browsers that support the CSS properties in use. In the following we’ll be going through demo 3. The Markup For each of the different slides that will either contain a set of links, sub-slides or some content, we will have a division with the class cn-slide. There will be one main slide that will have links to three sub-slides. The sub-slides and the slides with content will have a link back to their previous “layer”. Let’s take a look at the CSS! The CSS The main container will have a min-width and a max-width which will allow us using a percentage for the width but guarantee that it will not become too big or too small: The slides will also be placed absolutely. Demos And that’s it!
15 Free Admin Panel Website Templates - XDesigns Bored with the look of your website admin? if so, you can use and download these free admin panel templates that will give you an interactive looking design for your back-end administration user interface including website statistic chart design, navigation menus, custom designed icons and much more. If you want to access your dashboard from mobile device, you can choose a bootstrap based admin website template that will make your admin dashboard become responsive and adaptive to any types of screen resolution. Please share this post and don’t’ forget to check out 50 free HTML business templates and also beautiful collection of portfolio website templates for designers. 1. Simple Admin Panel Template 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur. Préparation de l'image de fond Après enregistrement, l'image est prête à l'emploi ! <!
42 Outstanding FREE UI Kits for Web Designers Internet is full of freebies for web designers and developers. Today, we will be covering 42 free UI Kits and templates. All of them are editable in PSD format and mostly covering all of the basic UI elements such as textfield, checkboxes, radio buttons, buttons, drop down menu and some other cover extensive list of elements. Well, you might say, "They're gorgeous! Mac and Windows platforms, they both render the form interface differently, and it's inconsistant in different browsers as well. However, you will need to do a little bit of investigation to integrate it. jqTrasform: jqTrasform is a jQuery styling plugin. They're absolutely something you need to keep it in your graphic/design library.
Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos
Continuous Reel Slideshow Description: Continuous Reel Slideshow lets you showcase images in a reel like fashion, one image at a time and in an continuous manner, with no breaks between the first and last slide. The reel can be played from left to right (horizontally), or top down (vertically), and pauses onMouseover. You can implement controls to allow users to manually move the reel forward and backwards, instead of it playing automatically. With that brief introduction out of the way, here are the script's features: Displays images one at a time with no breaks between the first and last slide (and visa versa). This reel is looking good! Note: This script now replaces the two defunct scripts Up-down Image Slideshow Script and Left-right Image Slideshow Script. Demos: Directions Add the below code inside the <HEAD> section of the page: The above code references the external file "reelslideshow.js", which you should download (right click, and select "Save As"). Step 2: Then, insert the following sample HTML for
12 Fun CSS Text Shadows You Can Copy and Paste Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Basic Shadow The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! Syntax The syntax for creating a simple text-shadow is shown below. text-shadow: horizontal-offset vertical-offset blur color; Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity. text-shadow: 2px 4px 3px rgba(0,0,0,0.3); Here’s the result of this code, a nice simple shadow that is quite appealing all by itself. Why rgba? Quick and Dirty Letterpress Hard Shadow
10 Lightweight and Minimal CSS Frameworks The CSS framework should be based on your current web design projects complexity and functionality requirements, and not be based only on a personal preference, as most web designers tend to do. In this post, we collected 10 lightweight and minimal CSS frameworks. Enjoy! Related posts: 1. 1 line CSS Grid Framework This is the challenge of writing entire CSS layout system with one line CSS class. Source 2. Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created. Source 3. A simple, lightweight approach that doesn’t require a PhD. Source 4. Stands for Sensible Standards CSS baseline, (pronounced “sense”). Source 5. A fixed layout, based on the 960.gs, but with a twist in its philosophy to make it more flexible and faster to play with boxes. Source 6. Source 7. Built with typographic standards in mind, Baseline makes it very easy to develop a website with a pleasing grid and good typography. Source 8. Source 9. Source 10. Source