background preloader

How To Create a Pure CSS Dropdown Menu

How To Create a Pure CSS Dropdown Menu
With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action. View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu.

Related:  web dev.Outils de développement webCSSWebDesign

24 Free HTML & CSS3 UI Kits - Download CSS UI Kits here large number of basic and essential elements for a web design is available for free download. These ui kits can speed up your web development process to new heights thus giving you extra time to spare. Copy the html and css code into your web page elements and you are all set to enjoy the beautiful design. With raging trend of flat design we have included them in our topic as well as it is currently seek more often by the design community. Make sure to check browser compatibility before implementing them in your popular websites as these user interface elements are not 100% tested.

Web Tools Platform Copyright © 2004 Naci Dai. This document is the first in a series of tutorials where we will demonstrate how you can use the rich set of tools and APIs that comes with the Web Tools Platform Project. This first tutorial will give you a step by step tour of using some the tools for web development. For this purpose we will build and run a J2EE web application using WTP tools and Apache Tomcat. By Naci Dai, Eteration A.S.December 7, 2004 25 Best Free HTML/CSS3 UI Kits Converting PSD into HTML/CSS? Forget it goes! Because with the 25 Best Free HTML/CSS3 UI Kits is to offer you common User Interface elements to get you started building your website or apps design project quick and easy. With the emergence of CSS framework as Bootstrap, Gumby, Purecss or Yaml the UI Kits base on CSS framework also become popular.

Using media queries to handle HDPI screens ← The Publishing Project One of the things that I find infuriating about multi device development is that people can’t seem to agree on a resolution or a device aspect ratio. This has become even more complicated with the advent of retina devices (both hand-held, laptops and desktop devices). Trying to keep an identical layout in different screen sizes is impossible. Even if we could create identical experiences, the amount of image replacement we have to do to accommodate the different resolutions so our images will not look like crap just is more than I’d like to deal with. A compromise solution is to use Media Queries to target the work to the devices that we are planning to work with.

CSS3 Patterns Gallery Wave (294 B)✖by Paul Salentiny Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines How to install Apache (and PHP+MySQL) on Windows: test your web pages at home - Web design tips & tricks Last updated: 2006/01/15 Return to the main page Page: 1 2345 When you are making a web page, the easiest way of view a page stored in your hard disk is double-clicking in the file, which usually results in the page being opened in your default browser.

CSS Image Effects #5: Lomography This is part of a series of posts breaking down visual effects using CSS filters and blend modes. Read Part 1: The Vintage Washout Effect, Part 2: 3d Glasses, Part 3: Vignettes, and Part 4: Bokeh Textures for some background on blend modes and filters. In this post we'll explore a relatively new photography technique founded in Austria in the early 90's, called Lomography. A Google search for Lomography yields beautifully vibrant results. A Little Background on Lomography Device pixel density tests If you have a device that isn’t listed below and has a -webkit-min-device-pixel-ratio that’s not 1.0, please let me know and I’ll add it to the list. I’m @marcedwards on Twitter. Devices with -webkit-min-device-pixel-ratio: 1.0

CSS3 Animation Cheat Sheet - Justin Aguilar How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. What Is The Difference Between Static and Dynamic Websites? Whether you’ve come across these terms online or have heard it thrown around by your web designer, it is important to know the difference so that you can determine the best solution for your website. Static Websites A static site is a website that is written entirely using HTML. Each web page is a separate document and there are no databases or external files that are drawn upon. This means that the only way to edit this type of website is to go into each page and edit the HTML.

Rain & Water Effect Experiments Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios. View demo Download source Today we’d like to share some WebGL experiments with you. The idea is to create a very realistic looking rain effect and put it in different scenarios. Understanding the CSS Transforms Matrix Introduction The matrix functions — matrix() and matrix3d() — are two of the more brain-bending things to understand about CSS3 Transforms. In most cases, you’ll use functions such as rotate() and skewY() for ease and clarity’s sake. Behind every transform, though, is an equivalent matrix. It’s helpful to understand a bit about how they work, so let’s take a look. CSS transforms are rooted in linear algebra and geometry.

Creating Scroll-based Animations using jQuery and CSS3 Creating movement is great way to provide an interesting and interactive experience for your viewers. With modern sites providing a greater deal of interactivity, it’s becoming increasingly expected that even simple websites will offer some level of animation / movement to engage their visitors. Today I will be outlining a technique that you can adapt to your web projects – triggering animations when scrolling into a pre-defined region. These animations will be created using CSS transforms and CSS transitions. We will also use jQuery to detect when the elements are visible and to add/remove the appropriate classes. For those who want to see examples of this in action, you can jump straight to the demos.

Media Queries for Standard Devices If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one. —Josh Brewer, March 10, 2010 A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task.