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>
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 ! <!
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
CSS3 Lightbox Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos
6 Best Logo Maker & Creator Software Twitter has a bird, Nike a tick, McDonald’s the golden arches and Apple an apple. All of these are instantly familiar icons. Your logo is one of the most recognizable things about your business. That’s why it needs to be simple, striking and professional. You could hire an agency to work on your brand, or you might prefer to do your logo design in-house. 1. Illustrator – part of the Creative Suite – remains the kingpin of graphic design software, and for good reason. For starters, the pixel grid makes it easy to cleanly align objects, while the precise shape-building tools, brushes, and advanced path controls give you the freedom to create almost any graphic you can think of. When colour needs to be used sparingly, gradients can be very effective. However, Illustrator can be intimidating for beginners. 2. If you’re just after a logo to use for your online collateral, Logomaker could be just what you need. You can create and save up to six web-ready logos and download them for free. 3.
Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.