background preloader

Demo: Pure CSS speech bubbles

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

Related:  CSS InspirationenCSSAdornments

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…

CSS round buttons CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadows and/or images to the buttons to get to get the perfect look and feel. CSS Tricks – Floating Labels - ► Shai Raiten The web is full with amazing designs and people are really taking HTML to the edge, some require JavaScript code, some require CSS 3 features such as Transition and KeyFrames but some only require basic CSS. In this post I’ll show how to create Floating Labels for input fields, I made some examples but you can take those and modify them further based on your needs. The entire Floating Labels trick relays on two principles, the first is placing the input and label html elements inside div element. (This is not new – most of the times you’ll place both in div element because you need to place them in block level) Now we need to set relative positioning.

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.

Pure CSS Folded Corner Effect With Animations Folded Corners Effect with CSS3 Animations made by Charlotte Dann and inspired by this tutorial. I have improved the markup and CSS code a bit to make it more usable. We could use the ::before or ::after pseudo elements instead of the extra span elements but unfortunately transitions on pseudo elements arn't widely supported. For example I tried pseudo elements in this item but the animation failed to work in Chrome 17, while worked fine in Firefox 11. BIT-101 For the last few years I’ve done a year in review type of post near the end of the year. I guess I blew that already. But January 1st isn’t a bad time to do it. 2013 brought a big change for me. After almost 6 years of working at Infrared5, I left there to work at Disney Interactive. It was a tough decision.

CSS3 Flexbox Accordion Gallery CSSplay - Accordion gallery using flexbox 4th March 2014 IE10+, Firefox, Chrome and Opera copyright © stu nicholls - CSS play Information Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.

Introducing the New CSS Cursor Styles in CSS3 The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications. 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.

CSS3 Photo Info CSS3 Photo-Info version 2 28th February 2014 For IE10+, Firefox, Opera (Developer 19.0.1326.0), Chrome iOS, Android OS, Tablets and smartphones copyright © stu nicholls - CSS play Box Shadow Generator Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results. Item Blur Effect with CSS3 and jQuery Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. Typography is truly a science and many designers spend an entire career devoted to the study.

5 Column CSS Demo - Equal Height Columns with Cross-Browser CSS Equal height columns It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column. 5 Column Dimensions Each column is 20% percent wide with 2 percent padding on each side.