background preloader

CSS Decorative Gallery (adding frames and overlays to images using CSS and transparent PNGs/GIFs)

CSS Decorative Gallery (adding frames and overlays to images using CSS and transparent PNGs/GIFs)
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. 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 To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel To change the look and feel, simply edit the CSS specifications of the span element. The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b. #6. #7. #8.

Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. Enjoy

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. Going forward, Adobe will continue to make contributions to JQuery UI, JQuery Mobile and other frameworks so as to help web designers create rich web and mobile experiences. Download Spry from Adobe GitHub account

Cross browser CSS slide show 12th April 2006 copyright © stu nicholls - CSS play Information I have had many visitors asking how they could produce a slide show or photogallery using a mixture of portrait and landscape images. Well this is one way that it could be done It works in a similar manner to my previous examples except that I have removed the 2x image on hover (this was a bit of a gimmick anyway) and have gone straight for a click to produce the full size image. Yet again all photographs are taken from the stock.xchng For this to work, without scrolling, your visitor will need a screen resolution capable of displaying the whole projector screen. Hacks have been added to make it work in IE5.5 for people browsing using the standalone version. Cascading Style Sheet If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files. The slide_show.css file The IE only style sheets are loaded using the conditional comment. The slide_show_ie.css file

CSS Sprite Generator | Project Fondue 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. 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. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. For more details on CSS gradient, read my article Cross-Browser CSS Gradient. How To Use My Buttons?

Moving a picture around slowly CSSTidy Top 10 CSS Table Designs By R. Christie Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap! First things first Link We start with a valid xhtml 1.0 strict markup. <table id="..." You can read more about xhtml table markup in HTML Dog’s Table Section1. Before we start, let’s review the general rule of thumb for styling of tables: Tables love space. Now that we are all set up let’s get going, shall we? Overview of this article Page 1: Top 10 CSS Table Designs

[Valid] Markup Validation of Congratulations The document located at < > was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as "XHTML 1.0 Transitional" and that we successfully performed a formal validation of it. The parser implementations we used for this check are based on OpenSP (SGML/XML) and libxml2 (XML). "valid" Icon(s) on your Web page To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. A full list of icons, with links to alternate formats and colors, is available: If you like, you can download a copy of the icons to keep in your local web directory, and change the HTML fragment above to reference your local image rather than the one on this server. Linking to this result Validating CSS Style Sheets If you use CSS in your document, you can check it using the W3C CSS Validation Service . ↑ Top

Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid.

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. A notification alert message should appear every time the user perform important tasks. 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 HTML The CSS The jQuery

HOW TO: Get Started with Less Framework The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. For the past few years, CSS grid systems have become increasingly popular with web designers. Thanks to efforts like Nathan Smith's 960.gs, designing with a grid is less complicated, and better looking sites can be crafted with ease. One of my favorite CSS grid systems of late is Less Framework. In May 2010, Ethan Marcotte's "Responsive Web Design" helped spur a movement of building websites designed to fluidly adapt to various platforms and device sizes — think mobile optimized sites and tablet-specific layouts — without the need for an entirely different design or special URL. Less Framework is, in my opinion, one of the best ways for web developers without lots of experience in designing responsive websites (or media queries in general) to take advantage of this new trend. Knowing the Basics Guides and Templates Less-Ready Themes

Related: