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. 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 Of course, we have to create a HTML page. <! Getting files from the database <? 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.