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. Related:  CSS InspirationenCSS/CSS3

Demo: Pure CSS speech bubbles The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>. But it could be any element you want. The entire appearance is created only with CSS. Simple examples Design is directed toward human beings. Ivan Chermayeff It’s not what you look at that matters, it’s what you see. Henry David Thoreau Takes me longer to write up blog posts on experiments or projects than to create them in the first place. @necolas at 4:05 PM March 2nd 2010 More complex CSS3 examples Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support. It doesn’t matter what the first child element of this div is...but it does need a child element. This is a blockquote that is styled to look like a speech bubble This is a blockquote that is styled to look like a thought bubble No, Donny, these men are nihilists, there’s nothing to be afraid of. Walter Sobchak

Color Hex - Z63 | Vertical align anything with just 3 lines of CSS | With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc. So, to vertically align anything we write: That’s all you need. To make it even more simple, we can write it as a mixin: You can find a demo of it here: See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen. Update (April 25th, 2014) As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. Or, you can set the perspective of the element (thanks to roydukkey):

CSS3 Drop Shadows Generator An Introduction to the CSS Flexbox Module CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump. Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. CSS Flexbox Support Currently, the CSS Flexbox specification is a working draft and things will change! Please note that this tutorial will use webkit/non-vendor-prefixed examples for the sake of brevity. Background on Layout Modes CSS Flexbox is essentially a layout mode. Occasionally, when an element is not block, it's likely to be inline. Here's a quick tip for accessing the computed style of an element using JavaScript's window.getComputedStyle method. A Quickie Example

A css only dropdown menu further examples 24th May 2006 Menu #1 - 24th May 2006 This first example is a flexible width top level list that expands to fit the text.It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link. The top level hover varies the text color and the bottom border color.The sub level hover varies the background color and adds a background square bullet against the top line of each list item. Sub level drop down lists can be positioned anywhere (left/right) beneath the top level list. The sub levels are a fixed size, but can easily be changed to suit your requirements, and have a single pixel border. Menu #2 - 30th May 2006 A simple looking menu this time, but looks can be deceiving.This one is for those people who have no room for a drop down/ flyout menu. The hover state varies the background and foreground shades of grey. Menu #3 - 4th June 2006 Menu #4 - 6th June 2006

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.

Une vidéo d'arrière-plan sur toute la page en HTML et CSS Ce tutoriel a été initialement publié en anglais par Florent Verschelde sous l'intitulé Full page video background with HTML and CSS. Quelques adaptations ont été apportées par rapport au tutoriel original. Je voulais implémenter une vidéo d'arrière-plan occupant toute une page : avec l'élément HTML 5 <video>, utilisant tout le viewport et recouvrant le viewport (pas de bandes noires). Afin de recouvrir pleinement le viewport avec la vidéo, on pourrait utiliser JavaScript, mesurer le viewport, puis dimensionner et positionner en conséquence la vidéo. Cependant, il existe aussi des solutions entièrement en CSS, au moins pour le cas d'usage ci-dessus. Voir la page de démonstration Format letterbox par défaut Prendre un élément <video> et le faire recouvrir le viewport est aussi facile que pour n'importe quel élément HTML, par exemple avec un positionnement fixe : Cela fait bel et bien prendre à notre élément <video> la largeur et la hauteur du viewport. Comment corriger ça ? Et… ça y est !

Le CSS Orienté Objet La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet. En effet, elle permet d’avoir un code structuré , facilement réutilisable et dont la mise à jour est rapide et aisée . Pourquoi ne pas l’adapter au CSS ? A priori, le CSS n’a pas grand chose à voir avec de la POO . Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers: Système de Classes Propriétés Héritage Comment l’appliquer au CSS Les classes CSS Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée. Exemple ci-dessous d’une mise en page dite « spécifique »: index.html style.css Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Exemple ci-dessous d’une mise en page dite « orientée objet » Ici au contraire, le code est: Mais Ainsi:

Les préfixes vendeurs en CSS Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Opera 10.5 l'a implémentée directement sans préfixe, puis suite à sa finalisation, l'ont fait également Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.

Paperfold CSS: Kommentare mit Akkordeon-Effekt DIVs wie Papier falten mit Paperfold CSS Wie Felix Niklas , der Entwickler von Paperfold CSS, zu seiner Paperfold CSS Demo im Mozilla Developer Network schreibt, faltet er mit seinem Texteffekt <div> Tags wie Papier zusammen, um eine visuelle Möglichkeit für das Ausblenden von Kommentaren in Listen zu erreichen. Dafür hat Niklas JavaScript und CSS3 verwendet. Paperfold CSS arbeitet dabei mit DOM-Elementen, schneidet sie in Stücke und stellt sie dann wie gefaltetes Papier mit 3D-Effekt da. In HTML entspricht jeder Kommentar einem eigenen <section> Element. Außer im Internet Explorer bis Version 9 funktioniert der Paperfold CSS Effekt in allen aktuellen großen Browsern wie Chrome, Safari und Firefox. Der Quellcode von Paperfold CSS steht über das Mozilla Developer Network als zip-Archiv frei zum Download zur Verfügung. Weiterführende Links: Paperfold CSS – Mozilla Developer NetworkPaperfold CSS Demo – Mozilla Developer Network