background preloader

CSS Sprites: Image Slicing’s Kiss of Dea

CSS Sprites: Image Slicing’s Kiss of Dea
Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. Article Continues Below As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen. And what does this have to do with the web? Everything old is new again, and though the rise of 3D games has made sprite maps obsolete, the concurrent rise of mobile devices with 2D gaming capabilities have brought them back into vogue. How do CSS Sprites work? On to the HTML. Related:  Archive for ' Tools ' & Web App

CSS Sprites Por el 24 de abril de 2009 en: Sin categoría Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de banda. Realmente los sprites son imágenes que contienen varias imágenes y se muestran gracias a diversas técnicas que nos permiten recortarlas. Inicialmente se utilizó en el desarrollo de videojuegos debido a su versatilidad a la hora de realizar animaciones, hoy también nos lo encontramos como una técnica CSS que nos permite ahorrarnos ancho de banda. Gracias a esta técnica podemos reducir considerablemente el peso de nuestra aplicación web y lo que es más importante el número de peticiones HTTP, estas dos ventajas nos permiten reducir el tiempo de carga de nuestra aplicación web y reducir la carga en el servidor. ¿Cómo aplicar esta técnica? Pequeño tutorial para comenzar a utilizar esta técnica. ¿Cuándo utilizar esta técnica? Ejemplos prácticos Estos dos ejemplos vienen muy bien detallados en WebSiteOptimization. Generar aumáticamente un CSS Sprite

Download Builder jQuery UI Download Builder Quick downloads: Release Candidate (Themes) (1.12.0-rc.2: for jQuery1.7+) | Stable (Themes) (1.11.4: for jQuery1.6+) | Legacy (Themes) (1.10.4: for jQuery1.6+) | Legacy (Themes) (1.9.2: for jQuery1.6+) All jQuery UI Downloads Version Components UI Core A required dependency, contains basic functions and initializers. Interactions These add basic behaviors to any element and are used by many components below. Widgets Full-featured UI Controls - each has a range of options and is fully themeable. Effects A rich effect API and ready to use effects. Theme Select the theme you want to include or design a custom theme If you're having trouble downloading a custom package or theme, please report the issue on GitHub.

CSS Links CSS has several options for redefining the style of links. As mentioned in the above table, there are four different selectors with respect to links. You can specify whatever style you'd like to each of these selectors, just like you'd do with normal text. The four selectors are: Here you can see a few examples on how CSS can be used to replace the traditional image based mouseover effects for links. The hover style is not supported by Netscape browsers prior to version 6, but since it does no harm, you can still use it for the benefit of the +90% of visitors that arrive using MSIE). One of the most common uses of CSS with links is to remove the underline. Example: Hover The link from the above example would look like this: Another example would be to create links that are both underlined and overlined. Example: Underline/Overline A third example would be to create links that change in size when hovered. Example: Size changing links Example: Background colored links For example:

HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.

Minimalistic Slideshow Gallery with jQuery In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will […] View demoDownload source In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. So, let’s start! The Markup The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs): The alt attribute of the thumbnails will contain the path the full view image. The CSS First, we will define the style for the main wrapper: By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. The style for each icon:

[ws] Fast Rollovers Without Preload | Rychlé rollovery bez načít English-only | Jenom česky | Bilingual/Dvojjazyčně When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We've got one image for each state (normal, hover, active, visited etc). Let's have a simple example. Fig. 1: Three states together in one image Usually, in CSS rollovers, we use background images in this way: Když vytváříme dynamická obrázková tlačítka (rollovery), musí se obvykle do prohlížeče načíst dva, tři i více obrázků (pro základní stav, pro :hover, obrázek pro :active atd.). Vezměme si jednoduchý příklad. Obr. 1: Tři stavy současně v jednom obrázku V CSS rolloverech používáme obrázky na pozadí obvykle nějak takto: Using one common picture, we don't need to change the background image. Když ale použijeme jeden společný obrázek, měnit obrázek na pozadí nemusíme. That's all. A to je celé. Simple yet strong update comes from Marek Blaha (Czech author). Check the source code of the Example 2 to see the solution at work. : Create and share your digital world Nifty Rounded Edges Using Only CSS If you have a Google Analytics account, you must have seen that Google uses slightly rounded edges in the menu buttons on the left. See the picture below :- Today, I will teach you how to give these nifty little rounded edges to your menu. Here is the HTML needed. Home About Products Services Contact Once you have copied the above pieces of code into your HTML file and when you run it, you should see something like this :- So, you can see that these rounded corners can be created without using any kind of images. Please let me know if you have any problems or just leave comments if you like it. Balsamiq GraphicsMagick Image Processing System

Ultimate Web 2.0 Gradients - FREE Download Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient - As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff... UPDATE 03 May 2007 : v3 Release with around 130 Web 2.0 Gradients.UPDATE 16 Apr 2007 : v2 Release with some more gradients. Download ( Please don't directly link to the file... thank you ) Here is how you should be importing the .GRD file into Photoshop.

Related:  Designreynolds.alecinspirationhataducss 1css 2articles