background preloader

How to Create CSS3 Speech Bubbles Without Images

How to Create CSS3 Speech Bubbles Without Images
I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever… To ease you in gently, let’s examine the HTML. <p class="speech">SitePoint Rocks! First, we’ll style the outer box: Nothing too complicated there. Now we need to create the triangular bubble pointer. If we reduce the width and height of our element to 0px and use different sized borders, we can see different triangles being formed: For our speech bubble pointer, we can therefore use a solid top and left border with transparent right and bottom borders: But what do we assign those border properties to? Comments on this article are closed.

Color Hex - Selectors Level 3 Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. These expressions can also be used, for instance, to select a set of elements, or a single element from a set of elements, by evaluating the expression across all the elements in a subtree. Status of this document 1. 1.1. 2.

CSS3 . Info - All you ever needed to know about CSS3