background preloader

Css

Facebook Twitter

→ Special ASCII characters in HTML - Sortable table list of special ASCII characters and character sets including their name, decimal codes, hexadecimal codes, and HTML entity for HTML 4 and HTML 5 compliant sites. Also contains a Symbol-to-ASCII converte. The following is a list of special characters in ASCII together with their HTML entities. Many of the characters have special HTML entities. Those are included in the column labeled "Special code / HTML entity". The vast majority of these characters are new to HTML 4, but are generally supported by every browser.

To display the character in an HTML document, type the ASCII code directly into your HTML code. To enter the symbols in Microsoft Windows from decimal code 33 to 255, press and hold the left Alt key, then on the number pad (only on the number pad, not on the number rows above the letters on the keyboard), type 0 followed by the decimal code for the symbol, and release the Alt key. To enter the rest of the symbols on this page in a document other than an HTML document, simply copy and paste them from this page.

To enter the following symbols on a Mac; enable Unicode hex through System Preferences → International → Input Menu → Unicode Hex Input.

Div

How Do you Stretch a Background Image in a Web Page. Question: How Do you Stretch a Background Image in a Web Page? I got the following question from Neo: “I am trying since months but I can’t find a way to stretch background images in a web page.... What is the reason that it seems impossible to do? How to do it?” This is a very common desire for web designers, because not every image fits in the space of a website.

Answer: The best way to stretch an image to fit the background of a page is to use the CSS3 property, background-size: According to caniuse.com it works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, and on all the major mobile browsers. Faking a Stretched Background in Older Browsers If you’re concerned that IE8 doesn’t support it, you can fake a stretched background. The easiest way to fake a stretched background image is to stretch it across the entire page. See an example of a faked stretched background Faking a Stretched Background Image Over a Smaller Space Be sure to test this in as many browsers as you can.

Les sprites CSS. Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple).

Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite) Des générateurs de sprites CSS pour accélérer le chargement des images. Vous utilisez certainement déjà les sprites CSS sur votre site. Cette technique qui consiste à regrouper un ensemble de petits éléments visuels dans un même fichier afin d'y faire référence de manière uniforme et d'épargner des requêtes multiples au serveur n'est pas des plus agréables à mettre en place. En effet, il faut calculer les dimensions des zones à afficher et leurs coordonnées, puis exploiter la propriété background-position en CSS pour "décaler" la vue au bon emplacement.

CSS Sprite Generator est destiné à vous faciliter la tâche en combinant différentes images fournies dans une archive zip en un seul assemblage. A l'inverse, Sprite Creator simplifie la découpe virtuelle car il suffit de tracer une zone de sélection autour du sprite que l'on souhaite utiliser dans la feuille de style pour obtenir les instructions CSS. Stitches, rend la tâche encore plus aisée par drag & drop avec une interface en HTML5.

Pour en savoir plus au sujet des sprites : Stitches - An HTML5 sprite sheet generator. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with WebKit and Firefox browsers. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: Documentation Documentation is available here.

Dependencies Contributing License Download.

Cool effect

CSS3 Create - Démos, tutoriels et expériences CSS3 : menus, galerie photos, interfaces web. CSS3 Generator. Menu. Police. Snippet. Gradient. Tips. Form. Button. Bubble. Table.