Pure CSS speech bubbles Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects. Demo: Pure CSS speech bubbles Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. Progressive enhancement with pseudo-elements With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this: Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this: I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. Example code A note on progressive enhancement
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Background Pattern Designs And Resources For Websites Patterns are a useful resource for website design. Filling the background with a full-blown image is no longer a useful solution today as the variety of devices and screen resolutions in the market make it difficult to adapt to them all, although it is true that the latest plugins and scripts offer solutions such as automatic image resizing. Patterns are similar to those images that are indefinitely repeated either horizontally or vertically. That makes a lot more sense today where usability is concerned, especially in responsive design. Patterns Galleries: There are numerous websites that offer complete resource galleries to download patterns: some of them can be found on the sites we list here: Colour Lovers Subtle Patterns DIN Pattern Brusheezy Designmoo WDL, from DevianArt CSS3 patterns: A different option is to use patterns generated by code. CSS3 Patterns Gallery CSS3 Pie Gradient Patterns Pattern generators: Examples of websites with patterns:
générateur de patterns CSS3 Pure CSS social media icons (experimental) This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. The image below shows you the final appearance in modern browsers. This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. I’ve also included basic text in the title attribute of each link to provide information for users who may not be familiar with what service a specific icon represents. This is an experiment that uses CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers. Example code The technique I’ve used is much the same as the one used for the Pure CSS speech bubbles.
rgba.php test page Want to use RGBA in your projects but a solid color fallback for Internet Explorer 8- (and other old browsers) is just not good enough? Do you find that creating fallback semi-transparent pngs is too time-consuming? With rgba.php you get to use RGBA backgrounds in every browser with just one extra CSS declaration! How? background: url('rgba.php/rgba(255, 255, 255, 0.3)'); background: rgba(255, 255, 255, 0.3); or, for named colors (you specify them, only black and white by default): background: url('rgba.php? The old (v1.1 and below) way of specifying the color also works: background: url('rgba.php? Please note: If you use the a parameter, bear in mind that it ranges from 0-100 instead of 0-1. Get it now from Github Installation Just upload the file somewhere. History I wrote the first version of rgba.php as a complement to a blog post on RGBA that I posted on Februrary 2009.
Using PHP/MySQL with Google Maps - API de Google Maps Ben Appleton, Google Geo TeamWith contributions from Lary Stucker, Maps API DeveloperApril 2007 This tutorial is intended for developers who are familiar with PHP/MySQL, and want to learn how to use Google Maps with a MySQL database. After completing this tutorial, you will have a Google Map based off a database of places. The map will differentiate between two types of places—restaurants and bars—by giving their markers distinguishing icons. The tutorial is broken up into the following steps: Creating the Table When you create the MySQL table, you want to pay particular attention to the lat and lng attributes. Note: This tutorial uses location data that already have latitude and longitude information needed to plot corresponding markers. If you prefer interacting with your database through the phpMyAdmin interface, here's a screenshot of the table creation. Populating the Table After creating the table, it's time to populate it with data. Outputting XML with PHP <? <? echo $dom->saveXML(); <!
Generateur de multi-colonnes -moz-column-count:4;-webkit-column-count:4;-o-column-count:4;column-count:4;-moz-column-gap:20px;-webkit-column-gap:20px;-o-column-gap:20px;column-gap:20px;-webkit-column-rule-width:3px;-webkit-column-rule-color:#9a0000;-webkit-column-rule-style:solid;-moz-column-rule-width:3px;-moz-column-rule-color:#9a0000;-moz-column-rule-style:solid;-o-column-rule-width:3px;-o-column-rule-color:#9a0000;-o-column-rule-style:solid;column-rule-width:3px;column-rule-color:#9a0000;column-rule-style:solid; multi-column generator Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Button generator Gradient Text Border Shadow Shadow generator Border radius Border generator
BonBon Buttons - Sweet CSS3 buttons There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". No, wait! Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons Accessibility Addingrole="button" makes it more accessible. Looks I tried to avoid any images but couldn't resist adding a PNG for the noise. A border-radius doesn't always need to be rounded. For the colors HSL values are used. I tried to simulate different materials. The glossy shape is created using an :after element with a gradient background on top. There are two more datails that I would like to point out: The border uses a brighter and a darker box-shadow to imitate depth and the drop shadow changes when pressing the button. Flexibility Note
CSS2 - The display declaration The display property lets you define how a certain HTML element should be displayed. display: block display: block means that the element is displayed as a block, as paragraphs and headers have always been. Live example: display: inline display: inline means that the element is displayed inline, inside the current block on the same line. display: block display: inline display: none display: none means that the element is not displayed at all (so you won't see it in the example either). display: none display: inline-block An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. display: block Let's add some content to see how the block behaves. display: inline-block; width: 10emLet's add some content to see how the block behaves. Let's add some content to see how the block behaves. The real use of this value is when you want to give an inline element a width. Here’s the same example, but with display: inline. display: list-item display: list-item
Redirección 301: La Guía Definitiva Una redirección 301 es un recurso imprescindible para mover, eliminar y consolidar páginas. Es por ello que a menudo se menciona como solución a problemas de SEO. Te dicen: “haz un redireccionamiento 301 y arreglado”, pero… ¿Cómo lo haces si no tienes ni idea? A partir de ahora no tendrás problema. Qué es una redirección 301 Las redirecciones 301 son comandos que permiten enviar a usuarios y buscadores de una URL a otra automáticamente. Imagina que quieres mover una página de tu sitio, un directorio, o incluso todo el dominio. Gracias a ello, los usuarios no tienen esa desagradable experiencia de llegar a una página que ya no existe (el famoso error 404). Las redirecciones 301 son útiles cuando: Quieres cambiar la URL de una página o eliminarlaTienes problemas de contenido duplicadoRecibes enlaces en URLs que ya no existenVas a cambiar de gestor de contenidos o CMSNecesitas establecer la versión canónica de tu sitio Por qué son importantes las redirecciones 301 Cómo hacer redirecciones 301
Button Maker Coding Kung-fu: 35 Graphics Built Purely With CSS3 Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. RSS Feed Icon RSS Feed Icon built with CSS3, exclusively from Hongkiat! Apple iMac Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3. Apple Keyboard It’s Apple Keyboard built with CSS3! Apple iPhone Oh, one more thing: iPhoneCSS3. Cherry Blossom The real awesomeness of CSS3 is that it can be used to build anything including plants and animals! Coffee Cup A tiring day? Doraemon Meowww! Nyan Cat Patterns BonBon iOS Icons