background preloader

CSS Image Opacity / Transparency

CSS Image Opacity / Transparency

CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. Color Gradient Styles The code below is the CSS styling for the orange button.

Creating a pure CSS dropdown menu 17 February, 2011 In redeveloping the Venturelab site we became increasingly aware that there was a lot of content that needed navigating extremely simply and fairly rapidly. We have so much to say and such a lot of content that the navigation of the site needed to be even more dynamic and encompassing than normal. Demo This article has been ported from the now-defunct Venturelab Devblog, where I had originally authored it. Each page features a sub-navigation area, which links to all the other pages within that section of the website. I was looking at the main menu of the site when inspiration struck. The concept What a dropdown menu provides is a hierarchical overview of the subsections contained within the menu item that spawned it. They are extremely useful in showing what a section of a site contains, and allowing you to access it from anyway else in that site, whether that be the parent page of that subsection, or a page in a different section altogether. The markup The CSS Final word

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>

The Lost Principles of Design In the instant age that design has evolved into recently many of us often stray away from the basics. If you had a professor in college who taught you the fundamentals of design these may be engrained into your head. For the self-taught, you may have a book on your desk with these very principles. However, the more and more people that flood the internet for design content need to learn the basics before trying to make a stellar gradient in Photoshop. While this is cool and amazing right now, there will come a point where this style is strayed away from and a new style is made. In history, this lesson has repeated itself with movements like the Bauhaus and Swiss Modernism and will soon come label our current trends as part of history. Balance Arranging parts to achieve a state of equilibrium between forces of influences. Examples: Symmetrical, Asymmetrical, Radial Contrast Interaction of contradictory elements. Emphasis & Subordination Directional Forces Proportion Scale Repetition & Rhythm

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. 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. Lines 1-6 remove the dotted outline that Firefox puts around the clicked tabs. Lines 21-30 sets the tab styles.

several color ideas CSS Tutorial 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. 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. Create a project folder for the files we’ll create somewhere on your machine and call it nav, inside this folder create three new folders; one called js, one called css and one called fallback. Step 3.