Amazing CSS3 techniques you should know. Color animate any shape with CSS3 and a PNG Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background.
The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do.View source: Create adaptable layout using CSS3 media queries CSS3 media queries allow you to adapt a web layout to the browser width. Dim entire page when certain link is rolled over, css way Very cool for web apps: Once a particular link is rolled over, the rest of the page is dimmed.
Clipping text with CSS3 text-overflow text-overflow is a new CSS3 property which allows you to define how to handle a text which is bigger than its container. Full Browser Width Bars Another goldie from Chris Coyier: In this tutorial, he’ll teach you how to create full browser width bars easily.View source: CSS Mask-Image & Text A great text effect using CSS3 and mask images. Flared Borders with CSS. 39 Ridiculous Things To Do With CSS3 Box Shadows. Box-shadow is a pretty powerful property in modern browsers.
With just six little values, you can make some really neat stuff. How much neat stuff, you ask? To find out, I set a little time aside each day to play with it. The result is 39 ridiculous little experiments that, due to whatever issues, can only be viewed in Chrome 11 or better. 39 Box Shadow Experiments (Chrome only!) You can navigate with the arrow keys, and I’ve moved the CSS for each object into the object HTML, which should make it easier to look at particular effects.
The Basics Box-shadow has six properties: inset, left, top, blur, size, and color. Some Friends Aside from box shadow, I leaned a lot on a few other properties: :after and :before — As Trevor pointed out, these can be useful for adding effects without putting more markup in.transition — Easy tweening between a few states.webkit-keyframes — Set up precise, repeating animations with webkit keyframes.
Multiple Values Cutoff Point Credit Why Only Chrome? Easily create multilingual sites with WordPress. 1 – Localize theme strings Before installing a plugin on your blog, the first thing to do is to localize theme strings.
PHP and the Gettext tool (which allow easy string translation) have two functions: _e() and __(). The only difference between _e() and __() is that _e() echo a string while __() is used to assign a string to a variable. Let’s say your theme have the following code: <div class="content"><h1>Welcome to my site! What you have to do is to wrap all strings into the _e() or __() functions, as shown in the example below: Once done, your string will be recognized by the WPML plugin (we’re going to install it) as translatable strings. 2 – Install and configure the WPML plugin Now that your theme is fully localized, the next step is to install the WPML plugin, which will make our blog multilingual. 3 – Translate theme strings Once done, you now have to translate your theme strings in French. 4 – Translate site content. How to create an online radio using jQuery and jPlayer.
Getting started Creating the database First, create a new SQL database.
Let’s call it radio. Once done, we have to create a table. We only need 4 fields: An id, the mp3 url, the artist name and the song title. CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; We now have a database and a table to store basic information about songs we’re going to play on our radio.
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', ' 'Artist name', 'Song name'); INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', ' 'Another artist', 'Another song'); INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', ' 'One more artist', 'One more song'); Right now, the database is ready.
Creating the HTML. Guide to CSS support in email clients - Articles & Tips. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook '07/'10/'13. 19 September 2013 Added support for @font-face, @media and HTML 5 media tags in email clients, as well as email-relevant CSS properties.
We re-tested all webmail clients and the latest versions of existing clients. 30 January 2013 Outlook.com no longer supports the margin CSS property, including margin-top, margin-right, margin-bottom and margin-left. 17 July 2012 Added Outlook 2013 Preview. 1 February 2012 background-image is now supported in Gmail. 5 September 2011 Added email client results for max-width and min-width - see blog post for details. 21 June 2011 Updated guide to CSS in email released. 10 December 2010 Updated to reflect margin support in Outlook.com. 22 April 2010 27 August 2009 Added test results for the just launched MySpace Mail.Discuss this on our blog. 6 August 2009 26 August 2008 11 June 2008 19 April 2007 New Yahoo!