CSS3 Media Queries

Pure CSS Image Hover | Kyle Schaeffer - Web Design and SharePoint Branding Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect. The Image The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. Let’s look at an image that could be used as a CSS hover image. Simplistic Markup As you can see, both static and hover images are contained within the same file. <a class="myButtonLink" href="#LinkURL">Leaf</a> The CSS As you can see, the HTML is extremely simple. The Result

Awesome Media Queries in JavaScript - enquire.js The Lowdown What is it? enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching. Clean & intuitive API Absolutely tiny - around 0.8kb minified & gzipped! Why should I use it? In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript, giving you the tools to create advanced responsive sites. Dependencies? None! The most you will need to do is provide a matchMedia polyfill if you wish to support old/incapable browsers. Downloads & All That Jazz Latest Build Grab the latest code, ready to go, from one of the locations below: Development — unminified Production — minified If you wish to browse/fork the source, you can do so on GitHub. Install via Bower To install via bower, enter the following at the command line: bower install enquire Install via npm To install via npm, enter the following at the command line: npm install enquire.js Match

Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. 1. 3.

Smartphone Browser Landscape Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients. How do you make websites mobile compatible? The answer is obvious: By testing them on all mobile phones, and by solving the problems you encounter. In this article, I’ll give you an overview of the mobile web market, as well as phone platforms and their browsers, so that you can decide which mobile devices to test on. The smartphone market#section1 Web developers should concentrate their testing efforts on smartphones. A smartphone is a phone that runs a recognizable OS on which the user can install applications. The smartphone market is divided into several submarkets, each of which has a distinct audience. Notes: In 2009, about 175 million smartphones were sold worldwide. A game of platforms#section2 The current fight in the mobile world is about platforms. What about IE?

Pinboard Documentation Documentation » Installing The Theme To install themes with the WordPress theme uploader: Download the theme.zip from the member areaLogin to wp-adminGo to Appearance > ThemesClick on the "Install Themes" tab, then click on the "Upload" linkUpload the theme.zip (note: it is the theme.zip, not theme-psd.zip) that you just downloaded from the member areaActivate the theme You can also install the theme with a FTP software, read this tutorial for more details. Sample Content If you are starting a new site and would like to import the sample content as seen on the demo site, here are the steps: Go to Tools > Import (yoursite.com/wp-admin/import.php). NOTE: The images shown on the demo site are not part of the theme package, nor are they included in the sample content. To set up the social media links: Go to Themify > Settings > Social Links tabThe theme comes with some pre-filled social links. Displaying The Social Media Links Exclude Search Form To create a custom navigation menu: Site Logo

media queries for common device breakpoints | Responsive Web Design The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Before you start copying and pasting below, read why you don’t need device specific viewports. CSS3 Media Queries Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Не будем останавливаться на подробном описании HTML. HTML5.js Обратите внимание, что в демо используется HTML5. Шаг 1

Media types 7.1 Introduction to media types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). 7.2 Specifying media-dependent style sheets There are currently two ways to specify media dependencies for style sheets: Specify the target medium from a style sheet with the @media or @import at-rules. The @import rule is defined in the chapter on the cascade. 7.2.1 The @media rule An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Style rules outside of @media rules apply to all media types that the style sheet applies to. 7.3 Recognized media types The names chosen for CSS media types reflect target devices for which the relevant properties make sense. all tty