CSS Image Opacity / Transparency
Centering a Horizontal Menu Bar
When Adobe first introduced Spry, our goal was to bring Ajax capabilities to the web design community, allowing designers to create web pages that provided a richer experience for the end user. As we know, however, the web evolves at a blistering pace. Over the last couple of years, frameworks such as JQuery have evolved to encompass many of the capabilities originally envisaged for Spry, making Spry as a standalone offering less relevant. As we can continue to focus our efforts in furthering the web, we have decided to no longer invest in the development of Spry. We do however recognize that for some designers it continues to provide value. As such, we are making the Spry framework, along with supporting documentation and example code, available on GitHub under an MIT license so that designers will continue to have access to the framework and can customize/extend it as required. Download Spry from Adobe GitHub account
4 methods of adding CSS to HTML: link, embed, inline and import
by Matthew James Taylor on 18 February 2009 There is more than one way to add a Cascading Style Sheet (CSS) to your HTML document. In this short tutorial I will explain the strengths and weaknesses of the four main methods. Linking to a separate CSS file This is the most common method of attaching CSS rules to an HTML document. Make sure you include the correct path to your CSS file in the href. There are many advantages to linking to a separate CSS file. Embedding CSS into the HTML You can also embed CSS rules directly into any HTML page. <style media="screen" type="text/css"> Add style rules here </style> All of your CSS rules go between the style tags. The disadvantage with this approach is the styles must be downloaded every time someone visits the page, this can cause a slightly slower browsing experience. Adding Inline CSS to HTML tags Style rules can also be added directly to any HTML element. <h2 style="color:red;background:black;">This is a red heading with a black background</h2>
Top 10 CSS Table Designs
How to create Tabs with CSS and jQuery from scratch
Another feature that is often added to Web 2.0 sites is tabbed content. I'm not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked. If you don't know about jQuery yet, let me have the pleasure to introduce you to it. It's a very easy-to-use JavaScript library that offers easy DOM manipulation, effects and a ton more. Note: you can also use standard JavaScript or Prototype when doing this as well. Step 1. In this example, we are going to use the jQuery core library found here. Clear, Concise, and Entertaining Cover to Cover JavaScript: The Missing Manual — This book from bestselling author David McFarland teaches you how to use JavaScript in sophisticated ways -- even if you have little or no programming experience. Step 2. I'm going to create a file called myapp.html. Notice that at the top of the HTML page, we are including three files. Step 3. Let's create the CSS file that's included in the HTML above. Step 4.
Cool notification messages with CSS3 & jQuery
Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity. UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful. Notification messages are an important part of the user experience and you can't afford to omit them. In this article, you'll learn how to create some alert messages with CSS3 and jQuery. View demo Message Types Bellow is a list with common notification messages: InfoErrorWarningSuccess Info Its purpose is to inform user regarding a relevant matter. Error When an operation has failed, the user must be notified. Warning This type of message notify the user of a condition that might cause a problem in the future. Success The success message should be displayed after user successfully performs an action. The HTML The CSS The jQuery
CSS Tutorial
CSS Decorative Gallery
Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack Look and Feel
How to Create a Drop-down Nav Menu With HTML5, CSS3 and JQuery
In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us. HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware. Using CSS3 we can do away with what would have required the use of several background images and possibly an additional wrapping container or two and rely (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Step 1. Step 2. the Underlying Page Save this as nav.html in the nav folder.
