background preloader

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine
Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Where Are CSS Sprites Used? Related:  Web Dev Loading Bay

CSS Absolute Positioning: Create A Fancy Link Block Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive. The final result of our work will be as same as the demo below. Check it out or download it. Write your link block elements in HTML code We will create the HTML code first. Our HTML will be: Before applying CSS code, let’s see how our link block would be Applying CSS code And this is our CSS code For the List of links: For the Title of the links: We need to set margin left 45px for the title to display image in this space. CSS for the description: The same as the title, you should remember to set clear is none. Add CSS code for image: Now, we will review our HTML code. Remember to set z-index for the link to make sure it is always on top. Related Articles

30 Best Websites to Learn Design and Development 126,685 ViewsNovember 28, 2013London, UKDesign 5 min read Some of the benefits of online education are really focused on money, personal time management, pace and real fun projects and active communities. Recently I have published an interview with Matt Loszak who learned iOS development himself and quit his day job to pursue entrepreneurial success. Affordability While most of the courses, studies, and special workshops cost hundreds and sometimes thousands of dollars online education is the way to get demandable knowledge and skills and start working for any tech company or starting your own service-based business or creating products yourself. Immersive communities Learning with a community is much more fun and efficient. Learn at your own pace You have a family, full-time job and not much spare time. Build something real While learning you shouldn’t learn just for the sake of learning, try to solve the problem and your learning project might evolve into a business. Let’s get started! Lynda

The Definitive Guide to Using Negative Margins - Smashing Magazine Advertisement Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance. Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning. It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it. 1. We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. A negative margin looks like this: Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. They are extremely valid CSSI’m not kidding on this one. 2. Negative margins are very powerful when used correctly. Negative Margins on Static Elements A static element is an element with no float applied. 3. Smashing 3D text effects

CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea.

Outstanding Website Background Guide: 60+ Impressive Resources Topics Start » Design » Outstanding Website Background Guide: 60+ Impressive Resources Design Outstanding Website Background Guide: 60+ Impressive Resources April 19th, 2009 by Noupe Editorial Team FacebookTwitterGoogle PlusPinterestStumbleUponWhatsAppLinkedInXingE-Mail Web designers compete to impress visitors with distinctive and appealing visual elements. In this post you will see how web designers carefully created background images to achieve their goals in engaging and facilitating the design elements and content. We have hand-picked different background image trends and tutorials you can use to create an amazing background images for your upcoming website design. As always when you’re dealing with freebies, be sure to read the owner’s instructions and license info. Great Tutorials for getting the perfect Background – Ultimate Guide for Creating High Quality Textures A step by step guide for creating amazing textures. – Create an Awesome Background Using Patterns – Realistic Stone Texture 2lip

Accordion using only CSS An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Result CSS3 Accordion Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Experiment updated. How To Each part of the accordion has an ID, heading and content region. <div class="accordion"> <h2>Accordion Demo</h2> <div id="one" class="section"> <h3> <a href="#one">Heading 1</a> </h3> <div> <p>Content</p> </div> </div> <div id="two" class="section"> <h3> <a href="#two">Heading 2</a> </h3> <div> <p>Content</p> </div> </div></div> The CSS then relies on the :target pseudo-class to apply different styles to the chosen section — increasing the height and, in large content cases, altering the overflow behaviour to allow scrolling. Stripping out the styling, the CSS boils down to: Critique Obviously this approach has its limitations.

How Would You Like Your Graphic Design? #infographic Designed by Colin Harman, How Would You Like Your Graphic Design? made me laugh this morning. Great venn diagram infographic. There are times when things just need to be explained using a spectacular Venn diagram. Although designed as a treatise about graphic design, it applies to infographics as well. Update on Monday, January 31, 2011 at 2:02PM by Randy The designer, Colin Harman, has made the printed poster available here: 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts | Dzine Blog Learn how to earn $125 or more per hour as a freelancer - Click Here Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off For beginner web designers – design tutorials really help to understand the basic knowledge about web design! Design a cool Photography Portfolio Design A Grungy Website Design In Photoshop Design a High End Webdesign From Scratch Design Your Own Personal Portfolio Page In Photoshop Design a cool Portfolio Web Layout Urban Layout Design in Photoshop Design a Funky website Design in Photoshop Design a personal portfolio Site in Photoshop Designing a Dating Agency Website in Photoshop Music Band Website Designing a Clean Photo Portfolio Site In Photoshop Cool Dark website Design Dark Themed Website From Scratch 3d Studio Design In photoshop Design a Cartoon Grunge Web layout in Photoshop Design a Hand Drawn style Website in Photoshop Design a Cool Photo Portfolio Tutozor Web2.0 Re-Design Tutorial Webstudio Layout Design Dark Portfolio Layout

CSS List Style Wizard CSS List Style Wizard Welcome to the CSS List Style Wizard! Use this wizard to experiment with list styles and generate sample CSS style source code. List Style Notes You can use any list style property for either ordered or unordered lists. Use cascading to apply style properties to sub-levels of the list. For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see HTML and CSS Table Border Style Wizard. CSS Image Bullets As you may notice in the wizard, when using images as the bullet, the bullet does not line up to the text in an attractive way. As a work-around, you can properly align bullet images via the background image CSS property. You can see the style sheet and example below. More CSS Wizards Recommended Books Dynamic HTML: The Definitive Reference (2nd Edition)

60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources Jan 04 2009 For months, we have been bookmarking interesting, useful and creative Adobe Photoshop tutorials and Resources, so you can now rest assured that you will have the necessary tools to get the job done. Due to this phenomenally vast amount of textures, brushes, patterns available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, damaged, dreamy or any look you want. So in today’s post, you’ll find an assortment of top-notch tutorials, brushes, patterns, textures, actions and .PSD downloadable files that others have freely contributed to the design community for making your next photoshop effect. Don’t forget to subscribe to our RSS-Feed and visit my twitter page : nourayehia if you want to keep track of our next post. To make your job a little bit easier, we have categorized this post into 7 section, the links below will get you to your desired section. Photoshop Tutorials - 40 Spine-chilling Horror Photoshop Effects

Related: