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: 39 Ridiculous Things To Do With CSS3 Box Shadows | Viget Inspire. 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? Thoughts? 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 Now, you have to translate your site/blog 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. Here is the SQL code to use in order to create the table named songs: 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. Right now, the database is ready. Creating the HTML Of course, we have to create a HTML page. Then, create a file named demo.html on your server and insert the following code into it: <! This code has been taken from jPlayer’s demos.
Getting files from the database Once done, create a file named getsong.php on the server. <? Making it work Alright, we’re almost done. Guide to CSS support in email clients - Articles & Tips. Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties.
Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 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 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010.