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

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):

You Can Get Your Blog on Kindle: Here's How You can now publish your blog’s RSS feed for sale on the Amazon Kindle Store and Amazon will share revenue with you for every Kindle user who subscribes to your feed. Getting Started Is Easy To start using Amazon Kindle Publishing for Blogs, first create a new account by following a quick, three-step process to create your log-in information, set up your security questions and fill out the vendor set-up form. In the vendor set-up form, you will need to do the following: 1. 2. 3. Once you are finished with the set-up, you can upload your blog on the Add a Blog page. Add a Blog To upload your blog for purchase in the Kindle Store, you need to follow a short, three-step process: 1. 2. 3. Add Your Feed First, you need to validate your blog’s feed URL by using the URL of your blog or its RSS feed by adding it the appropriate field. The blog feed should be a full text, well formed XML feed. How Will Your Readers Identify Your Blog? How Will Your Blog Be Found? Preview your blog. Editing Your Blog

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

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 !

Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks Last updated: 2008/06/03 Return to the main page Introduction Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too. If you are new to web design, maybe you are thinking: "Why I have to limit to that small set of fonts? If you want to know how the fonts are displayed in other OS's or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. The list First, a few introductory notes: The names in grey are the generic family of each font. 1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems. 5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles.

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

Hiding elements and CSS animations | Rhumaric, pixel distiller Following the last article about CSS animations using Javascript, let's see how we can apply this to something closer to a real life situation than a bouncing ball. Animating the disapearance of an element in a list, for example. Something to make the situation below a bit smoother: At the moment, the element removal is pretty abrupt: click the button, boom it's just gone. Note: The code in this article focuses on what happens when CSS animations are available. Making elements disapear in CSS If you think of hiding elements with CSS, display: none; is probably that first comes to your mind. The next option in mind would be visibility: hidden;, but it has the same "I-am-not-animatable" issue. Looking at the properties that are animatable, there are a few interesting options to make an element smoothly disapear, with these two probably being the most interesting: opacity: to fade the element outtransform: to scale the element or translate it out of screen Get it out of the way Wrapping it up! Pure CSS Slide-out Interface Here’s a new technique I’m trying out: a slide-out interface element using just CSS, no JavaScript. It can be used for things like fixed navigation bars or little feedback forms you see sometimes on the side of the page. Here’s how it works… Let’s do the feedback form as an example. See the demo right here. Supports IE8+ (and IE7 too if the container div is changed to an anchor) and every other modern browser. When you hover over it, a feedback form will slide out: The markup First, we’ll need the markup. <div id="slideout"><img src="feedback.png" alt="Feedback" /><div id="slideout_inner"> [form code goes here] </div></div> Essentially we have two divs. Then we’ve got the “slideout_inner” div, which is the container for the form. The CSS Here’s the magic. What happens is the inner div starts with negative y-coordinates, hidden away by being pushed left out of the page. How useful? This can be a nice way of doing these sort of slide-out interfaces without having to write any JavaScript.

Adaptive Backgrounds, un arrière-plan assorti avec jQuery Adaptive Backgrounds est un plugin jQuery qui permet d’assortir le background de votre site avec les images que vous aurez préalablement définies : la technique consiste à extraire la couleur dominante de l’image et de l’appliquer sur l’arrière-plan de son élément parent. Des couleurs en harmonie Le plugin cible toutes les images qui possèdent l’attribut data-adaptive-background, attribut personnalisé HTML5 qui permet de stocker une donnée associée à la balise HTML courante. Une fois la couleur dominante récupérée, le script applique la propriété CSS background-color sur l’élément parent de l’image. Deux options sont disponibles pour modifier le sélecteur d’image (par défaut data-adaptive-bacground=’1′) et le sélecteur de l’arrière-plan (par défaut le parent le plus proche), ainsi qu’un événement déclenché lorsque la couleur dominante de l’image est trouvée, qui retourne la couleur principale, ainsi que la palette de couleurs contenue dans l’image. Mise en place du script